Inaccurate jQuery mouse capture accuracy

Question

I got a strange problem. I capture mouse movements with:

var mmoves = []; jQuery(document).mousemove(function(event) { mmoves.push({x:event.pageX, y:event.pageY}) } 

Then I attach the div to the page, for example:

 $("body").append('<div id="mouseemul" style="padding:0; margin:0; color: red; background-color: blue; width: 1px; height: 1px;">*</div>'); 

and then try to reproduce the movements

It works fine on most pages, but on some pages, playback starts ("*" starting position) a few pixels to the right (x). Y is fine, but x is about 120px to the right. On other pages, that's for sure. On inaccurate pages, when the mouse approaches the right scroll bar, it goes beyond the right border of the page and creates a horizontal scroll bar.

I think this is due to some CSS style that the page plays on.

Does anyone have an idea what could be causing this? How can I get the actual offset (if there is an offset for such pages)?

Many thanks,

Hernan

- Edited-- Obviously, the offset x is related to the positioning of the main document. The first element gives $ .position () of 0.134, and if I EXIST this amount from the recorded data, the reproduction will be accurate. The problem is that this offset does not occur on every page, and I don’t know how to determine when the offset occurs and when not (to fix it by subtraction).

Answer 1

Record

If you want to capture and reproduce the movement of the mouse, you can try to "write" from document . This would use the x and y chords from the window.

You can use the DOM document element for this:

 var m = []; // Using the document instead of body might solve your issue $( document ).mousemove(function( e ){ m.push({ x : e.pageX, y : e.pageY }); }); 

Play

HTML / CSS

Your HTML / CSS should be div on the page with position: fixed , which should match your javascript chords, since fixed absolutely positioned in the window:

 <style> .replay { /* Use position fixed to match window chords */ position: fixed; top: 0; left: 0; /* These are just for show */ border-radius: 20px; background: red; width: 10px; height: 10px; } </style> <div class="replay"></div> 

Javascript

To play the captured chords, you can use something like this:

 var $replay = $('.replay'), // Get mouse simulator i = 0, l = m.length, pos, t; // Recursive animation function function anim(){ // Cache current position pos = m[i]; // Move to next position $replay.css({ top: pos.y, left: pos.x }); i++; // Exit recursive loop if ( i === l ) clearTimeout( t ); // Or keep going else t = setTimeout(anim, 100); // Timeout speed controls animation speed } // Start animation loop anim(); 

Demo

Try this demo .