jQuery Access Key Helper

So I was at the SHDNUG last night and watched Todd Anglin give a demonstration on Silverlight 4. One of the really cool things I saw was when he hit a key, all the access keys popped up on the screen. Granted he wasn’t really showing that part off because obviously Silverlight 4 does some cool things, but I thought it was a nice feature to have on an accessible site.

So, I first googled to see if there was something already out there and I did find something by Dave Methvin, but it appeared to be really outdated. Although I did google him and apparently he joined the jQuery team in January of this year. Also, on a side note, his family ratted out Bonnie & Clyde. So he obviously knows his stuff and his family has some guts.

Anyhow, I ultimately decided to start from pretty much scratch and write my own. So…here is the first draft:

$(document).ready(function() {
 $(document).keydown(function(e) {
   if (e.keyCode != 18 && !e.altKey)
        return;

   $("[accesskey]").each(function() {
   if ($("div#" + $(this).attr("accesskey")).length > 0)
        return;

   $("<div id='" + $(this).attr("accesskey") + "' class='access'>" + $(this).attr("accesskey") + "</div>")
                .offset({ top: $(this).offset().top, left: $(this).offset().left })
                .insertAfter($(this));

    $(this).addClass("accessactive");
   });
  });

  $(document).keyup(function(e) {
     if (e.keyCode != 18 && !e.altKey)
         return;

     $("[accesskey]").each(function() {
         $("div#" + $(this).attr("accesskey")).remove();
         $(this).removeClass("accessactive");
     });
  });
});

Basically, it checks to see if the alt key was pressed if not, it returns. If so, it checks to make sure a div doesn’t already exist and then it creates a new div with an id of the accesskey and assigns it a CSS style called access and sets the inner HTML to be the accesskey and finally it inserts it on top of whatever has the accesskey (longest sentence ever). It also adds a class to the item with an accesskey.

The keyup simply removes what was done.

I uploaded it to my code samples and I took advantage of the new page feature on blogger and took Dave Methvin’s HTML sample and applied my jQuery code to it.

Please let me know what you think or if there’s a better way. Thanks for reading!

Version 2

This time I decided to take advantage of the qtip plugin by Craig Thompson instead of working out the best way to position the access keys. With qtip, you can position the access key pretty much where ever you want and it comes with some really nice default styles. It also works in IE, which I suppose is a plus :) So here’s what the new version looks like:

$(document).ready(function () {
    $(document).keydown(function (e) {
        if (e.keyCode != 18 && !e.altKey)
            return;

        $("[accesskey]").each(function () {
            if ($(this).data('qtip'))
                return;

            $(this).qtip({
                content: $(this).attr("accesskey"),
                position: { corner: { target: 'rightTop'} },
                show: { ready: true, when: false },
                style: { name: 'light' }
            });

            $(this).addClass("accessactive");
        });
    });

    $(document).keyup(function (e) {
        if (e.keyCode != 18 && !e.altKey)
            return;

        $("[accesskey]").each(function () {
            $(this).qtip("destroy");
            $(this).removeData('qtip');
            $(this).removeClass("accessactive");
        });
    });
});

I uploaded the new code sample and I updated the jQuery Access Key Helper demo. Also note that I’m using jQuery 1.4.2 and the latest release of qtip with this change made.

Thanks for reading!