SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,576
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    Firefox positioning issue

    Hey all,

    I have a little javascript issue I was hoping you all could help out with. Basically, I am improving on our old, standard interactive hotel map (http://web.ncta.com/hotelmap/). I am trying to get the hotel descriptions to pop up when one mouses over the appropriate number. To do this, I am capturing the javascript onMouseOver event on hyperlinks in an image map. I use the mouse position, plus a known ID number, to show and position a previously hidden div. I would also like for the hyperlink to connect the user to the list of hotels at the bottom of the page.

    This is my first foray into anything more than superficial javascript. And it is in fact working perfectly in IE. But it misbehaves in just about everything else:

    1) In firefox 1.0 the popup appears in the top, left hand corner of the image div. [ie: exactly where the div appears in the document flow] The hyperlink also does not work.

    2) In Mozilla 1.4 the popup appears below the image. They hyperlink does not work here either.

    Have not got into anything else as FF and IE are the only two browsers with numbers worth pursuing.

    If anyone has any insight into this issue, please help a brother out.

    WWB
    Last edited by wwb_99; Dec 3, 2004 at 06:04.

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In FF1.0, I see the popup div appear in the upper left corner of the image map--perfectly aligned with the borders of the image map.

    In IE, the popup div is positioned next to the the cursor--wherever that may be.

    I assume you want the popup to appear at the cursor position. See here:

    http://www.quirksmode.org/js/events_properties.html
    http://evolt.org/article/Mission_Imp...335/index.html

    At the last link, it explains how to find the mouse position in great detail--be sure to read the user comments as well.
    Last edited by 7stud; Dec 3, 2004 at 10:16.

  3. #3
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,576
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks 7stud, I will see what I can do to tweak the events.

    The funny thing is that the page is collecting the proper mouse positions with the current code, the div just only appears at the proper place with IE.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Altho not the most cross-browser, this suggestion should get you started in the right direction. Try the following modification to the function captureMousePosition().
    Code:
        ...
        } else if (document.getElementById) {
            // Netscape 6 behaves the same as Netscape 4 in this regard
            //xMousePos = e.pageX;
            //yMousePos = e.pageY;
            // try the following two lines instead of the above two lines (mf):
            xMousePos = e.clientX + document.body.scrollLeft;
            yMousePos = e.clientY + document.body.scrollTop;
            xMousePosMax = window.innerWidth+window.pageXOffset;
            yMousePosMax = window.innerHeight+window.pageYOffset;
        }
    }

  5. #5
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figured it out: FF1.0 requires "px" after the mouse coordinates when setting the style, where it is optional in IE6. I remember getting tripped up on that too.



    The funny thing is that the page is collecting the proper mouse positions with the current code,
    I noticed they don't appear in the status bar for FF1.0.

  6. #6
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,576
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help 7Stud. It works alot better, even though the positions in FF are still a bit off.

    I cannot claim credit for the mouse positions script; I pulled it off the web because my knowlege of JS is very limited.

    As for ff and the status bar, it seems that the option to let scripts change the status bar defaults to off in 1.0, so one will not see such debugging nicities.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •