Solved

onBlur / onFocus problem

Posted on 2004-10-18
15
2,384 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to make google charts responsive 4 52
Provide the IDEA of External JS 1 39
Problem evaluating javascript equality expression 8 18
Jquery driving me nuts... 14 28
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

726 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