1 Replies - 4494 Views - Last Post: 18 April 2010 - 12:15 PM

#1 jason-pc  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 61
  • Joined: 10-January 09

change <title> tag using AJAX/JS

Posted 01 April 2010 - 12:32 AM

I wish to change the title tag to say that a new message has been left in a chat window page but only if the chat window is not in view, i.e. if they have multiple tabs open and when browser is minimized or not in view

so i wish to know how using javascript if...

1) is the browser window minimized?
2) is the web page tab in view
3) is the browser on top of all windows on their desktop?

so i can change the title if all three conditions are meet.

I had used the following but this only changes the title when i click in or our of the window.

I wis hto have this similar to that of facebook, when a new message is sent the window/tab changes to notify them, BUT only if the window/tab is not in view, first most in view.
window.onfocus = function () {
    document.title = 'Active';
    return true;
}
window.onblur = function () {
    document.title = 'Inactive';
    return true;
} 



what i wish to do is have total control of these functions and have them run when i want them. i.e. when i send the new chat message to the users browser using AJAX i want the title to change, so wanted to add in a line to find out if the window/tab is in view to determine if i need to change the title or now.

how would this be done?

Is This A Good Question/Topic? 0
  • +

Replies To: change <title> tag using AJAX/JS

#2 psyking  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 20
  • View blog
  • Posts: 165
  • Joined: 17-January 10

Re: change <title> tag using AJAX/JS

Posted 18 April 2010 - 12:15 PM

Try doing something like this to check if the person is focused or not:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Your page title</title>
<script type="text/javascript">
     // Create a new object to hold the test variable:
     var winTest = null;
     // Set winTest to false when the window goes to onblur:
     function blurred(){
          winTest = false;
          changeTitle();
     }
     // Set winTest to true when the window goes to onfocus:
     function focused(){
          winTest =  true;
          changeTitle();
     }
     // Change the title of the page:
     function changeTitle(){
          if (winTest == false){
               document.title = "Inactive";
          }else{
               document.title = "Active";
          }
     }
</script>
</head>
<!-- Set the call to the functions -->
<body onblur="javascript:blurred();" onfocus="javascript:focused();">
<!-- Your code goes here -->
</body>
</html>


Although, I can't guarantee that this code will work. I haven't had time to test it yet.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1