Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

jquery-visibility

Page Visibility shim for jQuery

Subscribe to updates I use jquery-visibility


Statistics on jquery-visibility

Number of watchers on Github 122
Number of open issues 4
Average time to close an issue 7 months
Main language JavaScript
Average time to merge a PR 4 months
Open pull requests 0+
Closed pull requests 7+
Last commit over 4 years ago
Repo Created about 8 years ago
Repo Last Updated about 2 years ago
Size 36 KB
Homepage https://mths.be/v...
Organization / Authormathiasbynens
Latest Releasev1.0.8
Contributors5
Page Updated
Do you use jquery-visibility? Leave a review!
View open issues (4)
View jquery-visibility activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating jquery-visibility for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Page Visibility shim for jQuery

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

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

Demo

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

When to use?

Typical 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 document 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
});

For most applications you'll need both events, so the most convenient 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.');
  }
});

Or bind both to the same callback and distinguish using the event variable.

$(document).on('show hide', function (e) {
    console.log('The page is now', e.type === 'show' ? 'visible' : 'hidden');
});

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.
Warning: $.support was marked deprecated in jQuery version 1.9, so it is likely to be removed in the future.

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

If the Page Visibility API is supported the plugin will also store the current visibility state in document.hidden.

if (!document.hidden) {
  // Page is currently visible
}

Notes

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

If you don't want to host the file yourself, the plugin is also available on CDNJS. See here for latest URLs: https://cdnjs.com/libraries/jquery-visibility

License

This plugin is available under the MIT license.

Author

Mathias Bynens

Contributors

Jan Paepke, John-David Dalton

jquery-visibility open issues Ask a question     (View All Issues)
  • over 3 years Module don't work along with webpack
  • almost 4 years v1.0.12 is not published to bower
  • about 6 years Doesn't work on native Android Browser
jquery-visibility questions on Stackoverflow (View All Questions)
  • jquery visibility/hide/show/opacity
  • jQuery - visibility query in if statement does not work
  • jQuery Visibility Visibile Not Working In WordPress
  • Jquery visibility toggle not working
  • jquery visibility selector
  • jQuery visibility option on IE
jquery-visibility list of languages used
Other projects in JavaScript