Reigel's demo page

by davidcl64

HTML

<div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div><div>kjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhfejakdkskjashkfjaiufaewhf</div>
<div id="tail"></div>

CSS

#tail {
    border: 1000px solid #fff;
    position: absolute;
    float: left;
    height: 100px;
    width: 100px;
    background-color: rgba(0,0,0,.0);
    z-index: 100;
    top: 0px;
    left: 0px;
}

JavaScript

$(document).bind('mousemove', function(e){
    $('#tail').css({
       left:  e.pageX - 1050,
       top:   e.pageY - 1050
    });
});

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;
}

$('#tail').bind('click', function(evt) {
    var $elements = GetAllElementsAt(evt.pageX, evt.pageY);

    // In this example, "There can be only one" - the zero'th element will be
    // the clicked element
    alert("You clicked on div #" + ($($elements[0]).prevAll().length + 1));
});