...

View Full Version : Mouse X,Y in a DIV [ gratefully SOLVED ]



vkidv
12-19-2005, 10:27 PM
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.

vkidv
12-19-2005, 11:43 PM
http://www.codelifter.com/main/javascript/capturemouseposition1.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.

glenngv
12-20-2005, 07:49 AM
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.

...
<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>

vkidv
12-20-2005, 01:56 PM
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/javascript-find-position

vkidv
12-20-2005, 11:30 PM
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?

vkidv
12-21-2005, 01:30 PM
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_Impossible_mouse_position/17/23335/

vwphillips
12-21-2005, 06:44 PM
bit rough but


<!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>

vkidv
12-22-2005, 12:46 AM
double post sorry please delete.

vkidv
12-22-2005, 12:46 AM
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).


<!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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum