How to alert in title bar of browser on receiving a new message?

Question

I have coded a simple chat application in php. I want to know that how to put a blinking title on title bar to notify a user that he received a new message if he is switched to other tab. My codes: Javascript:

//messager fetcher

function reload_content() {



var xmlhttp;

if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("chatBox").innerHTML=xmlhttp.responseText;
    }
  }

   xmlhttp.open("POST","messages.php",true);
xmlhttp.send();
    scrollToBottom();
}
window.setInterval(reload_content, 1000);

and code for messages.php

<?php


  //database connection starts
$con = mysql_connect("******","******","******");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("chat", $con);
//database connection ends

$display_message = mysql_query("SELECT * FROM `messages` WHERE `myname` = '$_SESSION[name]' or `friend` = '$_SESSION[name]'");
 if($display_message === FALSE) {
    die(mysql_error()); // TO DO: better error handling
}


     while($row_display=mysql_fetch_array($display_message))
        {


    $display=$row_display['msg'];
}
echo $display;
?>

Where is the condition that detects whether a new message has been received? — Kevin Lynch, Sep 13 '13 at 08:29

score 1 · Answer 1 · answered Sep 13 '13 at 08:17

1

Modify document.title (by assigning new values to it) repeatedly using setInterval.

You may wish to determine what the new value should be by taking the initial value and running regular expressions over it.

answered Sep 13 '13 at 08:17

Quentin

914,110
126
1,211
1,335

Shouldn't it be `document.title`? – putvande Sep 13 '13 at 08:18
1

@putvande — Yes … and that's what I typed when I was testing it. I should probably go back to bed. – Quentin Sep 13 '13 at 08:21
i don't mean to change the title all the time only when a new message is received how can i do that? – Webmasterpsb Sep 13 '13 at 08:24
@Webmasterpsb — You put the code to do it inside whatever code you use to determine if a new message has arrived. – Quentin Sep 13 '13 at 08:25

score 1 · Answer 2 · edited May 23 '17 at 12:20

To detect if the user has switched to other tab, use this trick:

var isActive;

window.onfocus = function () { 
  isActive = true; 
}; 

window.onblur = function () { 
  isActive = false; 
}; 

// test
setInterval(function () { 
  console.log(window.isActive ? 'active' : 'inactive'); 
}, 1000);

Source : https://stackoverflow.com/a/1760283/652669

Then just update the title with:

document.title = 'message';

score 0 · Answer 3 · answered Sep 13 '13 at 08:15

0

Set the windows title in your javascript, there is an example here:

http://www.javascripter.net/faq/windowti.htm

answered Sep 13 '13 at 08:15

Arjun Sol

731
5
18

How to alert in title bar of browser on receiving a new message?

3 Answers3