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

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