PDA

View Full Version : onmouseclick get click coordinates



city_coder
04-21-2008, 12:39 PM
hi guys, right i know you will know this one.

I need to get the mouse coordinates onclick of a link. the link doesnt go anywhere, it opens up a div. but i need to make the divs position dynamic depending on where abouts the click was.

il give an example

<a href="#" onclick="ajaxFunction(this.id)" id="dog">dog</a>
<a href="#" onclick="ajaxFunction(this.id)" id="cat">cat</a>
<a href="#" onclick="ajaxFunction(this.id)" id="mouse">mouse</a>

when one of these links gets pressed it displays a div that gets filled with results based on the id passed to the ajax.
This div needs to be positioned based on the click as the user may have the history window open and so this may force it else where as it positioned absolutely.

so reiterate, i need to get the mouse coordinates based on onclick and then i need to edit the divs position based on these coordinates

any help please, im at a loss with javascript really

Nile
04-21-2008, 01:42 PM
You can try doing something with:


event.clientX

And


event.clientY

city_coder
04-21-2008, 01:50 PM
Ok well i gathered that bit from searching. I just dont know how to get the coordinates from the click thats all. thats the bit i need.

molendijk
04-21-2008, 03:00 PM
Here's something old. Stll working fine:
<html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: JS-Examples - http://www.js-examples.com/
-->

<script type=text/javascript>
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.CLICK);
document.onclick = getMousePosition;
function getMousePosition(e) {
var _x;
var _y;
if (!isIE) {
_x = e.pageX;
_y = e.pageY;
}
if (isIE) {
_x = event.clientX + document.body.scrollLeft;
_y = event.clientY + document.body.scrollTop;
}

posX=_x;
posY=_y;

return true;
}

</script>

</head>
<body onclick=alert("X-position:&nbsp;"+posX+";&nbsp;Y-position:&nbsp;"+posY+".")>

Click to track the mouse position.

</body>
</html>
Arie Molendijk.

city_coder
04-21-2008, 03:48 PM
You my friend are a good man! :D just out of curiosity, if you put that into an a onclick so:

<a href="#" onclick=alert("X-position:&nbsp;"+posX+";&nbsp;Y-position:&nbsp;"+posY+".")>Click to track the mouse position.</a>

it doesnt work for the first mouse click on the page, it will work every time after that though. just wondered why, im not that bothered like.

cheers all the same :D

molendijk
04-21-2008, 04:52 PM
it doesnt work for the first mouse click on the page, it will work every time after that though. just wondered why, im not that bothered like.
Sorry, I made a mistake. Replace your page with this one:
<html>
<head>

<script type=text/javascript>
var isIE = document.all?true:false;
document.onmousemove = getMousePosition;
function getMousePosition(e) {
var _x;
var _y;
if (!isIE) {
_x = e.pageX;
_y = e.pageY;
}
if (isIE) {
_x = event.clientX + document.body.scrollLeft;
_y = event.clientY + document.body.scrollTop;
}

posX=_x;
posY=_y;

return true;
}

</script>

</head>
<body onclick=alert("X-position:&nbsp;"+posX+";&nbsp;Y-position:&nbsp;"+posY+".")>

Click to track the mouse position.

</body>
</html>That will solve the problem.
----
Arie M.

Nile
04-21-2008, 06:14 PM
Can you explain to me what the e variable does? It doesn't look like your using it.

molendijk
04-21-2008, 06:32 PM
Can you explain to me what the e variable does? It doesn't look like your using it.
You don't need it for IE, but you do need it for non-IE.

IE:
We have event.clientX + document.body.scrollLeft and event.clientY + document.body.scrollTop, which does the mousetracking by itself.

Non-IE:
We have somevariable.pageX and somevariable.pageY. The variable only gets its concrete value of we do a mouse-event. For that reason, we must have the variable in our function, here: getMousePosition(somevariable). I used 'e' for the variable, but I could have equally well have used 'f', in which case we should have:
function getMousePosition(f){
.....
.....
_x = f.pageX;
_y = f.pageY;
.....
.....

etc.

That's it.
-----
Arie M.

Nile
04-21-2008, 06:51 PM
So, I don't need to have a value for that? I just need to define it?

molendijk
04-21-2008, 07:07 PM
That's right,
Arie.

molendijk
04-21-2008, 08:57 PM
Nile, I got interested in this question of tracking the mouse position, so here (http://molendijk.110mb.com/mousetrack/mousetrack.html)'s a page with a more 'modern' script. Examine the source for an IE-pecularity.
----
Arie.

Nile
04-21-2008, 08:59 PM
I was just making a simple tooltip:
http://nile.richei.net/applets/tooltip/
And I wanted to know how I can put it where its hovers over. So thanks!

molendijk
04-21-2008, 09:32 PM
You mean something like this (http://www.dynamicdrive.com/dynamicindex5/fixedtooltip.htm)?

Nile
04-21-2008, 09:35 PM
I'm saying that I made one from your help. And not like that. That one doesn't move depending on where your cursor is.

molendijk
04-21-2008, 10:33 PM
I don't quite get you:
(i) You want a tooltip that moves depending on where your cursor is; your code takes already care of that.
(ii) You want to know how you can put the tooltip where it hovers over; but that is the same requirement as in (i).
I'm surely missing something here. Please explain to me what you want exactly.
---
Arie.

Nile
04-21-2008, 10:35 PM
Molendijk, I am not the one who asked the question in the first place, I do not need help, just wanted to make a tooltip, and I needed to know how to get the cursor position. So I didn't ask the question in the first place, city_coder did. I thank you for your help though.

molendijk
04-21-2008, 10:42 PM
Nile,
OK, I get you now. That was a misunderstanding. And the tooltip is alright.
---
Arie.

Nile
04-21-2008, 10:43 PM
Ok, thank you.