How to check browser tab is hidden or visible using jQuery

It's only fair to share...Share on Facebook0Share on Google+6Tweet about this on Twitter0Share on LinkedIn1Pin on Pinterest0Digg thisShare on StumbleUpon1

Browser Tab Visibility

Some time in our project, we required to execute function in every few seconds when our webpage will be active. We can achieve this using Page Visibility API. Page Visibility API lets you know when a webpage is visible or in focus.

Page Visibility API is particularly useful for saving resources and provide the opportunity to not perform unnecessary tasks when the webpage is not active.

where we can use this:

  1. A website has an image carousel that shouldn’t move to the next slide if user are not viewing the page.
  2. Play/Pause the video if webpage is not active.

We can achieve this using simple JavaScript and jQuery both.

jQuery Example:   DEMO

 JavaScript Example:   DEMO



  1. Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">