Is it possible to find easily elements in HTML page that are hidden by given element (div)?

I prefer jQuery if possible. Do you know such plugin or something?

I searched in jQuery API (/), but didn't find something useful.

Is it possible to find easily elements in HTML page that are hidden by given element (div)?

I prefer jQuery if possible. Do you know such plugin or something?

I searched in jQuery API (http://api.jquery./), but didn't find something useful.

• javascript
• jquery
• html

• 2 What do you mean by hidden by given ponent? – VisioN Commented May 7, 2013 at 13:04
• 2 You mean elements with overlapping X/Y coordinates, but different Z-index? – Barmar Commented May 7, 2013 at 13:04
• @Barmar: exactly this ;-) – Betlista Commented May 7, 2013 at 13:05
• You might be able to use elementFromPoint but I think it only returns the topmost element, so you would have to remove the div in question first and then test. – Matt Burland Commented May 7, 2013 at 13:08

3 Answers 3

One possible solution is jQuery Collision extension: http://sourceforge/projects/jquerycollision/.

JQuery extension to return the collisions between two selectors. Handles padding, margin, borders, and can determine either overlap or portion outside. Returns JQuery "overlap" objects. Requires: jquery1.8.3+, examples also require: jqueryui1.9.2+

It sounds like you're looking for something for debugging purposes, but please let me know if I've missed the question!

Firefox has a pretty neat 3D view (info here) that lets you see (more or less) exactly how the objects are being stacked. If you've never looked at it before, it's at least cool enough to check out.

You can use the following script:

http://jsfiddle/eyxt2tt1/2/

Basically what it does is:

• calculating the dimensions of each DOM element, and paring with user's mouse coordinate
• if the match return a list of DOM elements

$(document).click(function (e) {
    var hitElements = getHitElements(e);
    var output = $('#output');
    output.html('');
    for (var i = 0; i < hitElements.length; ++i) {
        output.html(output.html() + '<br />' + hitElements[i][0].tagName + ' ' + hitElements[i][0].id);

    };

});

var getHitElements = function (e) {
    var x = e.pageX;
    var y = e.pageY;
    var hitElements = [];
    $(':visible').each(function () {
        console.log($(this).attr("id"), $(this).outerWidth());
        var offset = $(this).offset();
        console.log('+++++++++++++++++++++');
        console.log('pageX: ' + x);
        console.log('pageY: ' + y);
        console.log($(this).attr("id"), $(this).offset());
        console.log('+++++++++++++++++++++');
        if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) {
            console.log('included: ', $(this).attr("id"));
            console.log('from 0p far x: ', $(this).attr("id"), offset.left + $(this).outerWidth());
            console.log('from 0p far y: ', $(this).attr("id"), offset.top + $(this).outerHeight());
            hitElements.push($(this));
        }
    });

    return hitElements;

}