Change Page Title on Focus Out Using jQuery

It is a good idea to change the page title to something catchy when the user moves to a different tab to catch his attention. This can help to get the user to come back your website. So in this post, let’s find out how to change the title of the page when user moves to different tab using jQuery.
Here is the jQuery code which will change the page title to “something of your choice” on focus out and set the original title when the focus is back on the page.

$(document).ready(function(){
var oldTitle = $(document).find("title").text();
var newTitle = "Read this...";

function setTitle(title){
  document.title = title;
}

$(window).on("focus", function(){
setTitle(oldTitle);
}).on("blur", function(){
setTitle(newTitle);
});
});

The above code does following:
  • First, it stores the original title of the page in a variable.
  • Then, it initializes another variable “newTitle” to store the new title. For the demo, it is set to “Read this…” but you are free to change.
  • Defines a setTitle function which set the title of the page.
  • And then attaches focus and a blur event to the window to change the title. When focus moves out, then sets the new title. And when focus is back on the window, sets the old stored title.



SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..