How to check if an element is overlapping other elements?

javascript boundary
Moon picture Moon · Aug 22, 2012 · Viewed 71.4k times · Source

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!

Answer

Buu Nguyen picture Buu Nguyen · Aug 22, 2012

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.

Related questions

HttpClient setting boundary with content-type

I am using javascript to communicate with a third party service. As part of their authentication process they need the "multipart/form" body of the post message including an image to be encrypted in md5, this is added to a …

Read More
What are non-word boundary in regex (\B), compared to word-boundary?

What are non-word boundary in regex (\B), compared to word-boundary?

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More