jQuery++ - jQuery.within

Demo for the jQuery.within plugin

by donejs

HTML

<script src="http://jquerypp.com/release/latest/jquerypp.js"></script>
<div id="outer">
    <div id="inner">#inner</div>
    #outer
</div>
<div id="absolute">#absolute</div>
<p id="status"></p>

CSS

body{ 
    font-family: Helvetica,"Lucida Grande","Lucida Sans",Arial,Helvetica,sans-serif;
}

div, p {
    padding: 10px;
}

#status span {
    color: #505050;
    font-weight: bold;
}

#outer {
    width: 250px;
    height: 190px;
    background-color: red;
}

#inner {
    background-color: blue;
}

#absolute {
   position: absolute;
   background-color: green;
   top: 20px;
   left: 100px;
   height: 150px;
   width: 180px;
}

JavaScript

$(document).on('mousemove', function(ev) {
    var ids = $('div').within(ev.pageX, ev.pageY).map(function(i, el) {
        return '#' + el.id + ' ';
    }).get();
    $('#status').html("$('div').within("
        + ev.pageX + ', '
        + ev.pageY + '): <br/><span>'
        + ids.join(', ') + "</span>");
});