Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Page Visibility shim for jQuery

branch: master

Add bower.json

Fixes #11 and #12.
latest commit 62512a09c6
Ruy Adorno ruyadorno authored November 27, 2013 mathiasbynens committed November 27, 2013
Octocat-spinner-32 .gitattributes Minor cleanup September 05, 2013
Octocat-spinner-32 .gitignore Minor cleanup September 05, 2013
Octocat-spinner-32 README.md Minor cleanup September 05, 2013
Octocat-spinner-32 bower.json Add bower.json November 27, 2013
Octocat-spinner-32 demo.html Minor cleanup September 05, 2013
Octocat-spinner-32 jquery-visibility.js Minor cleanup September 05, 2013
README.md

Page Visibility shim for jQuery

This plugin gives you a very simple API that allows you to execute callbacks when the page’s visibility state changes.

It does so by using the Page Visibility API where it’s supported, and falling back to good old focus and blur in older browsers.

Demo

http://mathiasbynens.be/demo/jquery-visibility

When to use?

Example use cases include but are not limited to pausing/resuming slideshows, video, and/or embedded audio clips.

Example usage

This plugin simply provides two custom events for you to use: show and hide. When the page visibility state changes, the appropriate event will be triggered.

You can use them separately:

$(document).on('show', function() {
  // the page gained visibility
});
$(document).on('hide', function() {
  // the page was hidden
});

Since most of the time you’ll need both events, your best option is to use an events map. This way, you can bind both event handlers in one go:

$(document).on({
  'show': function() {
    console.log('The page gained visibility; the `show` event was triggered.');
  },
  'hide': function() {
    console.log('The page lost visibility; the `hide` event was triggered.');
  }
});

The plugin will detect if the Page Visibility API is natively supported in the browser or not, and expose this information as a boolean (true/false) in $.support.pageVisibility:

if ($.support.pageVisibility) {
  // Page Visibility is natively supported in this browser
}

Notes

Both events live under the visibility namespace — so if you ever need to remove all event handlers added by this plugin, you could just use $(document).off('.visibility'); (or $(document).unbind('.visibility'); in jQuery 1.6 or older).

This plugin is not a Page Visibility polyfill, as it doesn’t aim to mimic the standard API. It merely provides a simple way to use this functionality (or a fallback) in your jQuery code.

License

This plugin is available under the MIT license.

Author

Mathias Bynens

Contributors

John-David Dalton

Something went wrong with that request. Please try again.