How to Dynamically Change Your Web Page Title

Last updated on November 8th, 2024 at 11:56 am

The script provided below allows for the dynamic alteration of the browser title. It includes a delay variable that can be adjusted to suit your preferences. By modifying this value, you can also create an animation effect for the web page title to a certain degree.

Save the below script as change_webpage_title.html

<script type="text/javascript">
var message = new Array();
var delay = 5000; // Sets the delay between switching messages
var currMessage = 0; // Start at index 0
message[0] = "I am First";
message[1] = "I am Second";
message[2] = "I am Third";

function timer() {
    document.title = message[currMessage]; // Set the title to the current message
    currMessage++; // Increment the message index
    if (currMessage >= message.length) {
        currMessage = 0; // Reset to the first message if we reach the end
    }
    setTimeout(timer, delay); // Call the timer function after the delay
}

timer(); // Start the timer
</script>

If you would like to add more messages, add more values in the message array like below

message[1] = "I am First";
message[2] = "I am Second";
message[3] = "I am Third";
message[4]= "New Message";

1. Indexing: The array indices start from 0, so I’ve set currMessage to 0 at the beginning.
2. Array length check: The script now checks whether currMessage exceeds the array length and resets it if necessary (using currMessage = 0).
3. setTimeout syntax: I replaced the string version of setTimeout("timer()", delay) with a direct function call setTimeout(timer, delay).

This is the core function that runs every time the title needs to change. Let’s go through each part:

This sets up the timer to call the timer() function again after the specified delay (5000 milliseconds, or 5 seconds). This ensures that the title keeps updating periodically.

Setting the Title
document.title = message[currMessage];

This line sets the browser tab’s title (document.title) to the current message, using the currMessage index to pull the correct string from the message array.

For example, if currMessage is 0, document.title will be set to "I am First".

Incrementing the Index

currMessage++;

This line increments the currMessage index by 1, moving to the next message in the array.

For example, if currMessage was 0, it will now become 1 (moving to "I am Second").

Resetting the Index After the Last Message
if (currMessage >= message.length) { currMessage = 0; // Reset to the first message if we reach the end }

This checks whether currMessage has reached or exceeded the length of the message array. Since arrays are zero-indexed, message.length gives the total number of elements in the array.

If currMessage is equal to or greater than message.length (which means it has gone past the last message), it resets currMessage back to 0, thus starting the cycle over from the first message ("I am First").

Re-running the Timer Function

ssetTimeout(timer, delay); // Call the timer function after the delay

Demo