"Dynamic" website titles?

[Jeroen1322]

Hi guys!

 

You have websites like Hotmail (Outlook) or Omegle or whatever and and when something happends like you get a new email or somebody typed something the title of the website changes to like Hotmail (1) Or with Omegle it even moves.

 

How can you do this? If i make a website the title that is displayed on the tab is the name between the <title>tags</title>. 

 

Thanks!

[LukaP]

Hi guys!

 

You have websites like Hotmail (Outlook) or Omegle or whatever and and when something happends like you get a new email or somebody typed something the title of the website changes to like Hotmail (1) Or with Omegle it even moves.

 

How can you do this? If i make a website the title that is displayed on the tab is the name between the <title>tags</title>. 

 

Thanks!

Just JS/PHP change the thing inside the title badge when an event triggers it

[Jeroen1322]

Just JS/PHP change the thing inside the title badge when an event triggers it

So they have JS code between the <title> tags and like an if/else statement so if something happens then change this code that is the title?

[LukaP]

So they have JS code between the <title> tags and like an if/else statement so if something happens then change this code that is the title?

IDK what they have, but that is what i would do

[Aho]

You can easily change the page title by finding the title element and modifying the text between it.

var changeTitleText = function(newText){    var titleNode = document.getElementsByTagName('title')[0];    titleNode.innerHTML = newText;}

To change when a user inputs text, just listen to the 'input' event on the text box or textarea:

inputNode.addEventListener('input', function(){    changeTitleText(this.value);}

For title changes based on the number of emails (and updating it when a new email has been received), you'll need to either have a method in your API's endpoint that quickly returns whether or not a user has new/unread emails and the number of new/unread emails and periodically send an AJAX request to check, or poll the server using a feature like WebSockets (not recommended just for this, though).

[HK6]

You can easily change the page title by finding the title element and modifying the text between it.

var changeTitleText = function(newText){    var titleNode = document.getElementsByTagName('title')[0];    titleNode.innerHTML = newText;}

To change when a user inputs text, just listen to the 'input' event on the text box or textarea:

inputNode.addEventListener('input', function(){    changeTitleText(this.value);}

For title changes based on the number of emails (and updating it when a new email has been received), you'll need to either have a method in your API's endpoint that quickly returns whether or not a user has new/unread emails and the number of new/unread emails and periodically send an AJAX request to check, or poll the server using a feature like WebSockets (not recommended just for this, though).

You don't need to create that function. You can modify document.title in any JavaScript on the page to modify the title. Here is a quick example:

var someBoolean = true;if (someBoolean){    document.title = "Some awesome string!";}