Forum Moderators: open
I have a specific requirement, please help me out.
I have a web site where multiple html pages are opened at a time & messages are received or those pages are refreshed automatically using meta-tag.
what I want is whenever that page is refreshed, the particular html window should notify user (as user may have opened other html window), now notification could be by setting focus to that html window which is refreshed, but then this will distract & frustate the user as he was referring other html window. What I would like to do is make that some notification like yahoo or msn messanger (Chat window) received. But I want this kind of feature in HTML/Javascript.
Zangs
can you ple give me some description or if possible then code also..
Zangs
This example, on page load, sets a two second timer. In two seconds if the window isn't in the foreground the title will start blinking. If the window does have focus, it won't alter the title.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Blinking Document.title</title>
<script type="text/javascript">
// <![CDATA[
lostFocus = false;
var blinkTitle = function(){
if(lostFocus){
document.title = (!document.title ¦¦ document.title == '* New Message Waiting! *')? 'New Message Waiting!' : '* New Message Waiting! *';
blinkTimer = window.setTimeout("blinkTitle()", 500);
}
}
var clearBlink = function(){
if(blinkTimer){
window.clearTimeout(blinkTimer);
}
document.title = 'Blinking Document.title';
lostFocus=false;
}
// ]]>
</script>
</head>
<body onload="window.setTimeout(blinkTitle, 2000);" onfocus="clearBlink();" onblur="lostFocus=true;">
<div id="timer"></div>
</body>
</html>
But it can be possible like msn or window chat window.
It means when I get message, it will highlight with some color like msn or yahoo or this window get focus so user can know the message.
Zangs
or this window get focus so user can know the message
In your original request you said you didn't want to focus the window as the users other window would lose focus. Which I agree with.
whoisgregg:
Nice example, similar to what I had in mind. Here's my example, note I've done several different ones! You might want to use a couple at the same time or something like that. Couldn't get the window to flash without an ugly alert so didn't bother with that one.
Copy & paste this whole thing to see all 3, but don't click more than 1 at once, it'll probably break......
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>User Alerts</title>
<script>
// Method 1 - Titlebar text
var titleSwitchCount = 0;
var titleSwitchLimit = 4;
var titleOriginalText = document.title;
var titleText = "You have a new message!";
var titleDelay = 500;function titlebarTextAlert() {
// Failsafe
if( titleSwitchCount) return;titlebarSwitch();
}function titlebarSwitch() {
if( document.title == titleOriginalText) {
// New message text
document.title = titleText;
titleSwitchCount++;} else {
// Original text
document.title = titleOriginalText;
if( titleSwitchCount == titleSwitchLimit) titleSwitchCount = 0;
}// If count is 0 then we must have just reset it
if( titleSwitchCount) setTimeout( "titlebarSwitch();", titleDelay);
}// Method 1.5 - Another titlebar alert
var title2Text = titleText +" - ";
var titleAppearCount = 0;
var titleBlinkCount = 0;
var titleBlinkLimit = 3;
var titleBlinkDelay = 500;
var title2OriginalText;function titlebar2() {
// Failsafe
if( titleSwitchCount) return;titleAppear();
}function titleAppear() {
if( titleAppearCount!= title2Text.length) {
// Add next character...
document.title = title2Text.charAt( title2Text.length -(++titleAppearCount)) +document.title;
setTimeout( "titleAppear();", 25);} else {
// Reset and move on to blinking
titleAppearCount = 0;
title2OriginalText = document.title;
titleBlink();
}
}function titleBlink() {
// If has new message in title...
if( document.title == title2OriginalText) {
// Put old title back
document.title = titleOriginalText;
titleBlinkCount++;} else {
// Put message back again
document.title = title2OriginalText;if( titleBlinkCount == titleBlinkLimit) {
titleBlinkCount = 0;
titleDisappear();
}
}if( titleBlinkCount) setTimeout( "titleBlink();", titleBlinkDelay);
}function titleDisappear() {
if( titleAppearCount!= title2Text.length) {
// 'Remove' characters
var len = title2Text.length -(++titleAppearCount);
var str = title2Text.substr( titleAppearCount, len);document.title = str +titleOriginalText;
setTimeout( "titleDisappear();", 25);} else {
titleAppearCount = 0;
}}
// Method 2 - Popup window
// Note, using height to 'move' box - this avoids a scrollbar!
var posDist;
var posNow = 0;
var popupRunning;function popupAlert() {
// Failsafe
if( popupRunning) return;
popupRunning = true;var div = document.getElementById( "popup");
// Set start position
div.style.display = "block";
posDist = div.offsetHeight;
div.style.height = "0px";
div.style.overflow = "hidden";// Start appear....
popupUp();
}function popupUp() {
var div = document.getElementById( "popup");// How far to go?
var dist = posDist -posNow;if( dist >1) {
// Move up a bit
posNow += Math.ceil( dist /8);
div.style.height = posNow +"px";setTimeout( "popupUp();", 25);
} else {
// We've arrived, delay for 1.5 secs then vanish
div.style.height = posDist;
setTimeout( "popupDown();", 1500);
}
}function popupDown() {
var div = document.getElementById( "popup");// How far to go?
var dist = posNow;if( dist >1) {
// Move down a bit
posNow -= Math.ceil( dist /8);
div.style.height = posNow +"px";setTimeout( "popupDown();", 20);
} else {
// Done, reset the box
div.style.height = posDist +"px";
div.style.display = "none";
popupRunning = false;
}
}</script>
<style>
HTML { height: 100%; }
BODY { margin: 0; padding: 20px; }/* Position popup window:
This is done separately, the outer div
is used as a wrapper to move or size */
#popup {
position: absolute; bottom: 0; right: 0;
display: none;
}/* Style popup window */
#popup DIV {
width: 250px; height: 20px;
padding: 20px;
font-family: "Arial", sans-serif;
font-size: 20px; line-height: 1em;
text-align: center;
background: lightblue;
border: 2px solid deepskyblue;
}</style>
</head>
<body>
<a href='javascript:titlebarTextAlert();'>Method 1 - Titlebar Text</a><br><br>
<a href='javascript:titlebar2();'>Method 1.5 - Another Titlebar Text</a><br><br>
<a href='javascript:popupAlert();'>Method 2 - Popup</a><br><br><div id='popup'><div>You have a new message!</div></div>
</body></html>
Thankyou very much for the solution.
And Last mehtod will definitely help me.
You are simply great.
I hope you will help me in feature if I need...
Again Thanks a lot.
