Using <TITLE> tag to load multiple different text string

Question

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>

setInterval(function(){ document.title = "Title " + Math.ceil(Math.random() * 5) }, 1000); — Karthik VU
– Karthik VU, Commented Mar 14, 2017 at 18:32
Your question/accepted answer ratio is too low (zero, actually). You should start accepting answers to your questions if you want people help you in te future. People spend time helping you for a reason, so be grateful, please. — Jorge Fuentes González
– Jorge Fuentes González, Commented Mar 14, 2017 at 18:45

steve · Accepted Answer · 2017-03-14 18:34:33Z

1

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?

answered Mar 14, 2017 at 18:34

steve

3713 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user7709421 · Accepted Answer · 2017-03-14 18:34:22Z

0

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

answered Mar 14, 2017 at 18:34

user7709421

Comments

Jorge Fuentes González · Accepted Answer · 2017-03-14 18:35:16Z

0

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);

answered Mar 14, 2017 at 18:35

Jorge Fuentes González

11.9k4 gold badges48 silver badges70 bronze badges

2 Comments

steve Over a year ago

I like this solution of push/shift instead of looping the array, pretty cool! A nifty bit of codegolf :D

Jorge Fuentes González Over a year ago

@steveg Haha, thanx xD

Collectives™ on Stack Overflow

Using <TITLE> tag to load multiple different text string

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related