Page 1 of 1
Location of mouse cursor relative to within a...
Posted: Tue Jan 02, 2007 12:42 am
by mickd
I'm just wondering if its possible to get the coordinates of the mouse coursor relative to a block.
For example, when the mouse just entered the top left of a div, it retrieves 0,0 and as the cursor moves across the div, the x and y coordinate adjust accordingly.
If anyone could point me in the right direction that'll be great.
I know about getting the coordinatres of the cursor for the browser window.
Thanks!
Posted: Tue Jan 02, 2007 2:39 am
by neel_basu
Ya you oviously can do it with JavaScript
Posted: Tue Jan 02, 2007 2:57 am
by Chris Corbyn
viewtopic.php?t=44123&highlight=position+div
Should get you started, although there was never a definitive answer given. You'll need to give the DIV some sort of fixed position using 'fixed' or 'absolute' for this to work, I know that much.
Posted: Tue Jan 02, 2007 3:01 am
by neel_basu
HTML
====
Code: Select all
<div id="mainDiv" style="position: absolute; left:236px; top:154px">
<form name="hid_frm">
<input type="text" name="rat_pos_x" value="" />
<input type="text" name="rat_pos_y" value="" />
</form>
</div>
JavaScript
=======
Code: Select all
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = tellrat;
document.onmousemove = tellrat;
var tempX = 0
var tempY = 0
function tellrat(e) {
if (IE) {
tempX = event.clientX;
tempY = event.clientY;
} else {
tempX = e.pageX
tempY = e.pageY
}
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
document.hid_frm.rat_pos_x.value = tempX
document.hid_frm.rat_pos_y.value = tempY
return true
}
And Here Does The Compleate Page Source Codes Goes
========================================
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello!</title>
</head>
<body>
<div id="mainDiv" style="position: absolute; left:236px; top:154px">
<form name="hid_frm">
<input type="text" name="rat_pos_x" value="" />
<input type="text" name="rat_pos_y" value="" />
</form>
</div>
<script language="JavaScript" type="text/javascript">
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = tellrat;
document.onmousemove = tellrat;
var tempX = 0;
var tempY = 0;
function tellrat(e)
{
if (IE)
{
tempX = event.clientX;
tempY = event.clientY;
}
else
{
tempX = e.pageX;
tempY = e.pageY;
}
if (tempX < 0)
{
tempX = 0;
}
if (tempY < 0)
{
tempY = 0;
}
document.hid_frm.rat_pos_x.value = tempX;
document.hid_frm.rat_pos_y.value = tempY;
return true;
}
</script>
</body>
</html>
Posted: Tue Jan 02, 2007 5:20 am
by mickd
Thanks guys.
d11wtq, i googled but never considered searching on these very forums

Thanks for the link
Also, thanks neel_basu. I will be testing that out too
EDIT: I looked at what you wrote neel_basu but unfortunately it's not waht i was after

But thanks anyways

Posted: Tue Jan 02, 2007 5:30 am
by Kieran Huggins
PPK has written what I consider the definitive set of tests on the subject:
http://www.quirksmode.org/js/events_pro ... l#position
Posted: Wed Jan 03, 2007 1:44 am
by mickd
Thanks Kieran for the link. Will look into that.
Another question i have.... (or two)
Yep, another one of those internet explorer bugs which mozilla firefox doesn't seem to have...
I noticed that whenever i include the doctype in the script you posted d11wtq, in internet explorer, it stops updating the coordinate when i move the mouse pass the word Test

However, in firefox, everything is fine...
Any ideas about why this happens? I would like to keep it to valid html hehe
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Secondly, what does this line do?
Code: Select all
<script type="text/javascript">
<!--
if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE); <- This line here <-
document.getElementById('foo').onmousemove = updatePosition;
// -->
</script>
Thanks!
EDIT: I got a third question...
Is it possible to instead of just displaying an already existing div, creating a new div in that page on an event such as a click? I'm sure it's possible so i guess my question would be what functions should i look in to? Off memory we could make our own objects using their existing classes, but i can't find somewhere that shows what class i'll need to create
Thanks

Posted: Thu Jan 04, 2007 5:05 am
by mickd
Oh weird, question 3 answered. Today when i googled it for some reason it came out easily...
http://wiki.ittoolbox.com/index.php/Code:Dynamically_Creating_a_Div_in_Javascript
Still need help on question one and two
Thanks!
EDIT: K figured question one...
http://javascript.about.com/library/bliebug.htm
Now just question two...
And question four
When i run the javascript, it works in IE but at this point, it doesn't in firefox.
Code: Select all
if (!e) var e = window.event;
// alert('here'); would display in firefox
if(e.pageX || e.pageY)
{
alert('test');
var xcurs = e.pageX;
var ycurs = e.pageY;
} else if(event.clientX || event.clientY)
{
var xcurs = event.clientX;
var ycurs = event.clientY;
alert('test2');
} else
{
alert('test3');
}
For IE test2 alerts however in firefox, nothing alerts.
Anyone have any idea why this might be the case?
Thanks!