alpinejs-overlap
v1.0.5
Published
Check if an element is overlapping another 🥞
Downloads
275
Maintainers
Readme
Alpine JS Overlap
Check if an element is overlapping another 🥞
Install
With a CDN
<script
defer
src="https://unpkg.com/alpinejs-overlap@latest/dist/overlap.min.js"
></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
With a Package Manager
yarn add -D alpinejs-overlap
npm install -D alpinejs-overlap
import Alpine from 'alpinejs'
import overlap from 'alpinejs-overlap'
Alpine.plugin(overlap)
Alpine.start()
Example
<div class="relative">
<div id="TargetEl" class="w-32 h-32 bg-teal-700 rounded-lg"></div>
<div
x-data="{ isOverlap: $overlap('#TargetEl') }"
x-on:resize.window="isOverlap = $overlap('#TargetEl')"
:class="{ 'bg-red-700': isOverlap, 'bg-teal-700': !isOverlap }"
class="absolute inset-y-0 right-0 grid w-32 h-32 rounded-lg place-content-center"
>
<p
x-text="isOverlap ? 'Overlapping' : 'Will Overlap'"
class="text-sm font-medium text-white"
></p>
</div>
</div>
In this example we check for an initial overlap and then use Alpine JS
resize.window
listener to check while resizing the window.
See the example in action on Check Elements are Overlapping - HyperJS.
Stats