473,231 Members | 1,814 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,231 software developers and data experts.

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:



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.         }
  33. }
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 Both of these sites mentioned above
trace out the path of the mouseover correctly in IE 6 and 7.
May 3 '07 #1
10 2654
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"
May 3 '07 #2
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
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
1,208 Expert 1GB
only showing errors on the css CURSOR:
May 3 '07 #6
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
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";
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 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
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

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

Similar topics

by: Lauren Quantrell | last post by:
I have constructed the following code that simulates the common rollover effect when moving the mouse over a label (this example makes the label bold.) I'm wondering if anyone has come up with...
by: Mitch | last post by:
I am hosting a web browser ctl in a container that implements the IDocHostUIHandler interface. I'm using this to control the context menu.This works fine. Then, I added a mouseover event to the...
by: Casey | last post by:
Greetings, I have an ASP .NET page that contains three images which give the appearance of a tabbed folder. The images contain the words Product Search, Cart, and Summary respectively. The...
by: wimvan | last post by:
Hi, I'm a nerd in javascript, but, after trying and retrying I'm addressing me to help. I have a page with three frames, a top-, a left- and a right-frame. a kind a title-frmae, a button-frame...
by: markszlazak | last post by:
I'm a relatively slow response of table cells changing their background color with mouseover/our in IE6 (Win 2K) but the response is fine (fast) in Firefox. Why? The code is below. Sorry about the...
by: markszlazak | last post by:
Could someone check out the following code and please help me understand the problem and fix it. It seems like some events are not firing when my mouse moves over the table cells to quickly causing...
by: apurvaG | last post by:
Hi All, I am applying some xslt template on a XML file to generate the HTML. This HTML has several <DIV> tags with mouseover and mouseout event associated to them. So if i do mouseover on a...
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.