Setting Title Tags Using JavaScript: Inspired by Facebook Chat Notification
HTML <title>
tag is a meta tag mostly used for website information purposes.
When you set a title tag on your page's .html
file
it will show up on the browser tab:
And also shows up on search results:
But you can also change the title tag pragmatically using JavaScript.
All you have to do is to modify the document.title
property.
I love how Facebook cleverly used the title area to notify about the new chat messages.
Here I have put together a basic implementation of the FB chat title effect.
First, you will store the current title tag in a constant value:
const currentTitle = document.title
Next, you will create a setInterval
method to change the title every 1 second:
setInterval(function() {
if(document.title == currentTitle) {
document.title = "Tamal Sent You a Message"
} else {
document.title = currentTitle
}}, 1000)
The setInterval
method is a global method in JavaScript. By default, it takes a callback function and the interval amount (integer). The callback function will run every X time. In this case, it will run every 1000 milliseconds or every 1 seconds.
Inside the callback function, the logic toggles between the titles using an if/else condition.
I hope you learned something new today. If so, show some love 🧡