But now Quicksilver is back and running on my machine and I’m very happy! Quicksilver is such an important part of my UI that I was really annoyed that I couldn’t run it anymore and really disheartened to find out that Blacktree hasn’t addressed this issue. In fact, from what I can tell, they aren’t actively developing Quicksilver anymore and its been taken over by a group of developers that have moved it over to a GitHub repo.

If you’ve never used Quicksilver, I strongly encourage you to check it out – its a really nice application launcher that goes way beyond that one feature to change how you interact with your computer.  If you prefer to keep your hands off the mouse and on the keyboard, you’ll love Quicksilver.

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.