Geek Answers Handbook

Detect if an Html element overlaps another Html element

in jQuery or Javascript, how would I find that, for example, the img tag overlaps another img tag?

+4
source share
5 answers

You can do this by finding the offset elements, then finding the width and height of each. Then it's just a matter of simple math to determine if they overlap.

I am not going to do all the work for you, but this should lead you to the right path:

<div id="one"></div> <div id="two"></div> <script> var offsetOne = $('#one').offset(); var offsetTwo = $('#two').offset(); var widthOne = $('#one').width(); var widthTwo = $('#two').width(); var heightOne = $('#one').height(); var heightTwo = $('#two').height(); </script>

All that remains is to use the two offsets .top and .left along with the widths and heights to determine if an overlap exists. Check the documentation links in each of the functions in the first paragraph of my answer.

+5
source

Another vanilla way using getBoundingClientRect (). I am sharing this because I did not like the answers here, and that was my decision.

 function checkForOverlap(el1, el2) { var bounds1 = el1.getBoundingClientRect(); var bounds2 = el2.getBoundingClientRect(); var firstIstLeftmost = (bounds1.left <= bounds2.left); var leftest = firstIstLeftmost ? bounds1 : bounds2; var rightest = firstIstLeftmost ? bounds2 : bounds1; //change to >= if border overlap should count if(leftest.right > rightest.left) { // var firstIsTopmost = (bounds1.top <= bounds2.top); var topest = firstIsTopmost ? bounds1 : bounds2; var bottomest = firstIsTopmost ? bounds2 : bounds1; //change to >= if border overlap should count return topest.bottom > bottomest.top; } else return false; }
+6
source

I just wrote a js file to use =) hope this helps you ... it took me a while until I finished it

You can download it from this link: solid-dotheyoverlap.js

just include this js file and call the doTheyOverlap function with two divs that you want to find out if they overlap or not, and what it is!

here is a simple and simple example i made for you:

 <html> <head> <title>Test</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="solid-dotheyoverlap.js"></script> <script type="text/javascript"> $(function() { alert(doTheyOverlap($('#div0'),$('#div1'))); }); </script> </head> <body> <div id="div0" style="position: absolute; width : 200px; height : 200px; background-color : red">div 0</div> <div id="div1" style="position: absolute; width : 200px; height : 200px; background-color : yellow; top:100px; left:100px">div 1</div> </body> </html>

and the code for solid-doTheyOverlap.js that I wrote is more clear and more efficient than the solution offered by @artwl. it looks like this:

 function doTheyOverlap(div0, div1){return (yInstersection(div0, div1) && xInstersection(div0, div1));} function findSmallestY(div0, div1){ return (div0.offset().top < div1.offset().top)? div0 : div1; } function yInstersection(div0, div1){ var divY0 = findSmallestY(div0, div1); var divY1 = (div0 != divY0)? div0 : div1; return (divY0.offset().top + divY0.height()) - divY1.offset().top > 0; } function findSmallestX(div0, div1){ return (div0.offset().left < div1.offset().left)? div0 : div1; } function xInstersection(div0, div1){ var divX0 = findSmallestX(div0, div1); var divX1 = (div0 != divX0)? div0 : div1; return (divX0.offset().left + divX0.width()) - divX1.offset().left > 0; }

Put it in simple words, I realized that “figuring out whether 2 squares overlap is as easy as figuring out if their segments (depending on the x-axis and y-axis) are excessive,” in javascript it would be like this “ doTheyOverlap(div0, div1){return (yInstersection(div0, div1) && xInstersection(div0, div1));} ", from there it is as simple as a pair of permutations ( (divY0.offset().top + divY0.height()) - divY1.offset().top > 0 , (divX0.offset().left + divX0.width()) - divX1.offset().left > 0 ) to find out if these segments overlap.

+4
source

Demo

 <style type="text/css"> div{ width:200px; height:200px; background:#EEE; } #two{ position:absolute; left:100px; top:50px; background:#F60; } </style> <div id="one">One</div> <div id="two">Two</div> <div id="three">Three</div> <script> console.log(isOverlap("one","two"));//true console.log(isOverlap("one","three"));//false console.log(isOverlap("two","three"));//true function isOverlap(idOne,idTwo){ var objOne=$("#"+idOne), objTwo=$("#"+idTwo), offsetOne = objOne.offset(), offsetTwo = objTwo.offset(), topOne=offsetOne.top, topTwo=offsetTwo.top, leftOne=offsetOne.left, leftTwo=offsetTwo.left, widthOne = objOne.width(), widthTwo = objTwo.width(), heightOne = objOne.height(), heightTwo = objTwo.height(); var leftTop = leftTwo > leftOne && leftTwo < leftOne+widthOne && topTwo > topOne && topTwo < topOne+heightOne, rightTop = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne && topTwo > topOne && topTwo < topOne+heightOne, leftBottom = leftTwo > leftOne && leftTwo < leftOne+widthOne && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne, rightBottom = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne; return leftTop || rightTop || leftBottom || rightBottom; } </script>
+3
source

@solid snake, I rewrote your code in a more concise form:

 function doTheyOverlap(el0, el1) { var elY0 = (el0.offsetTop < el1.offsetTop)? el0 : el1; var elY1 = (el0 != elY0)? el0 : el1; var yInstersection = (elY0.offsetTop + elY0.clientHeight) - elY1.offsetTop > 0; var elX0 = (el0.offsetLeft < el1.offsetLeft)? el0 : el1; var elX1 = (el0 != elX0)? el0 : el1; var xInstersection = (elX0.offsetLeft + elX0.clientWidth) - elX1.offsetLeft > 0; return (yInstersection && xInstersection); }

Since this answer is still relevant, despite the fact that it has been since 2012

Edit: updated code

+1
source

More articles:


All Articles