Rotate Document Title using JavaScript
-
28-09-2019 - |
Question
I'm looking to rotate a web page document title using JS. So for example:
Change to Domain.com
to New Messgae - Domain.com
and then back to Domain.com and so on, very similar to how Facebook does it with the new messages when using chat.
I have looked into using SetInterval but it only excepts one expression? Is it possible to change this or is using SetInterval the wrong function to use?
$(document).ready(function() {
setInterval(function()
{
$(document).attr('title', 'New Message — Domain.com');
},
2000);
});
Solution
Right now, you keep setting the same new title every 2 seconds, i.e. you won't see a change after the first change. You need to store the old title and alternate between two states, displaying the old and new titles:
var oldTitle, timerId;
function flashTitle(newTitle) {
var state = false;
oldTitle = document.title; // save old title
timerId = setInterval(flash, 2000);
function flash() {
// switch between old and new titles
document.title = state ? oldTitle : newTitle;
state = !state;
}
}
function clearFlash() {
clearInterval(timerId);
document.title = oldTitle; // restore old title
}
OTHER TIPS
$(document).ready(function() {
var titles=['title1','title2','title3'];
setInterval(function()
{
$(document).attr('title', titles[0]);
titles.push(titles.shift());
},
2000);
});
Well you can do it without using JavaScript Libraries like so...
var title = document.getElementsByTagName('title');
var msg1 = "Domain.com";
var msg2 = "New Message - Domain.com"
var current;
var titleChange;
function changeTitle(){
if(current == msg1){
title = msg2;
current = msg2;
}else{ //If the current title isn't equal to the value of msg1
title = msg1;
current = msg1;
}
titleChange = setTimeout("changeTitle()", 1000);
}
function stopChangingTitle(){
clearTimeout(titleChange);
title = msg1;
}
I can't guarantee that the above code will work, but it should work!
This is what I came up with using Dr.Molle's solution.
function changeTitle (mytitle,count) {
console.log(title_change);
console.log(count);
if (count >= 1) {
var titles = [$('title').attr('data-title'),mytitle];
title_change = setInterval(function(){
$(document).attr('title', titles[0]);
titles.push(titles.shift());
},
1000);
} else {
clearInterval(title_change);
//clearTimeout(title_change);
title_change = false;
}
return false;
}
I did find however when I declared title_change outside the function that I couldn't seem to get the setInterval to stop cycling around. When count comes though >= 1 the process is started but when it comes back as 0 the clearInterval and clearTimeout didn't stop the change_loop.