Skip to content

An ultra-light jQuery plugin that tells you if an element is in the viewport but with a twist.

License

Notifications You must be signed in to change notification settings

suprb/isInViewport

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

43 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

isInViewport.js

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.

Installation

  • Get the release that you want from releases/tags ( or bower install isInViewport )
  • Copy either isInViewport.js or isInViewport.min.js from the lib folder to your folder containing your scripts
  • Add it after you include jQuery
  • You're ready to go!

Usage

Basic usage

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.

Example:
$( 'div:in-viewport' ).css( 'background-color', 'red' );

This will set the background-color as red for all divs that are in the viewport.

Old basic usage syntax

$( selector ).isInViewport()

This returns true if the element is in the viewport and false otherwise.

Advanced usage

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 )' )
Example:
$( '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 the debug parameter.
  • If you need to use debug then use the method call syntax:
    isInViewport( {"tolerance": 100, "debug": true} )

Old advanced usage syntax

$( selector ).isInViewport( {"tolerance" :100, "debug": true} )

.isInViewport() takes two options:

  • tolerance specfies the upper limit in pixels of when the element is deemed in viewport.
    It defaults to 0.
  • debug enables logging to the console.
    It defaults to false.

See the examples in the examples directory for more clarity.

Support

Chrome, Firefox 3.0+, IE6+, Safari 4.0+, Opera 10.0+

Note

  • :in-viewport selector does support chaining.
  • .isInViewport() doesn't support chaining as it returns a boolean value.
  • To use with IE < 9 use jQuery <= 1.7.0

About

An ultra-light jQuery plugin that tells you if an element is in the viewport but with a twist.

Resources

License

Stars

Watchers

Forks

Packages

No packages published