Introduction

HTML 5 introduced numerous new features. One such feature is the new visibility API. While simple, this API allows you to easily detect whether your page is active, and in addition, you can perform specific events if it's active. In this article we will show you how to utilize this feature in order to enhance your application. Let's get started.

The Visibility API

Without worrying about browser compatibility for the moment, usage is pretty simple. There is an event called visibilitychange that gets fired every time window focus changes. In addition, there is a property called document.hidden that will tell you whether your page is visible or not. For example, the following script will change the document title based on whether your page is active or not.


document.addEventListener("visibilitychange", function(event){
    if ( document.hidden )
        document.title = "My Page - Inactive"
    else
        document.title = "My Page - Active"
 })

Looks pretty easy right? Well, unfortunately, some browsers still require prefixing, such as the Android 4.4 browser. For these browsers, a bit more code is required.

First, we need some code to detect whether a prefixed version of the property will work. The code below does exactly that. It loops through each vendor prefix and sees if it is present in the document object. If so, it returns the correct prefixed version.


function getHiddenProperty() {
    var prefixes = ['webkit','moz','ms','o'];

    if ( 'hidden' in document ) return 'hidden';

    for(var prefix = 0; prefix < prefixes.length; prefixes++) {
        if ((prefixes[prefix] + "Hidden") in document)
            return prefixes[i] + 'Hidden';
      }
}

Next, we create a simple wrapper function that returns true if hidden and false if not.


function isHidden() {
  return document[getHiddenProperty()]
}

That's great, but what about the visibility change event? Well, now we can write a third function to get the name of the event to use.


function getVisibilityChangeEvent() {
  var visProp = getHiddenProperty();

  if ( visProp ) {
    var eventName = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
    return eventName
  }
}

Now can modify our original function to use the functions we just created.


document.addEventListener(getVisibilityChangeEvent(), function(event){
    if (isHidden())
        document.title = "My Page - Inactive"
    else
        document.title = "My Page - Active"
 })

The complete listing is below.


function getHiddenProperty() {
    var prefixes = ['webkit','moz','ms','o'];

    if ('hidden' in document) return 'hidden';

    for(var prefix = 0; prefix < prefixes.length; prefixes++) {
      if ( (prefixes[prefix] + "Hidden") in document )
        return prefixes[i] + 'Hidden';
    }
}

function isHidden() {
  return document[getHiddenProperty()]
}

function getVisibilityChangeEvent() {
  var visProp = getHiddenProperty();

  if (visProp) {
var eventName = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
    return eventName
  }
}

document.addEventListener(getVisibilityChangeEvent(), function(event){
  if (isHidden())
      document.title = "My Page - Inactive"
  else
      document.title = "My Page - Active"
})

That's all there is to it! Make sure you have a graceful fallback for the browsers that don't support it. Thanks for reading! Be sure to check out RichOnRails.com for more Ruby, Rails, HTML, Javascript, and CSS tutorials!