Download the PHP package gaomingcode/is-in-viewport without Composer

Basic usage

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. It can also be used with jquery's .is.

Example:

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

Advanced usage

Using in-viewport pseudo-selector

This returns all the elements that are in the viewport while taking into account the tolerance criterion.

Since it returns the element(s) it can thus be chained with other jQuery methods.

When a viewport selector is specified, it uses that to calculate if the element is in that viewport or not.

When a viewport selector is not specified, it defaults to window as the viewport.

The viewport selector is any valid jQuery selector.

Defaults:

• tolerance defaults to 0
• viewport defaults to window

Example:

Example 1 will set the background-color as red for all divs that are in the viewport with a tolerance of 100px.

Example 2 will set the background-color as green for all divs that are in the viewport with a tolerance of viewport height - 100px. This lets the user conveniently provide a tolerance value closer to the viewport height without having to call $(viewport).height() all the time.

Example 3 will set the background-color as blue and text as in viewport for all divs that are in the custom viewport given by #viewport and 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.

See the examples in the examples directory for more clarity.

Note:

• When tolerance is 0 or undefined it is actually equal to tolerance: $(viewport).height() and not 0.

This makes it easier for developers to have the whole viewport available to them as a valid viewport.

Using exposed isInViewport function

This returns all the elements that are in the viewport while taking into account the tolerance criterion.

Since it returns the element(s) it can thus be chained with other jQuery methods.

When a viewport is specified, it uses that to calculate if the element is in that viewport or not.

When a viewport is not specified, it defaults to window as the viewport.

The viewport is a valid DOM element or jQuery wrapped DOM element, NOT a selector string.

Defaults:

• tolerance defaults to 0
• viewport defaults to window

Example:

Support

Chrome, Firefox 3.5+, IE9+, Safari 5+, Opera 10.5+

Note

• :in-viewport selector does support chaining.

Changelog

3.0.3

• Use jQuery.expr.pseudos when found since jQuery.expr[':'] is deprecated

3.0.2

• Support new rollup properties and get rid of removed rollups properties (moduleId, moduleName, etc)

3.0.1

• Fix jQuery no conflict mode issue (#39)

3.0.0

• Remove the deprecated $(el).do method
• Remove support for browsers < { IE9, Safari 5, Opera 10.5, Firefox 3.5 }
• Add support for modules and bundlers. You can now import 'is-in-viewport'/require('is-in-viewport') in your project (yay!)
• Add properly functioning sourcemaps for easier debugging

2.4.2

• Remove postInstall script which was breaking builds

2.4.1

• Undo 2.4.0 as is-in-viewport already exists on bower and isn't owned by me

2.4.0

• Update bower.json to comply with new validations
• Rename package on bower to match with that on npm i.e., is-in-viewport

2.3.1

• Remove unnecessary boolean coercion

2.3.0

• Re-exposed isInViewport with saner semantics. You can now pass options as JS objects to isInViewport and hence can now do things like:

• Deprecated do in favour of run
• When available, isInViewport now uses Sizzle.selectors.createPseudo

2.2.5

• Updated readme to point to new demo. Mostly a bump for npm to pickup the new readme.

2.2.4