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.
