A recent deployment of my production website involved upgrading jquery library from jquery-1.3.2.min.js to jquery-1.7.1.min.js. Everything seemed to be fine except one place that was out of place – a customized div message box that initially displayed correctly next to mouse pointer now moved to the upper left corner of the screen.

What happened was that somehow 1.7.1 no longer supports $().mousemove() without passing in a definitive element identifier in the $(). Before the upgrade (jquery1.3.2.min.js), I used this code to capture the mouse position:

 var mouseX; var mouseY; $().mousemove(function(e){ mouseX=e.pageX; mouseY=e.pageY; }); 

And the mouseX and mouseY would have legit values. But these values were lost when I upgraded to jquery.1.7.1.min.js, if I kept the same code.

As it turned out, I needed to put a definitive html element id, either an id for a div or a table, in the $(). The new code that works the same as before the upgrade now should look like this:

var mouseX;
var mouseY;
$("#divid1").mousemove(function(e)
{
mouseX=e.pageX;
mouseY=e.pageY;

});

Now my popup box would display correctly to where I have my mouse over some item with this code below:


function showHints(msgDivId, msg,visible)
{
//alert("mouse position: " + mouseX + "," + mouseY);
var ch=$("#" + msgDivId);
ch.html(msg);
ch.addClass('hoverPopup');
ch.css({
left:mouseX+10,
top:mouseY-10
});
if (visible && msg.length>0)
ch.show();
else
ch.hide();

}