An ultra-light jQuery plugin that tells you if the element is in the viewport, but with a twist. Did you say demo?
Current version: 1.1.1
- Added
bower
support. - The "end of page" logic is going to be removed in the next version from the plugin as it should be specific to your application
Previous version: 1.1.0
- Added support for
:in-viewport
selector as per joeframbach's suggestion.
- Get the release that you want from releases/tags ( or
bower install isInViewport
) - Copy either
isInViewport.js
orisInViewport.min.js
from thelib
folder to your folder containing your scripts - Add it after you include
jQuery
- You're ready to go!
As of version 1.1.0
, the :in-viewport
selector is preferred way of using the plugin.
Syntax is as below:
$( 'selector:in-viewport' )
When used as a selector it returns all the elements that match. Since it returns the element(s) it can thus be chained with other jQuery methods.
$( 'div:in-viewport' ).css( 'background-color', 'red' );
This will set the background-color
as red
for all divs
that are in the viewport.
$( selector ).isInViewport()
This returns true
if the element is in the viewport and false
otherwise.
As of version 1.1.0
, you can use the :in-viewport
selector with the tolerance
passed as a parameter to the selector. This removes the need to loop over a collection of elements and to test them all separately using .isInViewport()
method. The syntax is given below:
$( 'selector:in-viewport( tolerance )' )
$( 'div:in-viewport( 100 )' ).css( 'background-color', 'red' );
This will set the background-color
as red
for all divs
that are in the viewport with a tolerance
of 100px
.
With the advanced usage it becomes very easy to build things like menus with items that get auto-highlighted based on which section you are on, transition effects when an element comes into the viewport, etc.
- Note that the
:in-viewport
selector does not support thedebug
parameter. - If you need to use
debug
then use the method call syntax:
isInViewport( {"tolerance": 100, "debug": true} )
$( selector ).isInViewport( {"tolerance" :100, "debug": true} )
.isInViewport()
takes two options:
tolerance
specfies the upper limit inpixels
of when the element is deemed in viewport.
It defaults to0
.debug
enables logging to the console.
It defaults tofalse
.
See the examples in the examples
directory for more clarity.
Chrome, Firefox 3.0+, IE6+, Safari 4.0+, Opera 10.0+
:in-viewport
selector does support chaining..isInViewport()
doesn't support chaining as it returns aboolean
value.- To use with IE < 9 use jQuery <= 1.7.0