Web Analytics Made Easy -
StatCounter find position of cursor, cross-browser - CodingForum

Announcement

Collapse
No announcement yet.

find position of cursor, cross-browser

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • find position of cursor, cross-browser

    I have the following script that I'm using simply to create CSS div pop-up window when you mouseover links:

    Code:
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang=en>
    <head>
    <style type="text/css">
    <!--
    body
    {
     margin:0;
    }
    h2
    {
     text-align:center;
     margin:15px auto 15px auto;
     padding-bottom:5px;
     border-bottom:1px solid #000;
     width:300px;
    }
    .links p
    {
     text-align:center;
     margin:10px 0 10px 0;
    }
    .links a
    {
     color:#000;
    }
    .links a:hover
    {
     color:#aaa;
    }
    .pop_up
    {
     width:250px;
     background-color:#eee;
     padding:10px 10px 5px 10px;
     border:1px solid #000;
    }
    .pop_up h3
    {
     font:bold 14px Times, Times New Roman;
     color:#fff;
     background-color:#000;
     width:250px;
     margin:0 auto 10px auto;
     text-align:center;
    }
    .pop_up p
    {
     font:11px/14px Times, Times New Roman;
     margin:0 0 5px 0;
    }
    -->
    </style>
    <title>Javascript Tool Tips</title>
    <script type="text/javascript">
    <!--
    function showToolTip(id,event,state)
    {
     if (event.pageX || event.pageY)
     {
      var x = event.pageX;
      var y = event.pageY;
      // alert("X coords: " + x + ", Y coords: " + y);
     }
     else
     {
      var x = event.clientX;
      var y = event.clientY;
     }
     // alert("X coords: " + x + ", Y coords: " + y);
     document.getElementById(id).style.top = y + 2;
     document.getElementById(id).style.left = x + 10;
     if (state == "on")
     {
      document.getElementById(id).style.display = "";
     }
     else
     {
      document.getElementById(id).style.display = "none";
     }
    }
    -->
    </script>
    </head>
    <body>
    <h2>My Random List of Links</h2>
    <div class="links">
     <p><a href="#" onMouseover="showToolTip('link1',event,'on');" onMouseout="showToolTip('link1',event,'off');">Link #1</a></p>
     <p><a href="#" onMouseover="showToolTip('link2',event,'on');" onMouseout="showToolTip('link2',event,'off');">Link #2</a></p>
     <p><a href="#" onMouseover="showToolTip('link3',event,'on');" onMouseout="showToolTip('link3',event,'off');">Link #3</a></p>
     <p><a href="#" onMouseover="showToolTip('link4',event,'on');" onMouseout="showToolTip('link4',event,'off');">Link #4</a></p>
     <p><a href="#" onMouseover="showToolTip('link5',event,'on');" onMouseout="showToolTip('link5',event,'off');">Link #5</a></p>
     <p><a href="#" onMouseover="showToolTip('link6',event,'on');" onMouseout="showToolTip('link6',event,'off');">Link #6</a></p>
    </div>
    <div id="link1" style="display:none;position:absolute;top:0;left:0" class="pop_up">
     <h3>Link #1: Subtitle</h3>
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div id="link2" style="display:none;position:absolute;top:0;left:0" class="pop_up">
     <h3>Link #2: Subtitle</h3>
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div id="link3" style="display:none;position:absolute;top:0;left:0" class="pop_up">
     <h3>Link #3: Subtitle</h3>
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div id="link4" style="display:none;position:absolute;top:0;left:0" class="pop_up">
     <h3>Link #4: Subtitle</h3>
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div id="link5" style="display:none;position:absolute;top:0;left:0" class="pop_up">
     <h3>Link #5: Subtitle</h3>
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div id="link6" style="display:none;position:absolute;top:0;left:0" class="pop_up">
     <h3>Link #6: Subtitle</h3>
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    
    </body>
    </html>
    I've got it working in IE, but in Firefox, the pop-up boxes are all appearing in the upper-left corner of the browser window.

    I checked to see if:

    Code:
     
    var x = event.pageX;
    var y = event.pageY;
    ...was returning the correct coordinates of the cursor, and it appears to...

    So I can;t figure out why the pop-up window is positioned incorrectly in FF...

    Any help is appreciated...thanks
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like our YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Instructional videos and tutorials are also available on YouTube, Dailymotion, and Vimeo]
    Explore all products and services, view demos, review documentation, check prices, and more!
    ♪♪ …Need Web Hosting For Our YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #2
    You gotta use string units in all style properties in most browsers.
    Add 'px' to the top and left property strings.
    Last edited by mrhoo; Oct 3, 2006, 11:24 AM.

    Comment


    • #3
      thanks, that fixed it
      Regards, R.J.

      ---------------------------------------------------------

      Help spread the word! Like our YouTube-to-Mp3 Conversion Script on Facebook !! :-)
      [Instructional videos and tutorials are also available on YouTube, Dailymotion, and Vimeo]
      Explore all products and services, view demos, review documentation, check prices, and more!
      ♪♪ …Need Web Hosting For Our YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

      Comment

      Working...
      X