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:
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.
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:
Code:
// update rubber band
function updateBand(evt) {
var band = locateElement("band");
if (band != null) {
// move band taking care of different browsers
if (ie) {
evt = event;
var map = locateElement("map");
if (evt.srcElement != map)
return;
band.style.pixelLeft = selectMin(bandX, evt.offsetX +
GetOffsetLeft(map));
band.style.pixelTop = selectMin(bandY, evt.offsetY +
GetOffsetTop(map));
band.style.width = selectMax(bandX, evt.offsetX +
GetOffsetLeft(map)) - band.style.pixelLeft;
band.style.height = selectMax(bandY, evt.offsetY +
GetOffsetTop(map)) - band.style.pixelTop;
} else {
band.style.left = selectMin(bandX, evt.pageX);
band.style.top = selectMin(bandY, evt.pageY);
band.style.width = selectMax(bandX, evt.pageX) -
parseInt(band.style.left);
band.style.height = selectMax(bandY, evt.pageY) -
parseInt(band.style.top);
band.style.left += "px";
band.style.top += "px";
band.style.width += "px";
band.style.height += "px";
}
}
}
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.
Comment