Location of mouse cursor relative to within a...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
mickd
Forum Contributor
Posts: 397
Joined: Tue Jun 21, 2005 9:05 am
Location: Australia

Location of mouse cursor relative to within a...

Post 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!
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post by neel_basu »

Ya you oviously can do it with JavaScript
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
neel_basu
Forum Contributor
Posts: 454
Joined: Wed Dec 06, 2006 9:33 am
Location: Picnic Garden, Kolkata, India

Post 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="" />&nbsp;&nbsp;
  </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="" />&nbsp;&nbsp;
</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>
mickd
Forum Contributor
Posts: 397
Joined: Tue Jun 21, 2005 9:05 am
Location: Australia

Post 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 :)
Last edited by mickd on Tue Jan 02, 2007 5:34 am, edited 1 time in total.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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
mickd
Forum Contributor
Posts: 397
Joined: Tue Jun 21, 2005 9:05 am
Location: Australia

Post 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 :)
mickd
Forum Contributor
Posts: 397
Joined: Tue Jun 21, 2005 9:05 am
Location: Australia

Post 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 :wink:

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