File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes determining mouse coordinates? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "determining mouse coordinates?" Watch "determining mouse coordinates?" New topic

determining mouse coordinates?

Sam Doder
Ranch Hand

Joined: Feb 06, 2008
Posts: 204

hi, I am using event.clientX clientY ,...etc to determine the mouse coordinates works fine when I don't have a scrollbar.
But as soon as I have a scrollbar and scroll down I don't get the popup box poping up at the cursors click position...

Is their any easy way to have my popup box/div tag popup at the exact location of my cursor regardless of if I scrolled down the page or not ....

I just don't know what is going wrong with the coordinate thing?

Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 63852

Are you accounting for the scroll height? Sounds like you are getting the coordinates with one origin (window) and using them in another (document).

If you are using jQuery, it normalizes the Event instance to contain (pageX,pageY) and (screenX,screenY) coordinates in a browser-independent fashion. (You can also easily obtain the scroll amount with the scrollLeft() and scrollTop() methods, if it turns out to be relevant).

[Asking smart questions] [About Bear] [Books by Bear]
Sam Doder
Ranch Hand

Joined: Feb 06, 2008
Posts: 204
thanks for the tip I used this

for anybody that runs into the same problem!

this basic function gets the scrolled height / width and from their you can add it to clientX , clientY to get the exact location on the screen for placing your popup menu.... etc

Tom Varga

Joined: Aug 09, 2010
Posts: 8
some remarks:
- you can use both fixed and absolute positioned elements to display a popup box at the position of the mouse. The difference between fixed and absolute positioning is:
- the placement of fixed positioned elements is always relative to the browser window's client area, so scrolling the document or an element in the document does not modify the placement of fixed positioned elements
- the placement of an absolute positioned element is relative to its first positioned (relative, fixed or absolute) ancestor element. If no positioned parent element exists, the placement is relative to the document. In contrast to fixed positioning, scrolling affects absolute positioning.

So in case of absolute positioned popups you need to know the number of pixels by which the contents of the document are scrolled and if the user scrolls the document while an absolute positioned popup is shown, the popup box scrolls out.

Unfortunately Internet Explorer does not support fixed position before version 7 and it is only supported in STRICT and XHTML document type declarations in IE7.

If you need the number of pixels by which the contents of the document are scrolled, you can use the scrollTop and scrollLeft properties of the HTML element (document.documentElement) in IE and the pageXOffset and pageYOffset properties of the window object in other browsers.
The only problem is that the zoom level (CTRL and +, CTRL and -) affects the value of the scrollTop and scrollLeft properties in IE before version 8.
If the browser is not at the normal zoom level
- the scroll amount is calculated in the default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different
- from Internet Explorer 8, the scroll amount is calculated in the current pixel size.

You can find further details and examples on the following pages:

I agree. Here's the link:
subject: determining mouse coordinates?
It's not a secret anymore!