$.inside

$.fn

Synopsis

$el.inside( <ancestor> [, <includeMargin>] )

Arguments

<ancestor>: The ancestor to compare $el with

    'selector' | jQuery | node

<includeMargin>: Whether to take margins into account

Returns

{
    left: <left>
    top: <top>
}

<left|top>: Position of $el to <ancestor>

    +-----+                   +-----+
    | 0/0 |                   | 1/0 | 
    +-----+                   +-----+
           +-----------------+
           |     +-----+     |
           |     |.5/.5|     |
           |     +-----+     |
           +-----------------+
    +-----+                   +-----+
    | 0/1 |                   | 1/1 |
    +-----+                   +-----+

Example

Determine if an element is in the viewport — and how far:

$('#foo').inside('html');

$.event.special

Synopsis

$(el).bind('inside', {ancestor: 'html'}, function (e, inside) {
  // inside.left
  // inside.top
});