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 13 of 13
  1. #1
    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

    Question mouse relative position

    I have the following codes. I capture the mouse position, but I want to display the difference between the absolute X Y mouse position and another value. Now, if I use numbers, everything is ok, but If I use definite variables the result is NaN...??

    Any ideea why this?

    PHP Code:
    <html>
    <
    head>
    <
    script language="JavaScript" type="text/JavaScript">
    function 
    objectSetup(){
    zDiv = new layerSetup("grafic",100,100,200,200);
    }
    function 
    layerSetup(id,left,top,height,width){
    if (
    document.getElementById){
            
    this.obj document.getElementById(id).style;
            
    this.obj.left left;
            
    this.obj.top top;
            
    this.obj.height height;
            
    this.obj.width width;
            return 
    this.obj;
            } else if(
    document.all) {
            
    this.obj document.all[id].style;
            
    this.obj.left left;
            
    this.obj.top top;
            
    this.obj.height height;
            
    this.obj.width width;        
            return 
    this.obj;
            } else if(
    document.layers) {
            
    this.obj document.layers[id];
            
    this.obj.left left;
            
    this.obj.top top;
            
    this.obj.height height;
            
    this.obj.width width;        
            return 
    this.obj;
        }
    }
    function 
    bla()
    {
      if (
    document.layer) {
        
    document.captureEvents(Event.MOUSEMOVE);
      }
      
    document.onmousemove=showMousePosition;
    }

    function 
    showMousePosition(e)
    {
      var 
    mXmY;
    xDiv zDiv.left;
    yDiv zDiv.top;
    hDiv zDiv.height;
    wDiv zDiv.width;
    if (
    document.layer) {
        
    mX e.pageX;
        
    mY e.pageY;
      }
      else {
        
    mX window.event.clientX;
        
    mY window.event.clientY;
        
    YY mY yDiv;
      }
      
    window.status "X="+mX+"  Y="+YY;
      return 
    true;
    }

    </script>
    <style type="text/css">
    <!--
    #grafic {
        background-color: #CCCCCC;
        position: absolute;
    }
    -->
    </style>
    </head>

    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" onload="objectSetup();bla()">
    <div id="grafic"></div>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #2
    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
    i misstyped somewhere document.layer instead of document.layers but this is irrelevant, as I used first for verifying IE 6, not NS...

    So, why that NaN value?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Zwolle, The Netherlands
    Posts
    1,120
    Thanks
    2
    Thanked 31 Times in 31 Posts
    style properties return positions like "10px", you have to parseInt that to get a number-value
    I am the luckiest man in the world

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi;

    You typo'ed mY with YY here:

    window.status = "X="+mX+" Y="+YY;
    return true;
    }

    </script>

    ....Willy

  • #5
    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

    solved

    yeah, meanwhile I realize that I have to parse the values

    yDiv = parseInt(zDiv.top);

    solved the problerm.

    Thank you all anyway
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Changing YY to mY which it's suppose to be, worked for me.

  • #7
    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
    mY is the absolute position... I defined YY as a relative position, relative to the position of the layer. The reason for I am doing that: Finally I have to show some values on a chart onmouseover. So, I need some relative position (x=0 y=0 in the lower left corner of the DIV....)

    See the ideea:

    PHP Code:
    <html>
    <
    head>
    <
    script language="JavaScript" type="text/JavaScript">
    function 
    objectSetup(){
    zDiv = new layerSetup("grafic",100,100,200,200);
    }
    function 
    layerSetup(id,left,top,height,width){
    if (
    document.getElementById){
            
    this.obj document.getElementById(id).style;
            
    this.obj.left left;
            
    this.obj.top top;
            
    this.obj.height height;
            
    this.obj.width width;
            return 
    this.obj;
            } else if(
    document.all) {
            
    this.obj document.all[id].style;
            
    this.obj.left left;
            
    this.obj.top top;
            
    this.obj.height height;
            
    this.obj.width width;        
            return 
    this.obj;
            } else if(
    document.layers) {
            
    this.obj document.layers[id];
            
    this.obj.left left;
            
    this.obj.top top;
            
    this.obj.height height;
            
    this.obj.width width;        
            return 
    this.obj;
        }
    }
    function 
    bla()
    {
      if (
    document.layer) {
        
    document.captureEvents(Event.MOUSEMOVE);
      }
      
    document.onmousemove=showMousePosition;
    }

    function 
    showMousePosition(e)
    {
      var 
    mXmY;
    xDiv parseInt(zDiv.left);
    yDiv parseInt(zDiv.top);
    hDiv parseInt(zDiv.height);
    wDiv parseInt(zDiv.width);
    if (
    document.layer) {
        
    mX e.pageX;
        
    mY e.pageY;
      }
      else {
        
    mX window.event.clientX;
        
    mY window.event.clientY;
        
    XX mX xDiv;
        
    YY - (mY yDiv hDiv);
      }
    if (
    mX xDiv-1){  

      
    window.status "X="+XX+"  Y="+YY;
       return 
    true;
    }

    }

    </script>
    <style type="text/css">
    <!--
    #grafic {
        background-color: #CCCCCC;
        position: absolute;
    }
    -->
    </style>
    </head>

    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" onload="objectSetup();bla()">
    <div id="grafic"></div>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #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
    ...remove

    if (mX < xDiv-1){

    and the additional braket... I forget I am now working for additiona conditions, so the code is nor ready...:-)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #9
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for explaining that to me.

    I now see what you are doing and
    your thread title actually said it all.

    mouse relative position.


    ....Willy

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: solved

    Originally posted by Kor
    yDiv = parseInt(zDiv.top);

    solved the problerm.
    You have to specify a base when using parseInt - iirc it defaults to base 16, but you want base 10, like this:

    yDiv = parseInt(zDiv.top,10);
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Re: solved

    Originally posted by brothercake
    You have to specify a base when using parseInt - iirc it defaults to base 16, but you want base 10, like this:

    yDiv = parseInt(zDiv.top,10);
    Actually it defaults all over the map based on the input text, if it defaulted to a specific base it would be better. Regardless, the advice to always specify a base is correct.
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ta
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #13
    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
    ty, I'll remeber that the base can be specified, actually I need it in another screept where I have to work with base 16 (colors) and parse some values...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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