IE7 Standards Mode,Mouse X Y position when the window is scrolled up

Posted on 2010-04-05
Medium Priority
Last Modified: 2012-05-09
I'm working on coding a popup box that appears when you put your cursor over a tag.  It uses onmouseover and onmouseout.  I'm having trouble finding the right variable to use to get it to work in IE7 Standards mode when the window has been scrolled up.

I modify the element's style.left and style.top to be equal to the mouse X and Y coordinates.

In IE6 Quirks mode, this finds the right values:

event.clientX + document.body.scrollLeft
event.clientY + document.boy.scrollTop

When this is displayed in IE7 or IE8 standards mode, as you scroll down the page, the X and Y coordinates end up being above where the tag is on the page.  For instance, if you put your cursor over the word "instance" in this sentence, the popup would appear as though you put your cursor over a word in the second paragraph above instead of where your mouse actually is.

In IE8 standards mode, I can use this code:


In IE7 and IE6 quirks mode, it has the same problem as above.

So I have code that will work in IE6 quirks mode, and code that will work in IE8 standards mode.  What I don't have is code that will work in IE7 standards mode.

So, in IE7 standards mode, what can I use to determine the X and Y coordinate for the mouse cursor so that if that value is applied to a tag with it's Left and Top value, it will appear where the mouse is located.

I'm using this doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I'm using the developer tools with IE8 to change between IE6 quirks mode, IE7 standards mode, and IE8 standards mode.  I'm debugging with VS 2010 when needed.

I've got everything in place for this code wise, I just need to know how to find the mouse coordinates in IE7 standards mode so I'm not looking for a replacement popup script or anything like that.  Just info on how to get the mouse coordinates in IE7 standards mode.

Thanks in advance.
Question by:Check
1 Comment

Accepted Solution

Check earned 0 total points
ID: 29828597
Found it.

event.clientX + document.documentElement.scrollLeft
event.clientY + document.documentElement.scrollTop

Works in IE7 standards mode and IE8 standards mode.  That's what I needed.

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question