jquery mouse move capture inaccuracy

Question

I'm facing an strange problem. I capture the mouse movements with:

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

Then I attach a div to the page like:

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

and then try to playback the moves

It works ok on most pages but on some pages the playback starts ("*" initial position) some pixels to the right (x). The y is ok but the x is about 120px to the right. On other pages it is accurate. On the not accurate pages, when the mouse goes close the right scrollbar it goes beyond the right page border and produces a horizontal scrollbar.

I think this has to do with some css styling of the page being playback.

Does anybody has an idea what may be causing this ? How could I get the actual offset (in case there is an offset for such pages) ?

Thanks a lot,

Hernan

--Edited-- It is obvious that the x displacement is due to the positioning of the main document. The first element gives a $.position() of 0,134 and if I SUBSTRACT that amount from the recorded data the playback is accurate. The problem is that this displacement does not happen in every page and I dont know how to figure out when the displacement occurs and when not (to correct it by substracting).

Answer 1

Recording

If you want to capture and replay mouse movement you can try "recording" from the document. This would use the x and y chords from the window.

To do this you can use the document DOM element:

var m = [];

// Using the document instead of body might solve your issue
$( document ).mousemove(function( e ){

  m.push({ x : e.pageX, y : e.pageY });

});

Replaying

HTML/CSS

Your HTML/CSS should be a div on the page set with position: fixed which should match your javascript chord samples as fixed is absolutely positioned to 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 replay your 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 it out on this demo.