CODEWITHSUNDEEP
javascripthtmltagstitle
Niles
Niles

Reputation: 187

Using <TITLE> tag to load multiple different text string

I've seen some sites (i.e., http://www.legworkstudio.com/) that have tags that change at intervals and I assume it's done through Javascript, but I have not seen any kind of documentation on such an action.

I don't believe document.title will work for this, but maybe I have misunderstood how to use it properly.

Anybody seen something like this or how best to do this?

Basically in the HTML it would look like this every few seconds:

<title>Title 1</title>

then after a few seconds

<title>Title 2</title>

then after a few seconds more

<title>Title 3</title>

Upvotes: 1

Views: 210

Answers (3)

Jorge Fuentes Gonz&#225;lez
Jorge Fuentes Gonz&#225;lez

Reputation: 11809

There are a lot of methods and properties in the document apart from write. In this case you can access and modify the title by using the title property.

With this and a timeout/interval you loop titles doing something like this:

var titles = ["Title 1", "My second title", "yay! third title shown!"];
setInterval(function() {
    document.title = titles.shift(); // Get the first element in the array and remove it.
    titles.push(document.title); // Push the element to the end of the array
}, 5000); // Milliseconds to loop

I like codegolf a bit, so you can do something like this :P:

setInterval(function() {
    titles.push(document.title = titles.shift()); // Get the first element in the array, remove it, assign it to title and push it back to the end of the array.
}, 5000);

Upvotes: 0

steve
steve

Reputation: 361

I think that document.title would work just fine. Try this:

var titles = ["Title1", "Title2", "Title3"];
var currentTitle = 0;
setInterval(function(){
    document.title = titles[currentTitle];
    if (currentTitle < titles.length - 1) {
        currentTitle++;
    } else {
        currentTitle = 0;
    }
}, 3000);

If you add this script to your page, it should change the title of the page to the next element of the titles array every three seconds, looping back to the start of the array indefinitely.

To change the amount of time between changes, just change 3000 to the number of milliseconds you would like between changes.

To stop the cycle at any point, you can make use of clearInterval().

Will this solve your problem?

Upvotes: 1

user7709421
user7709421

Reputation:

You should use the window setInterval method, then use a selector to modifify your title element content

From W3school docs: https://www.w3schools.com/jsref/met_win_setinterval.asp

Upvotes: 0

Related Questions