Need suggestion on raising user's attention using javascript

[CW]

I wrote an HTML based chat application. The front end is built entirely on
HTML + javascript. Essentially, I have a hidden frame that's refreshed
frequently and any new messages are displayed in another frame using
document.write. My problem is that since chat screen can be obscured by
other applications/windows, I have no way of informing users that new
messages have arrived other than popping the window to the top using
window.focus. However, I think this method is rather crude because user
might be typing away in another chat window and gets rudely interrupted by
the window popping up and taking the focus away from the textbox they are
typing into. The preferred method is to flash the icon on toolbar (obviously
it only works on Microsoft windows just like other instant messaging
applications). This would provide a visual cue to the user that a new
message has arrived but won't interrupt user from working on whatever they
were working on. I can't quite figure out how to do it using javascript, if
it's actually even possible. If not, I would appreciate some suggestions of
raising user's attention without being too abrupt.

Thanks in advance

 

[kaeli]

I wrote an HTML based chat application. The front end is built entirely on
HTML + javascript. Essentially, I have a hidden frame that's refreshed
frequently and any new messages are displayed in another frame using
document.write. My problem is that since chat screen can be obscured by
other applications/windows, I have no way of informing users that new
messages have arrived other than popping the window to the top using
window.focus. However, I think this method is rather crude because user
might be typing away in another chat window and gets rudely interrupted by
the window popping up and taking the focus away from the textbox they are
typing into. The preferred method is to flash the icon on toolbar (obviously
it only works on Microsoft windows just like other instant messaging
applications). This would provide a visual cue to the user that a new
message has arrived but won't interrupt user from working on whatever they
were working on. I can't quite figure out how to do it using javascript, if
it's actually even possible. If not, I would appreciate some suggestions of
raising user's attention without being too abrupt.

You can't do this with javascript, as it doesn't have the proper access to
the Windows API.
If you have .net, you can use VB.NET to do it. C and Delphi can talk to the
API, too. But it sounds like you're not into making a full-blown windows
application, so this might not work for you.

You could try an alert. It won't steal focus and the alert should flash the
taskbar button (windows standard, I believe). I know it does on my system. Of
course, then the user has to click okay on the alert, but it's better than
stealing focus.

--
--
~kaeli~
Never argue with an idiot! People may not be able to tell
you apart.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[CW]

Thanks for your suggestion.

Just wondering if there is a way to detect a particular window/frame
actually has focus. I like your idea of using alert to notify user
unobtrusively. However, I need a way to know whether the window already has
the user attention by checking to see the window already has the focus. I
looked through javascript reference and there doesn't seem to be a way to do
it. Any idea?

Thanks again

 

[kaeli]

Thanks for your suggestion.

Just wondering if there is a way to detect a particular window/frame
actually has focus. I like your idea of using alert to notify user
unobtrusively. However, I need a way to know whether the window already has
the user attention by checking to see the window already has the focus. I
looked through javascript reference and there doesn't seem to be a way to do
it. Any idea?

Sure.
Write a focus/blur handler pair that sets and unsets a variable.

A quick little study.
Tested in IE6 and Firefox 1.0.
The taskbar did indeed flash when there was no focus.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
var hasFocus = true;

window.onfocus = setFocus;
window.onblur = unsetFocus;

function setFocus()
{
hasFocus = true;
}
function unsetFocus()
{
hasFocus = false;
}

function checkFocus()
{
if (hasFocus)
{
alert("window has focus");
}
else
{
alert("no focus.");
}
}
var t = window.setTimeout("checkFocus()",5000);
var t2 = window.setTimeout("checkFocus()",7000);
</script>
</head>

<body>
<p>Let's see...</p>
</body>
</html>

--

 

[CW]

Thanks again for your help.

My problem is the javascript is run in the hidden frame (thus it would never
gain focus by default) as user types away in another frame. When javascript
detects new message, I need to check to see whether the frame that holds the
input form (where user types in messages) actually has focus. I am not sure
how to check variable value in another window.

Essentially I have the following code in the entry frame (where user types
input) in its head script block.
....
var HasFocus=true;
window.onblur='HasFocus=false;'
....

In the hidden frame, I tried something like
....
if top.entry.window.HasFocus==false
top.entry.window.focus()
....

IE neither complained nor seemed to have run the script.

Now an entirely different question here. Is it possible to open a pop-up
window in its own browser instance. What I mean by this is that a pop-up
window is opened using window.open, the pop-up and parent share the same
browser instance. I noticed that if I could put chat windows in different
browser instances, focus method would flash the icon on toolbar rather than
popping up while typing away in another chat window. Thus if I could somehow
open a new chat window in its own browser instance, I could use focus to
achieve the effect I am after.

Thanks a lot for your help so far and I really appreciate it.

 

[kaeli]

Thanks again for your help.

My problem is the javascript is run in the hidden frame (thus it would never
gain focus by default) as user types away in another frame. When javascript
detects new message, I need to check to see whether the frame that holds the
input form (where user types in messages) actually has focus. I am not sure
how to check variable value in another window.

I am, but during testing, it didn't work very well in IE. For whatever
reason, the focus and blur events weren't firing when I expected them to (I
had to click on things to fire them).
Now, since you mention that the user is typing, I found a decent workaround
by attaching the handlers to the textarea focus and blur instead of the
window.
But then for some other odd reason, IE doesn't flash the toolbar button,
which was the entire point of the exercise.
Note that Firefox did great for all tests and worked as expected for
everything.

If you want to play, I got this far.

Frameset:
<html>
<frameset rows="*" frameborder="yes" border="1" framespacing="0" cols="100,*"
bordercolor="#eeeeee" topmargin="0" leftmargin="0" marginheight="0"
marginwidth="0">
<frame name="leftFrame" scrolling="auto" src="test.html"
bordercolor="#eeeeee" frameborder="no">
<frame name="mainFrame" src="test2.html"
scrolling="auto" bordercolor="#eeeeee" frameborder="no">
</frameset>
</frameset>
</html>

test.html: (this would be your hidden frame)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">

function checkFocus()
{
if (top.frames[1].getFocus())
{
top.alert("has focus");
}
else
{
top.alert("no focus.");
}
}
var t = window.setTimeout("checkFocus()",2000);
var t = window.setTimeout("checkFocus()",6000);
</script>
</head>

<body>
<p>Let's see...</p>
<input type="button" value="clicky" name="b1" onClick="checkFocus()">
</body>
</html>

test2.html (main frame)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>test </title>
<script type="text/javascript">
var hasFocus = true;

function setFocus()
{
hasFocus = true;
}
function unsetFocus()
{
hasFocus = false;
}
function getFocus()
{
return hasFocus;
}

</script>
</head>

<body>
<p>Start typing in the text area.</p>
<textarea name="t1" onFocus="setFocus()" onBlur="unsetFocus()"></textarea>
</body>

Now an entirely different question here. Is it possible to open a pop-up
window in its own browser instance. What I mean by this is that a pop-up
window is opened using window.open, the pop-up and parent share the same
browser instance. I noticed that if I could put chat windows in different
browser instances, focus method would flash the icon on toolbar rather than
popping up while typing away in another chat window. Thus if I could somehow
open a new chat window in its own browser instance, I could use focus to
achieve the effect I am after.

Not in a cross-browser manner.
If this is IE only, we might be able to find something, but it might be
ActiveX and require special security permissions. It is not a normal thing to
do. Plus, IE is a memory hog. It might not be nice to pull up a new instance
on people.
You can't do it with any normal javascript. It would basically be a shell
command.

What you're doing seems best achieved in a way other than just a browser and
some javascript, at least to me.
If this isn't just an exercise in javascript, you may want to consider other
approaches.

--
--
~kaeli~
The best part of having kids is giving them back to their
parents.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[CW]

Thanks a lot. Appreciate your help.

Thanks again for your help.

My problem is the javascript is run in the hidden frame (thus it would
never
gain focus by default) as user types away in another frame. When
javascript
detects new message, I need to check to see whether the frame that holds
the
input form (where user types in messages) actually has focus. I am not
sure
how to check variable value in another window.

I am, but during testing, it didn't work very well in IE. For whatever
reason, the focus and blur events weren't firing when I expected them to
(I
had to click on things to fire them).
Now, since you mention that the user is typing, I found a decent
workaround
by attaching the handlers to the textarea focus and blur instead of the
window.
But then for some other odd reason, IE doesn't flash the toolbar button,
which was the entire point of the exercise.
Note that Firefox did great for all tests and worked as expected for
everything.

If you want to play, I got this far.

Frameset:
<html>
<frameset rows="*" frameborder="yes" border="1" framespacing="0"
cols="100,*"
bordercolor="#eeeeee" topmargin="0" leftmargin="0" marginheight="0"
marginwidth="0">
<frame name="leftFrame" scrolling="auto" src="test.html"
bordercolor="#eeeeee" frameborder="no">
<frame name="mainFrame" src="test2.html"
scrolling="auto" bordercolor="#eeeeee" frameborder="no">
</frameset>
</frameset>
</html>

test.html: (this would be your hidden frame)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">

function checkFocus()
{
if (top.frames[1].getFocus())
{
top.alert("has focus");
}
else
{
top.alert("no focus.");
}
}
var t = window.setTimeout("checkFocus()",2000);
var t = window.setTimeout("checkFocus()",6000);
</script>
</head>

<body>
<p>Let's see...</p>
<input type="button" value="clicky" name="b1" onClick="checkFocus()">
</body>
</html>

test2.html (main frame)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>test </title>
<script type="text/javascript">
var hasFocus = true;

function setFocus()
{
hasFocus = true;
}
function unsetFocus()
{
hasFocus = false;
}
function getFocus()
{
return hasFocus;
}

</script>
</head>

<body>
<p>Start typing in the text area.</p>
<textarea name="t1" onFocus="setFocus()" onBlur="unsetFocus()"></textarea>
</body>

Now an entirely different question here. Is it possible to open a pop-up
window in its own browser instance. What I mean by this is that a pop-up
window is opened using window.open, the pop-up and parent share the same
browser instance. I noticed that if I could put chat windows in different
browser instances, focus method would flash the icon on toolbar rather
than
popping up while typing away in another chat window. Thus if I could
somehow
open a new chat window in its own browser instance, I could use focus to
achieve the effect I am after.

Not in a cross-browser manner.
If this is IE only, we might be able to find something, but it might be
ActiveX and require special security permissions. It is not a normal thing
to
do. Plus, IE is a memory hog. It might not be nice to pull up a new
instance
on people.
You can't do it with any normal javascript. It would basically be a shell
command.

What you're doing seems best achieved in a way other than just a browser
and
some javascript, at least to me.
If this isn't just an exercise in javascript, you may want to consider
other
approaches.

--
--
~kaeli~
The best part of having kids is giving them back to their
parents.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 

[Ian L]

I'm not sure if the alert() method (or function) would keep the window
out of focus while attracting the user. However, using JavaScript to
make the icon at the start bar blink is not possible.

 

[Dr John Stockton]

JRS: In article <416db4fe$0$31643$5a62ac22@per-qv1-newsreader-
01.iinet.net.au>, dated Thu, 14 Oct 2004 09:06:40, seen in

Lines: 148

Thanks a lot. Appreciate your help.
news:[email protected]...

If you want maximum further assistance, see the newsgroup FAQ, in
particular Section 2.3 paras 1 & 6.

 

[J. J. Cale]

I use a simple .wav file (bell ring) to alert my clients and write to the
status of the chat window for those who aren't wired. I check the session
status on refreshing new messages and track the users behavior(?checked
message or not) by raising and lowering a flag whenever the chat gets or
loses focus. Works for me.
Jimbo

Thanks a lot. Appreciate your help.

(e-mail address removed) enlightened us with...

Thanks again for your help.

My problem is the javascript is run in the hidden frame (thus it would
never
gain focus by default) as user types away in another frame. When
javascript
detects new message, I need to check to see whether the frame that holds
the
input form (where user types in messages) actually has focus. I am not
sure
how to check variable value in another window.

I am, but during testing, it didn't work very well in IE. For whatever
reason, the focus and blur events weren't firing when I expected them to
(I
had to click on things to fire them).
Now, since you mention that the user is typing, I found a decent
workaround
by attaching the handlers to the textarea focus and blur instead of the
window.
But then for some other odd reason, IE doesn't flash the toolbar button,
which was the entire point of the exercise.
Note that Firefox did great for all tests and worked as expected for
everything.

If you want to play, I got this far.

Frameset:
<html>
<frameset rows="*" frameborder="yes" border="1" framespacing="0"
cols="100,*"
bordercolor="#eeeeee" topmargin="0" leftmargin="0" marginheight="0"
marginwidth="0">
<frame name="leftFrame" scrolling="auto" src="test.html"
bordercolor="#eeeeee" frameborder="no">
<frame name="mainFrame" src="test2.html"
scrolling="auto" bordercolor="#eeeeee" frameborder="no">
</frameset>
</frameset>
</html>

test.html: (this would be your hidden frame)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">

function checkFocus()
{
if (top.frames[1].getFocus())
{
top.alert("has focus");
}
else
{
top.alert("no focus.");
}
}
var t = window.setTimeout("checkFocus()",2000);
var t = window.setTimeout("checkFocus()",6000);
</script>
</head>

<body>
<p>Let's see...</p>
<input type="button" value="clicky" name="b1" onClick="checkFocus()">
</body>
</html>

test2.html (main frame)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>test </title>
<script type="text/javascript">
var hasFocus = true;

function setFocus()
{
hasFocus = true;
}
function unsetFocus()
{
hasFocus = false;
}
function getFocus()
{
return hasFocus;
}

</script>
</head>

<body>
<p>Start typing in the text area.</p>
<textarea name="t1" onFocus="setFocus()"

Not in a cross-browser manner.
If this is IE only, we might be able to find something, but it might be
ActiveX and require special security permissions. It is not a normal thing
to
do. Plus, IE is a memory hog. It might not be nice to pull up a new
instance
on people.
You can't do it with any normal javascript. It would basically be a shell
command.

What you're doing seems best achieved in a way other than just a browser
and
some javascript, at least to me.
If this isn't just an exercise in javascript, you may want to consider
other
approaches.

--
--
~kaeli~
The best part of having kids is giving them back to their
parents.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace