473,322 Members | 1,314 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 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 13845
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...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.