How to change title bar message using Javascript

How to change title bar message using Javascript

For those who doesn`t know what is the title bar: The title bar is the top part of the browser window where the website`s (page) title is shown: In this lesson I will show you how the title bar message (text) can be changed using only Javascript.

The title bar message can be changed easily using the following property:

document.title

And the easiest way to use it is:

<script type="text/javascript">
document.title = "Hello world!";
</script>

But there are many other, funny ways to change the title bar message:

Changing the title bar message

This is done by the following script:

<input type="text" id="newtitle" value="New title bar message..."/>
<input type="button" value="Change title" onclick="changetitle(document.getElementById('newtitle').value);"/>

<script type="text/javascript">
function changetitle(changeto){
document.title = changeto;
}
</script>

Dynamic title bar message

Title 1:
Title 2:
Title 3:
Title 4:
Title 5:


Or loop from 0% to 100%

Here is the script for the first example (loop through the 5 titles):

<input type="text" id="newtitle1" value="--"/><br />
Title 2:<input type="text" id="newtitle2" value="----"/><br />
Title 3:<input type="text" id="newtitle3" value="------"/><br />
Title 4:<input type="text" id="newtitle4" value="--------"/><br />
Title 5:<input type="text" id="newtitle5" value="----------"/><br />
<input type="button" value="Start" onclick="clearTimeout(timeout);starttitle();"/>
<input type="button" value="Stop" onclick="clearTimeout(timeout);"/>

<script type="text/javascript">
var i=1;
var timeout;
function starttitle(){
document.title = document.getElementById('newtitle' + i).value;
i++;
if(i > 5){
i=1; //When the 5th title is used go back to the first one
}
timeout = setTimeout(starttitle,1000); //1000 is the number of milliseconds between each change
}
</script>

And here is the script for the second example (loop from 1% to 100%):

<input type="button" value="Start" onclick="clearTimeout(timeout);starttitle();"/>
<input type="button" value="Stop" onclick="clearTimeout(timeout);"/>

<script type="text/javascript">
var number=0;
var timeout;
function starttitle(){
document.title = number + "%";
number++;
timeout = setTimeout(starttitle,500);
if(number > 100){
clearTimeout(timeout); //When reach 100% stop and set number back to 0
number = 0; //Without this line the script will be able to run only once
}
}
</script>

These where just some examples, but using this property you can change the title bar in almost any way. If you have any question or somethings is not working then let me know it in a comment!