Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

README.md

#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

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.