Geek Answers Handbook

Find elements that are stacked under a (visual) element in jquery

if I have 2 divs (z index not assigned), one layer above, can I use the link to the top div to find which div is below?

as for the DOM structure, these two divs will be siblings. but visually they are stacked on top of each other.

here is an example:

<body> <div id="box1" style="background:#e0e0e0;height:100px;width:100px;"></div> <div id="box2" style="background:#000000;height:100px;width:100px;margin-top:-50px;"></div> </body>

which leads to the following: enter image description here

so I'm trying to figure out, having a black div, box2, a way to return box1 in jquery (using selectors), because box1 is below box2 using jquery.

+8
jquery
source share
4 answers

Make sure box1 uses the same position as the specific place on the page.

And just because I'm a little bored, I did it awesome-er

http://jsfiddle.net/hunter/PBAb6/

 function GetAllElementsAt(x, y) { var $elements = $("body *").map(function() { var $this = $(this); var offset = $this.offset(); var l = offset.left; var t = offset.top; var h = $this.height(); var w = $this.width(); var maxx = l + w; var maxy = t + h; return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null; }); return $elements; }
+20
source share

Maybe something in this direction ... separate the element under the cursor (in this case box1) and use document.elementFromPoint to extract the next element under this x, y-string .. example:

  var first_box = $('#box1');// more programmaticaly would be to use document.elementFromPoint to fetch the element under your cursor var first_box_offset = first_box.offset(); var x = first_box_offset.left; var y= first_box_offset.top + first_box.height(); var reattach_me = first_box.detach(); var second_box = document.elementFromPoint(x, y); $('body').append(reattach_me);
+2
source share

As far as I know, there is no selector for this. Perhaps you could write a function to do this. I would iterate over each element preceding the div in question and check if it is in the bounding box in the desired div.

0
source share

The only way, as you have in the case of the sample, is to actually have a different division of the DIV over another - if this happens after it in the DOM. So your simple answer is that any div is on top of another div if it appears after it in the DOM tree. Please provide a more illustrative example if this is not enough.

You can illustrate that this works by trying to add a positive margin to DIV1. You will notice that it hits DIV2 down. DIV2, however, when a given negative margin will be a “layer” over DIV1. In your scenario using fields and sections without a z-index or other positioning methods, it is not possible for DIV1 to overlap DIV2.

EDIT based on comments:

The process of figuring out if two elements occupy the same space is a different game. The general run of your method would be to get the coordinate position for your anchor and get its width and height. Then scroll through all the divs and see if the snap position overlaps any of its coordinates. If it overlaps multiple divs, take the latter in the DOM, as it will be on top of the other.

Please do not force me to write sample code. :)

0
source share

More articles:


All Articles