Change content of title tag, when switching to other open tab in the browser

Question

I just recently saw this on two different websites, does anyone know how it is done? If you have multiple tabs open, and you leave the current one, the title in the tab is changed. Very nice trick!

http://blog.invisionapp.com/

http://zerosixthree.se/create-a-responsive-header-video-with-graceful-degradation/

Answer 1

This works by registering Handlers on the onfocus and onblur events of window.

jQuery-Style:

$(window).on('blur', function() { ... });

Without jQuery:

window.onblur = function() { ... }

If that was not clear: the pages title can be read/written via document.title

Answer 2

$(function() {
  var message = "Don't forget us";
  var original;

  $(window).focus(function() {
    if (original) {
      document.title = original;
    }
  }).blur(function() {
    var title = $('title').text();
    if (title != message) {
      original = title;
    }
    document.title = message;
  });
});