Skip to content

Simple jQuery plugin to determine if an element is within the viewport

License

Notifications You must be signed in to change notification settings

moagrius/isOnScreen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#jQuery.isOnScreen

Simple jQuery plugin to determine if an element is positioned within the viewport. It does not test any other type of "visibility", like css display, opacity, presence in the dom, etc - it only considers position.

Current version returns true if at least 1 pixel is visible on screen.

An optional callback argument is accepted, that is passed the number of pixels visible on each edge - the return of that callback is used, if provided. The callback is called from the scope of the current node.

Some examples:

Returns true if element has at least 1 pixel within the viewport:

$('selector').isOnScreen();

Returns true if at least the top 10px of the element's vertical area is in the viewport:

$('selector').isOnScreen(function(deltas){
  return deltas.top >= 10 && deltas.bottom >= 10;
});

Returns true if at least the top 10px of the element's vertical area above the bottom of the viewport.

$('selector').isOnScreen(function(deltas){
  return deltas.top >= 10;
});  

Returns true if the element is within 100px of the bottom of the viewport (and so technically is still not "visible" - this can be useful for loading content when you expect a user to see it shortly, for example during a fling action or in an infinite scroll application).

$('selector').isOnScreen(function(deltas){
  return deltas.top >= -100;
});          

Returns true if the element's vertical space is entirely within the viewport:

$('selector').isOnScreen(function(deltas){
  return deltas.top >= this.height() && deltas.bottom >= this.height();
});

Return true if the element is entirely within the viewport:

$('selector').isOnScreen(function(deltas){
  return deltas.top >= this.height() 
    && deltas.bottom >= this.height()
    && deltas.left >= this.width()
    && deltas.right >= this.width()
});

Returns true if the element is above the bottom of the viewport at all (at least 1 pixel is showing, or the element is above the viewport and not actually visible).

$('selector').isOnScreen(function(deltas){
  return deltas.top >= 0;
});

About

Simple jQuery plugin to determine if an element is within the viewport

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published