mouse relative position

Kor

10-15-2003, 10:57 AM

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?

<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 mX, mY;
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">

</style>
</head>

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

Kor

10-15-2003, 11:01 AM

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?

Roelf

10-15-2003, 11:12 AM

style properties return positions like "10px", you have to parseInt that to get a number-value

Willy Duitt

10-15-2003, 11:14 AM

Hi;

You typo'ed mY with YY here:

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

</script>

....Willy

Kor

10-15-2003, 11:23 AM

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

yDiv = parseInt(zDiv.top);

solved the problerm.

Thank you all anyway

Willy Duitt

10-15-2003, 11:47 AM

Changing YY to mY which it's suppose to be, worked for me.

Kor

10-16-2003, 08:32 AM

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:

<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 mX, mY;
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 = 0 - (mY - yDiv - hDiv);
}
if (mX < xDiv-1){

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

}

</script>
<style type="text/css">

</style>
</head>

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

Kor

10-16-2003, 08:34 AM

...remove

if (mX < xDiv-1){

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

Willy Duitt

10-16-2003, 08:44 PM

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

brothercake

10-16-2003, 09:06 PM

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);

Roy Sinclair

10-16-2003, 09:33 PM

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.

brothercake

10-16-2003, 09:37 PM

ta :)

Kor

10-17-2003, 07:57 AM

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