473,386 Members | 1,705 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,386 software developers and data experts.

Getting position of mouse within a specified element

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
element.

So far, here's what I've got:

http://weston.canncentral.org/misc/w...Haven/pie.html
(Code for the function given in this post below).

It seems to work in Gecko-based browsers, and IE/Win.

It breaks badly in Safari, grabbing what is apparently instead the
viewport position of the mouse. Also, on IE/Mac, it breaks if there's
any scrolling done on the page (try resizing the window so that it's
smaller than the sample image, then scrolling down, and then clicking).

Any ideas what I can do to make it work better for the Mac
browsers? Also, any other platforms which you observe it
breaking under?

Thanks,

Weston

function getClickCoordsWithinTarget(event)
{
var coords = { x: 0, y: 0};

if(!event) // then we're in a non-DOM (pro'ly IE) browser
{
event = window.event;
coords.x = event.offsetX;
coords.y = event.offsetY;
}
else // we assume DOM modeled javascript
{
var Element = event.target ;
var CalculatedTotalOffsetLeft = 0;
var CalculatedTotalOffsetTop = 0 ;

while (Element.offsetParent)
{
CalculatedTotalOffsetLeft += Element.offsetLeft;
CalculatedTotalOffsetTop += Element.offsetTop;
Element = Element.offsetParent ;
}

coords.x = event.pageX - CalculatedTotalOffsetLeft;
coords.y = event.pageY - CalculatedTotalOffsetTop;
}

return coords;
}
~==~
http://weston.canncentral.org/
Taking Pictures During Dreams
weston8[at]cann8central.org
(remove eights to mail me)

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #1
1 2008
try event.x / event.y instead of event.offsetX / event.offsetY
Jul 23 '05 #2

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

Similar topics

14
by: Zenobia | last post by:
Hello folks, Is it possible to position an item within a <td> element? For instance see below. The table has multiple rows, one for each database record. Each row has 3 hrefs associated with it...
1
by: Knut | last post by:
Hello everybody. This is my first attempt at Javascript, something that is long overdue. But please bear that in mind, and have mercy (= My question is simple: I'm doing a dropdown menu...
10
by: Danny | last post by:
How can I get the coordinates of the mouse cursor in Mozilla browsers as well as Opera and IE6? I'm struggling to understand how to capture mouse movement events with Mozilla/Netscape/Firefox and...
1
by: travis_brooks | last post by:
greetings I had a javascript that was reliably telling me the position of an image on a page, and now its not. I was using the script to draw a bounding box that followed the mouse around over...
21
by: Michael Bierman | last post by:
Please forgive the simplicy of this question. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does...
3
by: David Hayes | last post by:
I've made tooltips work in Firefox*, but tooltip doesn't appear at the specified location until the SECOND time that the user passes the mouse over the location with the mouseover event. What I...
2
by: Martin Geisler | last post by:
-----BEGIN PGP SIGNATURE----- Version: GnuPG v1.4.1 (GNU/Linux) iD8DBQBDNmLx6nfwy35F3TgRAtjIAJ9ryEjr0kaaEapRD0z1bHQYmKi+1wCdEOZC /wY2033SyIVl0za07v8RMkk= =6BZ+ -----END PGP SIGNATURE-----
4
by: vunet.us | last post by:
I have a DIV element. How can I find mouse position (top and left) inside of this DIV? <div onMouseMove="getPositions();" style="width:200px;height:100px"></div> function getPositions(ev){...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.