Quick bit of JS to change page title when the user navigates away from the tab

title_changing_stuff.js

( function () {

  // This function does the dirty work of finding the event type and setting the appropriate title
  var updatePageTitle = function ( evt ) {
    var v = "This text should match your <title> element", // The title when tab is visible
      h = "I Miss You! ❤", // The title when tab is hidden
      evtMap = {
        focus: v,
        focusin: v,
        pageshow: v,
        blur: h,
        focusout: h,
        pagehide: h
      }; // Map each title to the different events

    evt = evt || window.event;

    // If the event type exists in the map, set the right title
    if ( evt.type in evtMap ) {
      document.title = evtMap[ evt.type ];
    } else {
      // Last ditch attempt
      if ( document.hidden ) {
        document.title = h;
      } else {
        document.title = v;
      }
    }
  };


  // This sets the appropriate listeners so that everything works cross browser
  var hidden = "hidden";

  // Standards:
  if ( hidden in document )
    document.addEventListener( "visibilitychange", updatePageTitle );
  else if ( ( hidden = "mozHidden" ) in document )
    document.addEventListener( "mozvisibilitychange", updatePageTitle );
  else if ( ( hidden = "webkitHidden" ) in document )
    document.addEventListener( "webkitvisibilitychange", updatePageTitle );
  else if ( ( hidden = "msHidden" ) in document )
    document.addEventListener( "msvisibilitychange", updatePageTitle );
  // IE 9 and lower:
  else if ( "onfocusin" in document )
    document.onfocusin = document.onfocusout = updatePageTitle;
  // All others:
  else
    window.onpageshow = window.onpagehide = window.onfocus = window.onblur = updatePageTitle;

} )();