469,356 Members | 2,190 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,356 developers. It's quick & easy.

Showing effects via mouseover event not working in FF

I am struggling with a event model handling problem in Javascript that
shows up only in Firefox. I have 2 little websites I'd like you to
take a look at:

http://gis.cbmiweb.com/MexicoExported/default.asp

http://gis.cbmiweb.com/MDWmaps/default.asp

The issue involves the code behind the "Zoom Box" icon on the
"toolbar" near the top of each page. On both pages above, the ZoomBox
icon is the 4th little icon from the left edge (hover will expose a
tooltip). Clicking
this icon sets a "mode" of "Zoom Box" reflected in the box just above
the Copyright at the bottom. The expected
behavior at this point is for the user to drag the mouse on the map.
The area of this "box" becomes the
new boundaries of the map.

If you try this on my "mexico" link above it should work (that is, you
the user should be able to see the boundaries of the box as you drag
it somewhere on the screen).

If you try the same technique on my MDWmaps link above, it zooms to
the desired box location but the "bands" or boundaries of the "box"
are not shown. I need this site to show the box bands as it is being
"drawn" - just like it works for the Mexico map.

Curiously, the part of the code that handles this functionality is
essentially the same in both examples (the major difference is that I
divided an original default.asp into a couple of included .js files).

This part of the DOM and event models of IE and FF are a real stretch
for me (I did not write this code in either case; I "inherited" it).

I tried using Firebug to set breakpoints in the mouseover event
handler but I couldn't get the hang of managing the
mouse and debugging at the same time I guess.

Here is the event handler that I think is the problem:
Expand|Select|Wrap|Line Numbers
  1. // update rubber band
  2. function updateBand(evt) {
  3.         var band = locateElement("band");
  4.         if (band != null) {
  5.         // move band taking care of different browsers
  6.                 if (ie) {
  7.                         evt = event;
  8.                         var map = locateElement("map");
  9.                         if (evt.srcElement != map)
  10.                                 return;
  11.                         band.style.pixelLeft = selectMin(bandX, evt.offsetX +
  12. GetOffsetLeft(map));
  13.                         band.style.pixelTop = selectMin(bandY, evt.offsetY +
  14. GetOffsetTop(map));
  15.                         band.style.width = selectMax(bandX, evt.offsetX +
  16. GetOffsetLeft(map)) - band.style.pixelLeft;
  17.                         band.style.height = selectMax(bandY, evt.offsetY +
  18. GetOffsetTop(map)) - band.style.pixelTop;
  19.                 } else {
  20.                         band.style.left = selectMin(bandX, evt.pageX);
  21.                         band.style.top = selectMin(bandY, evt.pageY);
  22.                         band.style.width = selectMax(bandX, evt.pageX) -
  23. parseInt(band.style.left);
  24.                         band.style.height = selectMax(bandY, evt.pageY) -
  25. parseInt(band.style.top);
  26.                         band.style.left         += "px";
  27.                         band.style.top          += "px";
  28.                         band.style.width        += "px";
  29.                         band.style.height       += "px";
  30.                 }
  31.         }
  32.  
  33. }
  34.  
The Mexico example contains this same exact code (except last 4 lines) yet
it works. I added the last 4 lines above thinking those properties
needed a measurement unit but the additions don't seem to matter one
way or the other.

My Firefox version is 1.5.0.11. Both of these sites mentioned above
trace out the path of the mouseover correctly in IE 6 and 7.
May 3 '07 #1
10 2398
drhowarddrfine
7,435 Expert 4TB
I'm not a js guy but you aren't using a doctype for your page. This puts IE into quirks mode and the broken box model. This is why I'm wondering if this has something to do with the borders not working right. In any case, all web pages need a proper doctype and this is the one you should use:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
May 3 '07 #2
iam_clint
1,208 Expert 1GB
I've never had a javascript problem cause I didn't put doctype anyways thats standard. IE6 xp service pack 2, worked fine for me bud on both of them. it showed the bounding box.
May 3 '07 #3
drhowarddrfine
7,435 Expert 4TB
The doctype will affect how html and css are displayed. All modern web pages require them.
May 3 '07 #4
I've never had a javascript problem cause I didn't put doctype anyways thats standard. IE6 xp service pack 2, worked fine for me bud on both of them. it showed the bounding box.
Yes I know it works in IE6 and IE7. Could you please try in Firefox and note how it fails to show the boundaries of the box? My question is WHY does it fail to show the box in FF.
May 3 '07 #5
iam_clint
1,208 Expert 1GB
only showing errors on the css CURSOR:
May 3 '07 #6
drhowarddrfine
7,435 Expert 4TB
I have seen cases where people try and use "hand" for cursor which calls modern browsers like Firefox to ignore some properties. "hand" is not a standard property. Try setting it to pointer just to see what happens.
May 3 '07 #7
only showing errors on the css CURSOR:
What kind of error do you see?

Thank you all for looking and commenting. Have you tried this in IE and noticed how when in Zoom Box "mode" the dragging of the mouse shows a rectangular "band" as in dotted lines.

This is the behavior I want to get working in Firefox.

I only have cursor: pointer in my default.css file (no attempt to use cursor: hand has been made).
May 4 '07 #8
pronerd
392 Expert 256MB
Have you looked to see what values are being set to band.style.left, band.style.top, band.style.width, and band.style.height for the working method vs the failing one? If nothing else you could do that by just adding an alert(' height : '+band.style.height); for each of those values at the end of that method?
May 6 '07 #9
Have you looked to see what values are being set to band.style.left, band.style.top, band.style.width, and band.style.height for the working method vs the failing one? If nothing else you could do that by just adding an alert(' height : '+band.style.height); for each of those values at the end of that method?
I finally fixed this problem. All I did to get it working was to concatenate "px" to the various properties of the band as shown in this Firefox-specific fragment:
Expand|Select|Wrap|Line Numbers
  1. band.style.left = selectMin(bandX, evt.pageX) + "px";
  2. band.style.top = selectMin(bandY, evt.pageY) + "px";
  3. band.style.width = selectMax(bandX, evt.pageX) - parseInt(band.style.left) + "px";
  4. band.style.height = selectMax(bandY, evt.pageY) - parseInt(band.style.top) + "px";
  5. band.style.visibility = "visible";
  6.  
So I am happy it works but I am left with the confusion of why the MexicoExported site shows the ZoomBox band WITHOUT these code additions above (i.e. without the concatenation of "px").

In other words, I cannot explain why my additions fixed the situation when the same code without these additions works fine on another site on my server. So, in summary, here are the two sites:

Site 1: http://gis.cbmiweb.com/MDWmaps/default.asp
Site 2: http://gis.cbmiweb.com/MexicoExported/default.asp

I fixed site 1 by adding the "px" to the various band.style properties. MexicoExported has always mapped out the zoom box band without these concatenations. Finally, I am always testing from the same machine with Firefox 1.5.0.11 and the sites are on the same web server. Weird that both work now. Any concluding ideas from Javascript DOM experts would be greatly appreciated.
May 7 '07 #10
iam_clint
1,208 Expert 1GB
I use dom all the time.

and thats weird that Firefox accepts one of the codes without px but didn't the other, it could be the page layout or something i'm not 100% sure bud this one is messed up.
May 7 '07 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

47 posts views Thread by Lauren Quantrell | last post: by
2 posts views Thread by Casey | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.