Change Page Title When Switching Browser Tabs - Funtabify

Funtabify is a super tiny and dead simple jQuery plugin to change the document title displayed in the browser tab when the user navigates to other websites. Licensed under the GNU GPLv3.

How It Works:

• Detect if a document is visible or hidden using the Page Visibility API.
• Change the document tile when the user switches to another tab thus your webpage is not visible to the user.

See Also:

• jQuery Plugin For Dynamic Page Title and Favicon - I Miss You

How to use it:

1. Download the plugin and load the funtabify.min.js script after the latest jQuery JavaScript library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/funtabify.min.js"></script>

2. Create a new funtabify instance and define the tab title to show when your webpage becomes hidden.

new funtabify("I Miss You");

3. The core JavaScript:

class funtabify {
  constructor(switchTitle) {
    jQuery(document).ready(function($) {

    (function() {
        var hidden = "hidden";
        var oldtitle = document.title;
        var currenttitle;

        // Standards based on browsers:
        if (hidden in document)
          document.addEventListener("visibilitychange", onchange);
        else if ((hidden = "mozHidden") in document) // For Mozilla Firefox
          document.addEventListener("mozvisibilitychange", onchange);
        else if ((hidden = "webkitHidden") in document) // For Chrome, Safari etc.
          document.addEventListener("webkitvisibilitychange", onchange);
        else if ((hidden = "msHidden") in document)
          document.addEventListener("msvisibilitychange", onchange);
        // IE 9 and lower:
        else if ("onfocusin" in document)
          document.onfocusin = document.onfocusout = onchange;
        // All others:
        else
          window.onpageshow = window.onpagehide
            = window.onfocus = window.onblur = onchange;

         //if tab change happens set status to either hidden or visible
        function onchange (evt) {
          var v = "visible", h = "hidden",
            evtMap = {   //check events and set status based on event type
              focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
            };

          evt = evt || window.event;
          if (evt.type in evtMap) {  // check the title
            currenttitle = oldtitle;
            $(document).attr('title', currenttitle);
          }
          else { // We are in hidden state so create unique title
            currenttitle = this[hidden] ? switchTitle : oldtitle; //update to whatever you want
            $(document).attr('title', currenttitle);
          }

        }

        // set the initial state (but only if browser supports the Page Visibility API)
        if( document[hidden] !== undefined )
          onchange({type: document[hidden] ? "blur" : "focus"});
      })();
    });
  }
}

---

This awesome jQuery plugin is developed by pagalprogrammer. For more Advanced Usages, please check the demo page or visit the official website.