Jon Allured

We recently had a project where we needed to find out where the mouse was (its coordinates) when an event fired (hover). I wanted to create a little example page that I could play around with to see how this worked.

The markup is really simple and just creates four divs in red – on over their background color is changed to green and then its changed back on out. We’re using jQuery here, so the syntax is based on the hover documentation and the solution as inspired by their Mouse Position tutorial.

The magic is really just the bit where you define the hover functions and then the pageX and pageY attributes of e:

$('div.block').hover(
   function (e) {
      ...
      var msg = 'ON! x=' + e.pageX + ', y=' + e.pageY;
      ...
   },
   function (e) {
      ...
      var msg = 'OFF! x=' + e.pageX + ', y=' + e.pageY;
      ...
   }
);

If you pass the hover functions a variable, it will give you access to the event object through which you can determine the mouse’s position by using its pageX and pageY attributes – slick, huh?

So, I really liked this and wanted to see it in action – I thought logging the info to the FireBug console would be a nice way to see it, but later I realized that I wanted to run this code in other browsers (IE), so I made my own console div and then wrote the coordinates to it.

When I tested this out, however, I didn’t like that I had to keep scrolling the div to the bottom, so I found a nice technique to keep it at the bottom:

function (e) {
   ...
   var consoleDiv = document.getElementById('console');
   consoleDiv.scrollTop = consoleDiv.scrollHeight;
}

The div element’s scrollTop is set to its scrollHeight so that it will remain scrolled to the bottom as its size grows. I had never heard of these attributes, but they are nicely documented in Mozilla’s Developer Center: scrollTop, scrollHeight.