Re: event capture problem

by "Cyanide _7" <leo7278(at)hotmail.com>

 Date:  Fri, 26 May 2000 10:33:33 CDT
 To:  coffield(at)cet.edu
 Cc:  hwg-languages(at)hwg.org
  todo: View Thread, Original
it would seem this script runs fast and nonstop whilst the viewer browsers. 
doesn't seem health. your mouseover routine will call *ton* multiple times 
whether or not the balloon status has changed. i've had problems where 
netscape just goes flaky after javascript catches an infinite loop. form 
buttons and links go dead, and netscape has to be restarted.

i'd recommend having your hot spots in an array and simulating onmouseover 
and onmouseout with flags. forexample, if your over a hot spot, set a flag 
and keep checking that link's spot until the mouse is no longer over it, but 
not recalling *ton* each time. and when your no longer over it, reset the 
over flag and keep checking. - Cyanide_7


>
>Hi,
>
>I have a programming problem that I hope someone can help me with.  I am
>working on some educational software (a middle school curriculum
>supplement).  The material is in HTML and will be distributed on a CD-ROM.
>I have a fair amount of javascript and style sheets thorughout the pages.
>Here is an outline of the problem.
>
>I have included balloon help in some of the pages. The balloons are in
>individual layers and made visible by a mouseover event. In some cases, the
>hotspots for the help are not active links or cover an area that contains
>several onclick links.  For this reason I am not using a standard image map
>to activate the help messages.  Below is the code I am using to define the
>hotspots:
>
>function myMap(e)
>{
>   if (document.layers && e.pageX>pageXOffset)
>   {
>     if (e.pageX>=1 && e.pageX<=257 && e.pageY>=241 && e.pageY<=434)
>     {
>       ton('14',0,370);
>     }
>     else if ((e.pageX>=542 && e.pageX<=676 && e.pageY>=176 && 
>e.pageY<=244)
>|| (e.pageX>=505 && e.pageX<=676 && e.pageY>=244 && e.pageY<=282))
>     {
>       ton('15',0,50);
>     }
>     else if (e.pageX>=377 && e.pageX<=499 && e.pageY>=188 && e.pageY<=251)
>     {
>       ton('16',0,120);
>     }
>     else if (e.pageX>=4 && e.pageX<=187 && e.pageY>=138 && e.pageY<=196)
>     {
>       ton('17',0,50);
>     }
>     else if (e.pageX>=231 && e.pageX<=362 && e.pageY>=173 && e.pageY<=237)
>     {
>       ton('18',0,100);
>     }
>      else if (e.pageX>=281 && e.pageX<=460 && e.pageY>=298 && 
>e.pageY<=418)
>     {
>       ton('19',0,220);
>     }
>     else if (e.pageX>=472 && e.pageX<=673 && e.pageY>=303 && e.pageY<=457)
>     {
>       ton('20',0,220);
>     }
>     else if (e.pageX<0)
>     {
>       //
>     }
>     else
>     {
>       toff();
>     }
>   }
>   else if (!document.layers)
>   {
>     var yoff=document.body.scrollTop
>     var xoff=document.body.scrollLeft
>     if (event.x>=1-xoff && event.x<=257-xoff && event.y>=241-yoff &&
>event.y<=434-yoff)
>     {
>       ton('14',0,370);
>     }
>     else if ((event.x>=542-xoff && event.x<=676-xoff && event.y>=176-yoff
>&& event.y<=244-yoff) || (event.x>=505-xoff && event.x<=676-xoff &&
>event.y>=244-yoff && event.y<=282-yoff))
>     {
>       ton('15',0,50);
>     }
>     else if (event.x>=377-xoff && event.x<=499-xoff && event.y>=188-yoff 
>&&
>event.y<=251-yoff)
>     {
>       ton('16',0,120);
>     }
>     else if (event.x>=4-xoff && event.x<=187-xoff && event.y>=138-yoff &&
>event.y<=196-yoff)
>     {
>       ton('17',0,50);
>     }
>     else if (event.x>=231-xoff && event.x<=362-xoff && event.y>=173-yoff 
>&&
>event.y<=237-yoff)
>     {
>       ton('18',0,100);
>     }
>      else if (event.x>=281-xoff && event.x<=460-xoff && event.y>=298-yoff
>&& event.y<=418-yoff)
>     {
>       ton('19',0,220);
>     }
>     else if (event.x>=472-xoff && event.x<=673-xoff && event.y>=303-yoff 
>&&
>event.y<=457-yoff)
>     {
>       ton('20',0,220);
>     }
>     else
>     {
>       toff();
>     }
>   }
>}
>
>function myInit()
>{
>   if (document.layers)
>   {
>     document.captureEvents(Event.MOUSEMOVE);
>     document.thelp14.captureEvents(Event.MOUSEUP);
>     document.thelp14.onmouseup=new
>Function("nloc('../../VisitorCenter/vclobby.html'); return true;");
>     document.thelp15.captureEvents(Event.MOUSEUP);
>     document.thelp15.onmouseup=new 
>Function("nloc('../Office/Office.html');
>return true;");
>     document.thelp16.captureEvents(Event.MOUSEUP);
>     document.thelp16.onmouseup=new
>Function("nloc('../Library/Library.html'); return true;");
>     document.thelp17.captureEvents(Event.MOUSEUP);
>     document.thelp17.onmouseup=new
>Function("nloc('../ControlCenter/controlcenter.html'); return true;");
>     document.thelp18.captureEvents(Event.MOUSEUP);
>     document.thelp18.onmouseup=new
>Function("nloc('../handsonlab/HandsOnLab.html'); return true;");
>     document.thelp19.captureEvents(Event.MOUSEUP);
>     document.thelp19.onmouseup=new
>Function("nloc('../Theater/AuditoriumLobby.html'); return true;");
>     document.thelp20.captureEvents(Event.MOUSEUP);
>     document.thelp20.onmouseup=new
>Function("nloc('../../Snackshop/SnackShopInterior.html'); return true;");
>   }
>   else
>   {
>     document.all.thelp14.onclick=new
>Function("nloc('../../VisitorCenter/vclobby.html'); return true;");
>     document.all.thelp15.onclick=new
>Function("nloc('../Office/Office.html'); return true;");
>     document.all.thelp16.onclick=new
>Function("nloc('../Library/Library.html'); return true;");
>     document.all.thelp17.onclick=new
>Function("nloc('../ControlCenter/controlcenter.html'); return true;");
>     document.all.thelp18.onclick=new
>Function("nloc('../handsonlab/HandsOnLab.html'); return true;");
>     document.all.thelp19.onclick=new
>Function("nloc('../Theater/AuditoriumLobby.html'); return true;");
>     document.all.thelp20.onclick=new
>Function("nloc('../../Snackshop/SnackShopInterior.html'); return true;");
>   }
>   document.onmousemove=myMap;
>}
>
><body topmargin="0" leftmargin="0" align="left" bgcolor="#000000"
>text="#FFFFFF" onunload="window.focus();" onload="myInit();">
>
>
>The functions ton() and toff() make the various help balloons visible and
>hidden. This code seems to work fine.  The problem occurs once the browser
>(Netscape on a Macintosh) has loaded a page with this code.  Any subsequent
>page that has both form elements and image maps does not function properly.
>On one particular page I have radio buttons and a mapped image. Once I
>click on a radio button, the browser does not seem to recognize the image
>map until I have clicked somewhere else on the page.  The image map then
>works fine until I click a radio button again. This is not a fatal error
>but it is rather annoying since the students will be alternately clicking
>the radio buttons and the image map quite a bit on this page.  This page
>works fine when loaded in a new browser window that has not been exposed to
>the balloon help code.
>
>If I comment out the 'document.onmousemove=myMap' statement, the problem
>goes away (and of course then my balloons don't work).  I have tried
>putting 'document.releaseEvents(Event.MOUSEMOVE)' in an onunload event in
>the page with the balloon help and in an onload event in the page with the
>radio buttons.  Neither of these two attempts worked.  I does seem to me
>that the MOUSEMOVE event is somehow not being completely released when the
>new page is loaded (Actually there is a page between the balloon help page
>and the radio button page that has no DHTML so this appears to be a
>permanent corruption of the browser window or frame being used).
>
>Does anyone have any idea how to solve this problem? The problem only
>occurrs in Netscape on a Macintosh and the CD must be cross-platform and
>cross-browser.
>
>Thanks
>
>Jim
>
>James E. Coffield, Ph.D.
>Research Associate
>Center for Educational Technologies/
>NASA Classroom of the Future
>Wheeling Jesuit University
>316 Washington Avenue
>Wheeling, WV  26003
>Phone (304) 243-2469      Fax: 304-243-2497
>WWW address:  http://www.cet.edu/
>email: coffield(at)cet.edu
>
>

________________________________________________________________________
Get Your Private, Free E-mail from MSN Hotmail at http://www.hotmail.com

HWG: hwg-languages mailing list archives, maintained by Webmasters @ IWA