Determine if one node is overlapping another

Question

Is it possible to know, in jQuery, if a node is overlapping another?

On top of David Thomas' question, how are you selecting the nodes to begin with? — Jasper, Dec 19 '11 at 22:00
Yeah, definitely define `above` and `below`, since you got three different answers, based on three different meanings for "`above`" and "`below`"... — redShadow, Dec 19 '11 at 22:06
Do you mean which has higher or lower vertical placement on the screen (offset), which of several siblings appears first in the DOM (index), which occurs first in the DOM overall (some sort of recursive use of index), or which is in front/behind (z-index)? — benastan, Dec 19 '11 at 22:24

score 3 · Accepted Answer · answered Dec 19 '11 at 22:25

So, you want to detect overlapping? Then this:

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && 
               comparePositions( pos1[1], pos2[1] );
    };
})();

Usage:

if ( overlaps( node1, node2 ) ) {
    // ...
}

Live demo: http://jsfiddle.net/98sAG/

Thank you for this. I used this snippet in a rudimentary game I'm making (as a demo for a client) and it has saved me a lot of time. Thank you! — , Oct 07 '14 at 18:32

John Fable · Answer 2 · 2011-12-19T22:20:42.040

0

Use .offset() to find its position on the screen:

http://api.jquery.com/offset/

With offset(); you will be able to get a Y coordinate called top that will be its location in pixels from the top of the window.

var boxOne = $('#boxOne').offset():
var boxTwo = $('#boxTwo').offset():

if(boxOne.top>boxTwo.top) {
    alert('boxOne is higher');
} else if (boxOne.top==boxTwo.top) {
    alert('boxes are even');
} else {
    alert('boxTwo is higher');
}

edited Dec 19 '11 at 22:20

answered Dec 19 '11 at 22:01

John Fable

1,081
7
11

1

The OP wants to detect [overlapping](http://data.imagup.com/11/1138998080.png), not which node is higher in the document. – Šime Vidas Dec 19 '11 at 22:29

score 0 · Answer 3 · answered Dec 19 '11 at 22:01

0

There is a function .index() in jQuery which does what you are looking for I guess. Here is a link to the page:

http://api.jquery.com/index/

If you have any specific questions about the function feel free to ask.

answered Dec 19 '11 at 22:01

mahulst

443
2
10

Damn, you were faster.. I just found `.index()` in the docs and yeah, it looks like it is the right way to do that.. – redShadow Dec 19 '11 at 22:05
I know .index() this is not what i am looking for :) I want to do this : http://data.imagup.com/11/1138998080.png – MyBoon Dec 19 '11 at 22:12

score 0 · Answer 4 · edited May 23 '17 at 12:03

For position in DOM, I don't think index() is enough, unless you are comparing two sister elements. More generally,

Use parents() on both nodes
pop off elements from both ancestor lists while identical
compare index() on the highest differing ancestor

(Alternately, you could also do index() on $('*'), but I guess that would be horribly inefficient)

EDIT: with the clarification under @Mike's answer, this is now officially a collision detection question. Thus, I think something like this is in order, but note the comment. You can instead use the jQuery offset() function to get the position of the elements. The comparison logic is sound.

Determine if one node is overlapping another

4 Answers4