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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mouse X,Y in a DIV [ gratefully SOLVED ]

    Hello,
    I'm trying to get the X and Y of a div when the mouse is placed on it - so if I put the mouse at the top left of the div, it would naturally be 0,0. It would not be the actual page's entire X and Y.

    Thanks.
    Last edited by vkidv; 12-21-2005 at 11:50 PM.
    Regards
    VKiDV

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.codelifter.com/main/javas...position1.html

    This site captures the mouse position for the entire page.

    I need to be able to catch the mouse position relative INSIDE the divider.
    Regards
    VKiDV

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Subtract from the left and top position (relative to the document) of the mouse the x and y coordinates (relative also to the document) of the top leftmost corner of the div. The resulting position is the position of the mouse relative to the div. To get the actual coordinates of the div, you use the function below.
    Code:
    ...
    <div id="divId">The div where you want to get the mouse position</div>
    ...
    <script type="text/javascript">
    function ElementPosition(param){
      var x=0, y=0;
      var obj = (typeof param == "string") ? document.getElementById(param) : param;
      if (obj) {
        x = obj.offsetLeft;
        y = obj.offsetTop;
        var body = document.getElementsByTagName('body')[0];
        while (obj.offsetParent && obj!=body){
          x += obj.offsetParent.offsetLeft;
          y += obj.offsetParent.offsetTop;
          obj = obj.offsetParent;
        }
      }
      this.x = x;
      this.y = y;
    }
    
    var divPos = new ElementPosition("divId"); //you may passed the div id or the div object reference itself
    alert(divPos.x); //left position of the div relative to the body
    alert(divPos.y); //top position of the div relative to the body
    </script>

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Works great thanks.

    I was originally using this, but it simply didn't work:
    http://www.quirksmode.org/js/findpos.html
    http://blog.firetree.net/2005/07/04/...-find-position
    Regards
    VKiDV

  • #5
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The code is working great.. until I scroll down.

    Is it possible to obtain the current and not the draw time position of a div?
    Regards
    VKiDV

  • #6
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've tried using window.onscroll to call up that function again, to update the values.

    But because the function obtains the first draw and not the current or consecutive draws, It is always out by how much I scroll up or down.

    Is there a way to obtain the current x,y position of a DIV, even if the user has scrolled up or down?

    http://evolt.org/article/Mission_Imp...tion/17/23335/
    Last edited by vkidv; 12-21-2005 at 01:52 PM.
    Regards
    VKiDV

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    bit rough but

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    
    function zxcMseDown(event,obj) {
     document.Show.Show2.value=zxcWWHS();
     document.onmousemove=function(event){zxcDrag(event);}
     zxcObj=obj;
     zxcMse(event);
     zxcDragX=zxcMseX-zxcPos(zxcObj)[0];
     zxcDragY=zxcMseY-zxcPos(zxcObj)[1];
    }
    
    function zxcMseUp() {
     document.onmousemove=null; zxcDragX=-1;  zxcDragY=-1;
    }
    
    function zxcDrag(event) {
     zxcMse(event);
    // zxcObj.style.left=(zxcMseX-zxcDragX)+'px';
    // zxcObj.style.top=(zxcMseY-zxcDragY)+'px';
    document.getElementById('ShowX').value=zxcMseX-zxcPos(zxcObj)[0]+'X';
    document.getElementById('ShowY').value=zxcMseY-zxcPos(zxcObj)[1]+zxcWWHS()+'Y';
    }
    
    function zxcMse(event){
     if(!event) var event=window.event;
     if (document.all){ zxcMseX=event.clientX; zxcMseY=event.clientY; }
     else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
    }
    
    function zxcWWHS(){
     if (document.all){
      zxcCur='hand';
      zxcWH=document.documentElement.clientHeight;
      zxcWW=document.documentElement.clientWidth;
      zxcWS=document.documentElement.scrollTop; //ie trans & strict
      if (zxcWH==0){
       zxcWS=document.body.scrollTop; //ie trans & strict
       zxcWH=document.body.clientHeight;
       zxcWW=document.body.clientWidth;
      }
     }
     else if (document.getElementById){
      zxcCur='pointer';
      zxcWH=window.innerHeight-15;
      zxcWW=window.innerWidth-15;
      zxcWS=0;//window.pageYOffset;
     }
     zxcWC=Math.round(zxcWW/2);
     return zxcWS;
    }
    
    function zxcPos(zxc){
     zxcObjLeft = zxc.offsetLeft;
     zxcObjTop = zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcObjParent=zxc.offsetParent;
      zxcObjLeft+=zxcObjParent.offsetLeft;
      zxcObjTop+=zxcObjParent.offsetTop;
      zxc=zxcObjParent;
     }
     return [zxcObjLeft,zxcObjTop];
    }
    
    //-->
    </script></head>
    
    <body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <center>
    <div id="fred" style="position:relative;width:200px;height:200px;background-color:red;text-align:center"
    onmouseover="zxcMseDown(event,this);"
    onmouseout="zxcMseUp();"
    >
    <br>
    <input size=10 id=ShowX >
    <br>
    <input size=10 id=ShowY >
    
    </div>
    </center>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>
    
    </html>

  • #8
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up delete me

    double post sorry please delete.
    Last edited by vkidv; 12-21-2005 at 11:48 PM. Reason: delete me

  • #9
    Regular Coder
    Join Date
    Sep 2002
    Posts
    157
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    It didn't work at first, so I added the Show2 field and changed the order ( as I thought that was the problem because it hadn't loaded yet).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    </head>
    
    <body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <center>
    <div id="fred" style="position:relative;width:200px;height:200px;background-color:red;text-align:center"
    onmouseover="zxcMseDown(event,this);"
    onmouseout="zxcMseUp();"
    >
    <br>
    <form name="Show">
    <input size=10 name="Show2" >
    <input size=10 id=ShowX >
    <br>
    <input size=10 id=ShowY >
    </show>
    
    </div>
    </center>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    
    <script language="JavaScript" type="text/javascript">
    <!--
    
    
    function zxcMseDown(event,obj) {
     document.Show.Show2.value=zxcWWHS();
     document.onmousemove=function(event){zxcDrag(event);}
     zxcObj=obj;
     zxcMse(event);
     zxcDragX=zxcMseX-zxcPos(zxcObj)[0];
     zxcDragY=zxcMseY-zxcPos(zxcObj)[1];
    }
    
    function zxcMseUp() {
     document.onmousemove=null; zxcDragX=-1;  zxcDragY=-1;
    }
    
    function zxcDrag(event) {
     zxcMse(event);
    // zxcObj.style.left=(zxcMseX-zxcDragX)+'px';
    // zxcObj.style.top=(zxcMseY-zxcDragY)+'px';
    document.getElementById('ShowX').value=zxcMseX-zxcPos(zxcObj)[0]+'X';
    document.getElementById('ShowY').value=zxcMseY-zxcPos(zxcObj)[1]+zxcWWHS()+'Y';
    }
    
    function zxcMse(event){
     if(!event) var event=window.event;
     if (document.all){ zxcMseX=event.clientX; zxcMseY=event.clientY; }
     else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
    }
    
    function zxcWWHS(){
     if (document.all){
      zxcCur='hand';
      zxcWH=document.documentElement.clientHeight;
      zxcWW=document.documentElement.clientWidth;
      zxcWS=document.documentElement.scrollTop; //ie trans & strict
      if (zxcWH==0){
       zxcWS=document.body.scrollTop; //ie trans & strict
       zxcWH=document.body.clientHeight;
       zxcWW=document.body.clientWidth;
      }
     }
     else if (document.getElementById){
      zxcCur='pointer';
      zxcWH=window.innerHeight-15;
      zxcWW=window.innerWidth-15;
      zxcWS=0;//window.pageYOffset;
     }
     zxcWC=Math.round(zxcWW/2);
     return zxcWS;
    }
    
    function zxcPos(zxc){
     zxcObjLeft = zxc.offsetLeft;
     zxcObjTop = zxc.offsetTop;
     while(zxc.offsetParent!=null){
      zxcObjParent=zxc.offsetParent;
      zxcObjLeft+=zxcObjParent.offsetLeft;
      zxcObjTop+=zxcObjParent.offsetTop;
      zxc=zxcObjParent;
     }
     return [zxcObjLeft,zxcObjTop];
    }
    
    //-->
    </script>
    </body>
    
    </html>
    Thankyou very much Glenn and vwphillips. So far it works flawlessly, with a little tweaking to suit my scripts - I'll post here if I need any help related to this. I guarantee, if, I ever finish my project, I'll let you guys know!
    It's people like you who make these forums great, volunteering to help is very kind, thanks!
    Regards
    VKiDV


  •  

    Posting Permissions

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