kirkonrails / onscreen

A jQuery plugin that does stuff when the matched elements are visible (as inside the viewport)

My Fork Changes

I've added the functionallity to this awesome plugin so that you can fire an onScreen event just once. Kind of like jQuery.one() for events

It's the exact same as doIn() only you call doInOnce() and it will remove it after the first execution.

For more information or questions please visit my website kirkquesnelle.com.

onScreen

A jQuery plugin that does stuff when the matched elements are visible (as inside the viewport)

The plugin works something like this:

$('elements').onScreen({
   container: window,
   direction: 'vertical',
   doIn: function() {
     // Do something to the matched elements as they come in
   },
   doOut: function() {
     // Do something to the matched elements as they get off scren
   },
   tolerance: 0,
   throttle: 50,
   toggleClass: 'onScreen',
   lazyAttr: null,
   lazyPlaceholder: 'someImage.jpg',
   debug: false
});

---

Download

Download the compressed (production) version.

Download the uncompressed (development) version.

You can checkout the demos here. And you can download them here.

Bower

onScreen is available as a bower package. Just run bower install onScreen and you're set.

---

Options

####container: string Tells onScreen() to track elements inside a scrollable element.
default: window (without quotes)

####direction: string Tells the plugin to work in horizontal or vertical mode.
default: vertical

####doIn: function Is executed whenever the matched elements enter the viewport.
default: null

####doOut: function Is executed whenever the matched elements leave the viewport.
default: null

####tolerance: integer The doIn() method will be executed when the matched element is N pixels inside the viewport.
default: 0

####throttle: integer Throttle delay. Throttles calculation callback, so it will executed no more than specified delay ms.
default: null

####toggleClass: string Tells the plugin to add a specified class when the elements enter the viewport and remove it when they leave.
default: null

####lazyAttr: string onScreen will look for this attribute on <img> tags and replace the src attribute with this one's.
default: null

####lazyPlaceholder: string Image to display while loading. This is applied through CSS as the background of the matched elements.
default: A base64 encoded gif file.

####debug: boolean Spams your console with information about the matched elements and the scroll container.
default: false