McFrosty
asked on
onBlur / onFocus problem
I am writing a timed course script for my employer that will allow for certification in various different fields. Everything is working peachy except for one problem...
Internet Explorer...
Here is my page (content and course-related scripts omitted):
--------------------------
<html >
<head>
<title>RF Training Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../includes/bluebord
<script language="JavaScript" src="../includes/scriptlib
</head>
<body onLoad="entering(); timer();" onBlur="stoptimer();" onFocus="if(!T){setTimeout
<div id="header" onBlur="checkfocus();" onFocus="if(!T){setTimeout
</div>
<div id="content">Hi mom.
</div>
<div id="footer">
<div id="buttons">
Dude, stuff is like, happening here.
</div>
<div id="timer">
<form name="counter">
<input name="timer" type="text" disabled size="7">
</form>
</div>
</div>
</body>
</html>
--------------------------
The timer function is just a clock that formats the seconds into a Digital Clock and sets the variable "T" to a setTimeout(...) function.
stoptimer() just calls a clearTimeout(T). Everything works perfectly except for my focus problem.
Any time I click ANYWHERE on the page, the timer stops because the "body" loses focus. This only happens in IE, not Mozilla, not Firefox, not Netscape, not Opera (I think).
If it wasn't IE, I wouldn't care, but since 99% of our clients use IE, this presents a major hurdle.
I am at my wits' end. Please help.
Demo: --> http://mcfrosty.kicks-ass.net/firetraining/
Click on "Blue Tech" template.
Thanks a ton if you can help me resolve this!!!
Internet Explorer...
Here is my page (content and course-related scripts omitted):
--------------------------
<html >
<head>
<title>RF Training Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../includes/bluebord
<script language="JavaScript" src="../includes/scriptlib
</head>
<body onLoad="entering(); timer();" onBlur="stoptimer();" onFocus="if(!T){setTimeout
<div id="header" onBlur="checkfocus();" onFocus="if(!T){setTimeout
</div>
<div id="content">Hi mom.
</div>
<div id="footer">
<div id="buttons">
Dude, stuff is like, happening here.
</div>
<div id="timer">
<form name="counter">
<input name="timer" type="text" disabled size="7">
</form>
</div>
</div>
</body>
</html>
--------------------------
The timer function is just a clock that formats the seconds into a Digital Clock and sets the variable "T" to a setTimeout(...) function.
stoptimer() just calls a clearTimeout(T). Everything works perfectly except for my focus problem.
Any time I click ANYWHERE on the page, the timer stops because the "body" loses focus. This only happens in IE, not Mozilla, not Firefox, not Netscape, not Opera (I think).
If it wasn't IE, I wouldn't care, but since 99% of our clients use IE, this presents a major hurdle.
I am at my wits' end. Please help.
Demo: --> http://mcfrosty.kicks-ass.net/firetraining/
Click on "Blue Tech" template.
Thanks a ton if you can help me resolve this!!!
ASKER
Its nice to see that I'm at least on the right track. I originally tried something similar to the above solution before I used the onBlur event. The problem I was running into was that the timer wasn't stopping if I clicked anywhere besides the parent window...so unless there's some miracle "screen.notthiswindow.isfo
I tried getting around it by adding the same properties to the div tags themselves, but I was running into a problem where more than 1 fired at a time...
I tried getting around it by adding the same properties to the div tags themselves, but I was running into a problem where more than 1 fired at a time...
try this
if( (g_objWindow != null) && (!g_objWindow.close) && (!g_objWindow.focus) )
if( (g_objWindow != null) && (!g_objWindow.close) && (!g_objWindow.focus) )
ASKER
sigh...no onBlur = no stopped timer...I hate IE...
Maybe I'm going about this the wrong way...Is there ANY element in IE that won't take the focus away from the body/window?
Or, is there a way I can set everything up in javascript...
window.onfocus
window.onblur
that will get fired every time?
I guess I'll try that out...
Maybe I'm going about this the wrong way...Is there ANY element in IE that won't take the focus away from the body/window?
Or, is there a way I can set everything up in javascript...
window.onfocus
window.onblur
that will get fired every time?
I guess I'll try that out...
No, can you tell me the context in which this timer is used, maybe we can think of another way to do it, basically if that window loses focus you need it to stop? why is that?
ASKER
Is there any way that you can check to see which element has the focus? If I could do that, I'd be golden...
I tried the if(!document.element.focus
but its not firing
I tried the if(!document.element.focus
but its not firing
ASKER
Ok, the timer is used to make sure the course is viewed for the required time. If the window loses focus, the timer has to stop b/c the user isn't looking at the page anymore (in theory)...If this cannot be done, then I have to scrap the whole project...without the timer and stopping and all, it won't get approved by the crediting committee.
Therefore, if someone loads the course up, the MUST be looking at it in order to continue.
Therefore, if someone loads the course up, the MUST be looking at it in order to continue.
Are there browser requirements, and do you have to offer them the option of looking at other pages. You could open it in a modal window.
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/showmodaldialog.asp
It's IE only, but what it does is it opens and it won't let you interact with the parent window until you close this window. You could then open this window start the timer, put a pause button on the window, when they hit pause it will close this window, pass the time left back to the main window. The main window will have the resume button, when you click it it will reopen the window with the time remaining.
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/showmodaldialog.asp
It's IE only, but what it does is it opens and it won't let you interact with the parent window until you close this window. You could then open this window start the timer, put a pause button on the window, when they hit pause it will close this window, pass the time left back to the main window. The main window will have the resume button, when you click it it will reopen the window with the time remaining.
oh wait you said already you need this to work for multiple browsers. I'll think more about it and see what i can come up with
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I can specify what browser to use, unfortunately, I don't want 90% of my clients downloading a browser just so they can take a course...
That would almost work except for the case where a student opens up the course, opens a new window and watches SpongeBob for the duration of the time...
I guess I'll have to try to not use the body at all and put all the timing stuff in the div tags themselves.
I hate IE...and its stupid elemental focusing...
I did read somewhere about MS's setMouseCapture. I'm going to take a look into that and maybe it'll work like I need it to.
That would almost work except for the case where a student opens up the course, opens a new window and watches SpongeBob for the duration of the time...
I guess I'll have to try to not use the body at all and put all the timing stuff in the div tags themselves.
I hate IE...and its stupid elemental focusing...
I did read somewhere about MS's setMouseCapture. I'm going to take a look into that and maybe it'll work like I need it to.
ASKER
Well, it looks like I found a work around that will work for all (not really, but at least it's good enough for IE).
Using IE's proprietary stuff, (not modal or mouse capture, due to certain constraints), I found that this works very well when dealing with a window's focus:
<script for=document event=onfocusin>do your stuff</script>
<script for=document event=onfocusout>do your other stuff</script>
naturally, both the script tags and the events are ONLY for Internet Explorer...so I'll have to specify that our users only use IE 5.0 or greater...but since almost all of them will, it shouldn't be a problem.
I plan to add in support for the other browsers in time, once we've got a good client rate.
justinbilling, thanks for all your help in trying to get this resolved.
Using IE's proprietary stuff, (not modal or mouse capture, due to certain constraints), I found that this works very well when dealing with a window's focus:
<script for=document event=onfocusin>do your stuff</script>
<script for=document event=onfocusout>do your other stuff</script>
naturally, both the script tags and the events are ONLY for Internet Explorer...so I'll have to specify that our users only use IE 5.0 or greater...but since almost all of them will, it shouldn't be a problem.
I plan to add in support for the other browsers in time, once we've got a good client rate.
justinbilling, thanks for all your help in trying to get this resolved.
<head>
<script language="javascript">
var g_objWindow = null;
function StopTimer( )
{
// Does our window exist?
if( (g_objWindow != null) && (!g_objWindow.close) )
{
// Yes
g_objWindow.stoptimer( );
}
}
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="includes/scriptlib.js
</head>
<body onfocus="StopTimer( );">
<script language="JavaScript">
var time = WM_readCookie('TimeOnPage'
if(time)
{
document.course.limit.valu
}
</script>
<h1>Web Course Sample</h1>
<p>If a value is already in the form field, a cookie has already been set for you.</p>
<form name="course">
Page time limit: <input name="limit" type="text"><br>
<input type="button" onClick="WM_setCookie('Tim
<input type="button" onClick="document.location
<input type="button" onClick="document.location
<input type="button" onClick="document.location
<input type="button" onClick="g_objWindow = window.open('BlueBorder/in
</form>
</body>
</html>
try that in your main window... take the onblur event out of your opened window