Solved

onBlur / onFocus problem

Posted on 2004-10-18
15
2,370 Views
Last Modified: 2008-01-09
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!!!
0
Comment
Question by:McFrosty
  • 7
  • 6
15 Comments
 
LVL 15

Expert Comment

by:justinbillig
ID: 12339648
<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
 

Author Comment

by:McFrosty
ID: 12341426
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
 
LVL 15

Expert Comment

by:justinbillig
ID: 12341841
try this

if( (g_objWindow != null) && (!g_objWindow.close) && (!g_objWindow.focus) )
0
 

Author Comment

by:McFrosty
ID: 12343090
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
 
LVL 15

Expert Comment

by:justinbillig
ID: 12343194
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
 

Author Comment

by:McFrosty
ID: 12343264
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:McFrosty
ID: 12343674
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
 
LVL 15

Expert Comment

by:justinbillig
ID: 12346421
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
 
LVL 15

Expert Comment

by:justinbillig
ID: 12346432
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
 
LVL 15

Accepted Solution

by:
justinbillig earned 100 total points
ID: 12346483
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
 

Author Comment

by:McFrosty
ID: 12350125
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
 
LVL 15

Expert Comment

by:justinbillig
ID: 12351332
0
 

Author Comment

by:McFrosty
ID: 12359579
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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now