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/blueborder.css" type="text/css">
<script language="JavaScript" src="../includes/scriptlib.js"></script>
</head>

<body onLoad="entering(); timer();" onBlur="stoptimer();" onFocus="if(!T){setTimeout('timer()',1000);}">
<div id="header"  onBlur="checkfocus();" onFocus="if(!T){setTimeout('timer()',1000);}"><div id="title" align="center">Training Module X</div>
</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!!!
McFrostyAsked:
Who is Participating?
 
justinbilligCommented:
we maybe can use a "modal" dialog, here is an article on how to make a cross browser modal dialog


http://www.devguru.com/features/knowledge_base/A100203.html
0
 
justinbilligCommented:
<html>

<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"></script>
</head>
<body onfocus="StopTimer( );">
<script language="JavaScript">

var time = WM_readCookie('TimeOnPage');
if(time)
{
document.course.limit.value = time;
}
</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('Timeout',document.course.limit.value);" value="Set Page Time in Secconds"><br>
<input type="button" onClick="document.location='page1.html';" value="View Objectives">
<input type="button" onClick="document.location='groundladders/index.html';" value="Start Course">
<input type="button" onClick="document.location='groundladders_rf/index.html';" value="RF Template Course">
<input type="button" onClick="g_objWindow  = window.open('BlueBorder/index.php','blueborder','width=600px,height=500px');" value="Blue-Tech Template">
</form>

</body>
</html>




try that in your main window... take the onblur event out of your opened window
0
 
McFrostyAuthor Commented:
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.isfocused" property that I don't know about, I have to use the onBlur event.

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...

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
justinbilligCommented:
try this

if( (g_objWindow != null) && (!g_objWindow.close) && (!g_objWindow.focus) )
0
 
McFrostyAuthor Commented:
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...

0
 
justinbilligCommented:
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?
0
 
McFrostyAuthor Commented:
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
0
 
McFrostyAuthor Commented:
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.

 
0
 
justinbilligCommented:
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.
0
 
justinbilligCommented:
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
0
 
McFrostyAuthor Commented:
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.
0
 
McFrostyAuthor Commented:
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.

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.