How to check if an element is overlapping other elements?
JavascriptBoundaryJavascript Problem Overview
I have two div elements. Each of them have 450px width and height. How do I check if the first div is overlapping the second div?
I've tried to use javascript hittest, but it's a little bit complicated. Since I'm trying to find out how it actually work, I would like to get started with a simpler code.
I found out that I can use .getClientRects to get the boundary of an element, but I'm not exactly sure how to compare boundaries.
Please advise me!
Javascript Solutions
Solution 1 - Javascript
Something like this for rect1
and rect2
retrieved via getBoundingClientRect():
var overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
Explain: if one or more expressions in the parenthese are true
, there's no overlapping. If all are false
, there must be an overlapping.
Solution 2 - Javascript
Here's something I made some days ago: https://gist.github.com/yckart/7177551
var AABB = {
collide: function (el1, el2) {
var rect1 = el1.getBoundingClientRect();
var rect2 = el2.getBoundingClientRect();
return !(
rect1.top > rect2.bottom ||
rect1.right < rect2.left ||
rect1.bottom < rect2.top ||
rect1.left > rect2.right
);
},
inside: function (el1, el2) {
var rect1 = el1.getBoundingClientRect();
var rect2 = el2.getBoundingClientRect();
return (
((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
);
}
};
Solution 3 - Javascript
element.getBoundingClientRect() is quiet good in modern browsers, delivers a bounding relative to the screen. look here Than test if the bounding boxes overlap, that is simple geometry...
oh excuse me... found your edit too late...
Solution 4 - Javascript
In Internet Explorer earlier than version 8, the returned TextRectangle object contains the coordinates in physical pixel size, while from version 8, it contains the coordinates in logical pixel size.
If you need the bounding rectangle of the entire element, use the getBoundingClientRect method.