Location of mouse cursor relative to within a...
Moderator: General Moderators
Location of mouse cursor relative to within a...
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!
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!
- Chris Corbyn
- Breakbeat Nuttzer
- Posts: 13098
- Joined: Wed Mar 24, 2004 7:57 am
- Location: Melbourne, Australia
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.
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.
- neel_basu
- Forum Contributor
- Posts: 454
- Joined: Wed Dec 06, 2006 9:33 am
- Location: Picnic Garden, Kolkata, India
HTML
====
JavaScript
=======
And Here Does The Compleate Page Source Codes Goes
========================================
====
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>=======
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
}========================================
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>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 
d11wtq, i googled but never considered searching on these very forums
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
Last edited by mickd on Tue Jan 02, 2007 5:34 am, edited 1 time in total.
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
PPK has written what I consider the definitive set of tests on the subject:
http://www.quirksmode.org/js/events_pro ... l#position
http://www.quirksmode.org/js/events_pro ... l#position
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
Secondly, what does this line do?
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
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
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">Code: Select all
<script type="text/javascript">
<!--
if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE); <- This line here <-
document.getElementById('foo').onmousemove = updatePosition;
// -->
</script>
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
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.
For IE test2 alerts however in firefox, nothing alerts.
Anyone have any idea why this might be the case?
Thanks!
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');
}
Anyone have any idea why this might be the case?
Thanks!