Changing Page Title Dynamically When User Changes Tab

In recent year, this approach has been very popular to grab user’s attention when they forget or change the tab.

For example, Facebook is adding a number at the beginning of title.

Twitter is also adding the number of unseen tweet counts to title.

Linkedin is changing both the favicon and title.

All of these approaches are important in terms of user experience. The attention of user can never be lost on the site :)

Let’s learn how to change the title of page dynamically by using JavaScript.

First, let’s get the title of page in our hands.

Now we have the current page title. For example, we can change the page title to “Come Back!” when user change the tab.

Everything is ready for change our title :) Now we need to detect user’s active / inactive state. We can do this with some js events like this.

Now we know is the page is active / inactive. We can create our simple logic.

So if the page is not active, the title is becoming “Come Back”. If user comes back, the title is again becoming original title.

Like this:

And also we can improve this. We can make the “Come Back” text blink to get more attention of the users.

After our improvements on the code, the final result is:

So this is how we can make attention grabbing dynamic titles with simple JavaScript code.

-