Question

I need selectors which are able to retrieve correct results for visual closeness queries like the following:

• $("h2:closestTo('div#example')");
• $("input:below('label:contains(\"Username\")')");

Closeness and distances should be dependent of the visual location of elements rendered in the web browser (and differs for different window sizes).

Is there any way to do that with jQuery? I think it will involve the usage of .offset()

Answer 1

I just created a first working version by myself.

Demonstration: http://jsfiddle.net/alp82/L5ZM8/

Definition of “above”: Only elements which are visually above a reference element are returned. Also, they have to be in horizontal bounds of the reference elements. The same rules apply to “below”, “leftTo” and “rightTo”.

Here is the code:

jQuery.expr[':'].above = function(node, stackIndex, properties) {
    return inDirection(node, "above", properties[3]);
};

jQuery.expr[':'].below = function(node, stackIndex, properties) {
    return inDirection(node, "below", properties[3]);
};

jQuery.expr[':'].leftTo = function(node, stackIndex, properties) {
    return inDirection(node, "leftTo", properties[3]);
};

jQuery.expr[':'].rightTo = function(node, stackIndex, properties) {
    return inDirection(node, "rightTo", properties[3]);
};

inDirection = function(node, direction, selector) {
    var topSource = jQuery(selector).offset().top;
    var leftSource = jQuery(selector).offset().left;
    var bottomSource = topSource + jQuery(selector).height();
    var rightSource = leftSource + jQuery(selector).width();

    var topTarget = jQuery(node).offset().top;
    var leftTarget = jQuery(node).offset().left;
    var bottomTarget = topTarget + jQuery(node).height();
    var rightTarget = leftTarget + jQuery(node).width();

    if(direction == "above") {
        return bottomSource > bottomTarget && leftSource <= rightTarget && rightSource >= leftTarget;
    }

    if(direction == "below") {
        return topSource < topTarget && leftSource <= rightTarget && rightSource >= leftTarget;
    }

    if(direction == "leftTo") {
        return rightSource > rightTarget && topSource <= bottomTarget && bottomSource >= topTarget;
    }

    if(direction == "rightTo") {
        return leftSource < leftTarget && topSource <= bottomTarget && bottomSource >= topTarget;
    }

    return false;
};

Use the selector like in the following examples. The argument to the custom selector has to be a selector which returns exactly one element:

$(document).ready(function() {
    elementsAbove = jQuery("div:above('#footer')");
    elementsBelow = jQuery("div:below('#header')");
    elementsLeftTo = jQuery("div:leftTo('#sidebar-right')");
    elementsRightTo = jQuery("div:rightTo('#sidebar-left')");
}

Please tell me if that works for you and/or you have suggestions to make it better.