472,805 Members | 949 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,805 software developers and data experts.

Getting Mouse coordinates in a DIV

Hi,
I haven't found anything like this anywhere with Google, so I'm posting
it here, hoping one of you people knows how to do something like this.
I'm trying to get the mouse coordinates in a div, as opposed to relative
to the screen.

_______________________________
| * |
|_______________________________|

Say this DIV is 100px wide, and the mouse is located at 60px from the
left side of the DIV, how can I get 60px as a value from that? It should
work in Firefox and IE (and preferably Opera, Konqueror, Safari, etc too
;) )

Is the only way to get mouse coordinates this:

function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
?

Or can I use DOM to grab it through getElementByID ?

thanks in advance
Jonne
Jul 23 '05 #1
4 13811
Jonne wrote:
[...]
Is the only way to get mouse coordinates this:

function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else { // grab the x-y pos.s if browser is NS
tempX = e.pageX;
tempY = e.pageY;
}
?


You should make your event capture routine more cross-browser and
swap feature detection for browser detection:

function getMouseXY(e) {
var e = e || window.event;

// grab the x-y pos.s if browser supports clientX/Y
if ( e.clientX && document.body.scrollLeft
&& document.body.scrollTop ) {
tempX = e.clientX + document.body.scrollLeft;
tempY = e.clientY + document.body.scrollTop;

// Otherwise, try pageX/Y
} else if (e.pageX) {
...
}

I imagine you also need to get the postion of the element too,
for that document.getElementById may be useful to get a reference
to the div.

Have a read here for a pointer to the issues with trying to get
the cursor position:

<URL:http://www.quirksmode.org/js/events_properties.html>
--
Fred
Jul 23 '05 #2
Fred Oz <oz****@iinet.net.auau> wrote in message
news:42***********************@per-qv1-newsreader-01.iinet.net.au...
if ( e.clientX && document.body.scrollLeft
&& document.body.scrollTop )


These properties are numeric, so even if they are all defined, the test
evaluates false unless they are all non-zero.

--
S.C.
Jul 23 '05 #3
Stephen Chalmers wrote:
Fred Oz <oz****@iinet.net.auau> wrote in message
news:42***********************@per-qv1-newsreader-01.iinet.net.au...

if ( e.clientX && document.body.scrollLeft
&& document.body.scrollTop )

These properties are numeric, so even if they are all defined, the test
evaluates false unless they are all non-zero.


Yes, that is so. Detection of such features is difficult, as not
only are they browser dependent, but also may be unavailable
based on doctype:

<URL:http://www.quirksmode.org/viewport/compatibility.html>

I guess testing for them needs to be separated from the clientX/Y
test and put inside try/catch: if they return zero, then the
scroll offset it zero. If they error, then the offset is unknown
and the OP must take a guess at what to do.
--
Fred
Jul 23 '05 #4
Fred Oz wrote:
Stephen Chalmers wrote:
Fred Oz <oz****@iinet.net.auau> wrote in message
news:42***********************@per-qv1-newsreader-01.iinet.net.au...
if ( e.clientX && document.body.scrollLeft
&& document.body.scrollTop )

These properties are numeric, so even if they are all defined, the test evaluates false unless they are all non-zero.


Yes, that is so. Detection of such features is difficult, as not
only are they browser dependent, but also may be unavailable
based on doctype:

<URL:http://www.quirksmode.org/viewport/compatibility.html>

I guess testing for them needs to be separated from the clientX/Y
test and put inside try/catch: if they return zero, then the
scroll offset it zero. If they error, then the offset is unknown
and the OP must take a guess at what to do.
--
Fred


Why not...

function getMouseXY(e)
{
e = e || window.event;
if (e)
{
// grab the x-y pos.s if browser supports clientX/Y
if (document.body
&& typeof document.body.scrollLeft != 'undefined'
&& typeof e.clientX != 'undefined')
{
var tempX = e.clientX + document.body.scrollLeft;
var tempY = e.clientY + document.body.scrollTop;
}
// Otherwise, try pageX/Y
else if (typeof e.pageX != 'undefined')
{...

Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Weston C | last post by:
Here's something I'm working on: for a click on a given element, I want to be able capture the x/y coordinates of the mouse -- that is, the mouse coordinates relative to the top left corner of said...
3
by: mitsura | last post by:
Hi, I have included a small listing. The test program opens a panel and show a bitmap. What I want is to when the mouse is over the bitmap panel, I want to trap the left mouse click. The...
1
by: Dino M. Buljubasic | last post by:
I am trying to get coordinates of mouse_down/mouse_up event BUT relevant to the form or the parent of a control, not to the control where mouse click has occured. That means, even if I click a...
7
by: RobKinney1 | last post by:
The subject line sounds a little funny, let me quickly explain: I have created a custom control using ComboBox. But inside my class, I need to know when the user does NOT click my control. Of...
2
by: quickcur | last post by:
Hi, I have html like this: <div id="myCanvas" style="border:10px, black;position:relative;height:250px;width:100%;"> <img id="p" src="p.jpg"> </div> When user click the mosue, I would like ...
3
by: wanwan | last post by:
I made a game with a window form that needs to record the mouse position to an array at 100 samples per second, so I use the mouse move event to do the job. The problem is the mouse move event...
3
by: Andrzej | last post by:
I have a picturebox on my C# .NET form. The picturebox size mode is set to zoom. I then load an image into that form and display it. As the user moves the mouse over the form, I want to get and...
1
by: Christoph | last post by:
I've got a drag source and a drop target. They are set up thusly: var oDragSource = new dojo.dnd.HtmlDragSource(oDragRow, "layoutRow"); oDragSource.onDragEnd = function( e ) { console.log(...
4
by: =?Utf-8?B?Unlhbg==?= | last post by:
I have a winform containing a scrollable panel and a groupbox inside the panel. There is a button inside the groupbox. When that button is clicked; how do I capture and display the X and Y...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 2 August 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: kcodez | last post by:
As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
14
DJRhino1175
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
0
by: Rina0 | last post by:
I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: lllomh | last post by:
How does React native implement an English player?
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.