Skip to content

Instantly share code, notes, and snippets.

@josher19
Created May 13, 2013 10:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save josher19/5567420 to your computer and use it in GitHub Desktop.
Save josher19/5567420 to your computer and use it in GitHub Desktop.
Track & display mouse movements
jQuery(function($) {
if (!Date.now) Date.now = function() { return new Date().getTime() }; // shim
var prev = {x:0,y:0,time:Date.now(),lastEv:{}}, mover = function (e) {
// send event to server with X and Y
var tdiff = e.timeStamp - prev.time;
if ( (Math.abs(e.pageX - prev.x) + Math.abs(e.pageY - prev.y) > 150) || (tdiff > 1500) ) {
oAJAX.send("send Mouse X & Y, tagName " +
"and Current Date/Time to the millisecond", prev.x=e.pageX, prev.y=e.pageY, prev.time = e.timeStamp || Date.now(), describe(e.target), prev.lastEv=e);
marker.animate({top:prev.y,left:prev.x},'fast');
}
};
function describe(elem) {
if (elem && elem.tagName) return elem.tagName + (elem.id ? ('#' + elem.id) : elem.className ? ('.' + elem.className.replace(/\s+/g, '.')) : '' )
}
$(document).unbind('mousemove', mover).mousemove(mover);
var marker = jQuery('<div>').css({'position':'absolute', 'background-color':'yellow'}).text('X');
jQuery(document.body).append(marker);
var sizing = Math.sqrt( $(document).width() * $(window).height() ) / 8; // 8x8 grid ~ 134 pixels
var oAJAX = { send: function (msg) { console.log(msg, arguments) } }
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment