jquery determine amount of overlap between 2 divs

Question

I have two divs (rectangles) that overlap each other. How do I determine the amount of intersection/overlap between the two divs in javascript?

I realize I'll get the dimensions for each rectangle:
offset.top, offset.left, elt.offsetWidth, elt.offsetHeight

But from there I'm unsure how to determine the amount of overlap.

"Amount" is a tad relative. We talking pixels, inches, miles? Also, what have you tried so far? — Brad Christie, Jun 09 '11 at 19:17
possible duplicate of [How to check if an element is overlapping other elements?](http://stackoverflow.com/questions/12066870/how-to-check-if-an-element-is-overlapping-other-elements) — Gajus, Aug 19 '15 at 18:35

KOGI · Answer 1 · 2013-04-16T16:59:51.717

var div1 = $('#div1');
var div2 = $('#div2');
var both = div1.add( div2 );

var leftMost = (div1.offset( ).left < div2.offset( ).left ? div1 : div2);
var rightMost = both.not( leftMost );
var topMost = (div1.offset( ).top < div2.offset( ).top ? div1 : div2);
var botMost = both.not( topMost );

var overlap = {   'x': (leftMost.offset( ).left + leftMost.outerWidth( )) - rightMost.offset( ).left,
                  'y': (topMost.offset( ).top + topMost.outerHeight( )) - botMost.offset( ).top };

jquery determine amount of overlap between 2 divs

1 Answers1