Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Exclamation Javascript mouse position working in IE, not FF!

    Here is an example of my JavaScript:
    Code:
    function rolesopen()
    {
    schedinfo.style.visibility='visible';
    document.getElementById('schedinfo').innerHTML='Roles works.';
    schedinfo.style.left = document.body.scrollLeft + window.event.clientX - 125;
    schedinfo.style.top = document.body.scrollTop + window.event.clientY - 215;
    }
    
    function rolesclose()
    {
    schedinfo.style.visibility='hidden';
    }
    and it's link in HTML...
    Code:
    <span onMouseover="javascript: rolesopen()" onMouseout="javascript: rolesclose()" class="fade">Roles Posted</span>
    Basically, it puts a little div box right above the link you are on. It works flawlessly in IE, but in FF it doesn't move! It appears and disappears fine, and changes text great, but for some reason it won't take the mouse positioning. I tested the "schedinfo.style.top" part by making it equal to 100 and it worked, so I know it HAS to be something in "document.body.scrollTop + window.event.clientY - 215", or something that's NOT in that should be.

    I have a Firefox extension that tells me what it thinks is wrong with the code, and it says "window.event" has no properties, and highlights this line:
    "schedinfo.style.left = document.body.scrollLeft + window.event.clientX - 125;"

    I tried changing "clientX" to "pageX" as I found on a few other sites, but that did nothing.

    Please, help me asap. The deadline for entrance is Friday. I read your sticky on not doing homework, but this isn't really homework, and I understand how it works, enough to get it to work for IE, but I need it to work on multiple browsers.

  • #2
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem is that some browsers (FF) don't automatically assign events like you would want them. You just need a minor change though:

    Code:
    function rolesOpen (e) {
      if (!e) e = window.event;
      schedinfo......
    }
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by TripperTreats View Post
    The problem is that some browsers (FF) don't automatically assign events like you would want them. You just need a minor change though:

    Code:
    function rolesOpen (e) {
      if (!e) e = window.event;
      schedinfo......
    }
    Thanks, I tried it, but I still get the same error .

  • #4
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think you also need to change the onmouseover attribute in span, or something similar.

    onmouseover="rolesopen(event);"

    david_kw

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by david_kw View Post
    I think you also need to change the onmouseover attribute in span, or something similar.

    onmouseover="rolesopen(event);"

    david_kw
    Still nothing! I tried every combination of your guy's answer, and a few of my own, and still nothing! I'm starting to get worried.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,472
    Thanks
    0
    Thanked 634 Times in 624 Posts
    Different browsers use completely different fields to store the mouse position so it isn't just the way that the event is passed that needs changing. See http://javascript.about.com/library/blmousepos.htm for info on how to get the mouse position in different browsers along with cross browser code to do it.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It might help if you showed your new code. Anyway, here is a test so you can see the mouse event is in fact working in IE and FF.

    http://www.exfer.net/test/onmouseover.html

    Code:
    <html>
      <head>
        <title>Mouse Move Event</title>
        <script type="text/javascript">
          function doIt(s) {
            var adiv = document.getElementById("adiv");
            adiv.innerHTML = s;
          }
    
          function rolesopen (e) {
            if (!e) e = window.event;
            doIt("type (x, y) = " + e.type + " (" + e.clientX + ", " + e.clientY + ")");
          }
    
          function rolesclose()
          {
            doIt("");
          }
        </script>
      </head>
      <body>
        <div>
          <span onMouseover="rolesopen(event);" onMouseout="rolesclose()" class="fade">Roles Posted</span>
          <br />
          <div id="adiv"> </div>
        </div>
      </body>
    </html>
    david_kw

  • #8
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You must consider as well the possible scroll position of the document, if any:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    <!--
    html, body{
    margin:0;
    padding:0;
    }
    -->
    </style>
    <script type="text/javascript">
    var posx;var posy;
    function getMouse(e){
    posx=0;posy=0;
    var ev=(!e)?window.event:e;//IE:Moz
    if (ev.pageX){//Moz
    posx=ev.pageX+window.pageXOffset;
    posy=ev.pageY+window.pageYOffset;
    }
    else if(ev.clientX){//IE
    //compliant mode vs. quirk mode
    var sLeft=document.documentElement?document.documentElement.scrollLeft:document.body.scrollLeft;
    var sTop=document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;
    posx=ev.clientX+sLeft;
    posy=ev.clientY+sTop;
    }
    else{return false}//old browsers
    document.getElementById('mydiv').firstChild.data='X='+posx+' Y='+posy;
    }
    document.onmousemove=getMouse;
    </script>
    </head>
    <body>
    <div id="mydiv">&nbsp;</div>
    </body>
    </html>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    New Coder
    Join Date
    May 2005
    Posts
    78
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by david_kw View Post
    It might help if you showed your new code. Anyway, here is a test so you can see the mouse event is in fact working in IE and FF.

    http://www.exfer.net/test/onmouseover.html

    Code:
    <html>
      <head>
        <title>Mouse Move Event</title>
        <script type="text/javascript">
          function doIt(s) {
            var adiv = document.getElementById("adiv");
            adiv.innerHTML = s;
          }
    
          function rolesopen (e) {
            if (!e) e = window.event;
            doIt("type (x, y) = " + e.type + " (" + e.clientX + ", " + e.clientY + ")");
          }
    
          function rolesclose()
          {
            doIt("");
          }
        </script>
      </head>
      <body>
        <div>
          <span onMouseover="rolesopen(event);" onMouseout="rolesclose()" class="fade">Roles Posted</span>
          <br />
          <div id="adiv"> </div>
        </div>
      </body>
    </html>
    david_kw
    Holy crap! It worked! Thanks so much, this was the last day to work on it.

  • #10
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Has issues in IE7

    That Works fine until the user zooms to something other than 100%

    Quote Originally Posted by Kor View Post
    You must consider as well the possible scroll position of the document, if any:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style type="text/css">
    <!--
    html, body{
    margin:0;
    padding:0;
    }
    -->
    </style>
    <script type="text/javascript">
    var posx;var posy;
    function getMouse(e){
    posx=0;posy=0;
    var ev=(!e)?window.event:e;//IE:Moz
    if (ev.pageX){//Moz
    posx=ev.pageX+window.pageXOffset;
    posy=ev.pageY+window.pageYOffset;
    }
    else if(ev.clientX){//IE
    //compliant mode vs. quirk mode
    var sLeft=document.documentElement?document.documentElement.scrollLeft:document.body.scrollLeft;
    var sTop=document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;
    posx=ev.clientX+sLeft;
    posy=ev.clientY+sTop;
    }
    else{return false}//old browsers
    document.getElementById('mydiv').firstChild.data='X='+posx+' Y='+posy;
    }
    document.onmousemove=getMouse;
    </script>
    </head>
    <body>
    <div id="mydiv">&nbsp;</div>
    </body>
    </html>


  •  

    Posting Permissions

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