mouse tracking on IE

Question

Consider the following snippet:

$(document).bind('mousemove', function(e)
                 {
                    $('#someDiv').css({left: e.pageX+'px', top: e.pageY+'px'});
                 });

This should make #someDiv follow the mouse (tooltip), when the css value for "position" is set to absolute.

Works as expected, except when you Zoom IN or OUT in IE7 ( dind't try other version of IE). Then the e.pageX gets completely off. The more you zoom in (using your mousewheel + CTRL), the more off the positioning gets.

I've tried to break jQuery's UI demos (sliders) and it seems not even jQuery guys have this figured out. Is there any genius out there who knows how to fix this nasty thing?

Thanks in advance!

Answer 1

If you get the client width of a reference element in the browser at each moment and divide it by the original size of that elements you can get the scale by which the zoom has grown or shrank. Therefore if you add that parameter to be always multiplied in your calculations your values should update accordingly to incorporate the page scale in your mousemove.

I said this without actually rewriting the code myself but that doesn't seem to be hard for yourself.

Answer 2

Try the following HTML:

<div id="one" style="top:2px;left:10%;width:10px;height:10px;background:blue; position:absolute;"> </div>
<div id="two" style="top:2px;width:10px;height:10px;background:red;position:absolute;"> </div>

<div id="log" style="margin-top:25px;"> </div>

with the following script:

document.getElementById("two").style.left = document.getElementById("one").offsetLeft + "px";
var zoom = 0;

setInterval(function() {
  var newZoom = document.getElementById("two").offsetLeft / document.getElementById("one").offsetLeft;



if (newZoom == zoom) return;
  zoom = newZoom;



document.getElementById("log").innerHTML += zoom + "<br>";
}, 200);

And it presents a method for calculating the scale of zoom level in the browser.

I think if you bring in this parameter in your calculation it will help you

sorry I posted a new answer but the comment box wasn't bringing up the code snippet button