Archive

Posts Tagged ‘jquery’

shortaccesskey – a JQuery plugin

February 8th, 2007 15 comments

Site navigation with keyboard has got much popularity within web uses since the time Google has introduced this feature in its most famous application GMail. Some of the other web applications where this type of navigation can be used for better user experience are photo gallery and photo blog.

To make this possible, HTML provides us an attribute accesskey which can be assigned to the navigation links on these type of sites. But the major drawback of this is, user has to press a combination of ALT+accesskey or ALT+SHIFT+accesskey to make this work, which is a bit tedious work.

So, I thought of making this work more easily by using the same accesskey attribute. For this, I used the excellent Javascript library JQuery and developed a completely unobtrusive plugin to make these long accesskeys short. Thus the name shortaccesskey.

This plugin, when used along with jquery will allow you to use the accesskeys defined on the page by just typing that key only. So, ALT+j becomes j and ALT+k becomes k making navigation easier.

Also, if you have any form elements in your page, then these shortaccesskey’s will automatically disable itself as you start typing in the form elements like textbox or textarea. When you come out of the form element it will be enabled again.

Demo:

Click here for demo.

Access keys available:

k -> next photo

j -> previous photo

u -> album view

h-> home

Download:

jquery.shortaccesskey.js

Installation:

  • Download and save the plugin js file somewhere in your site’s webroot, preferably in the folder where you have kept the jquery.js file.
  • Include this plugin file along with jquery (if not already included) in the template file. Remember, plugin file must be included after the jquery file.
  • Just below that write the following code in javascript block to initialize the plugin
  • $(document).ready(function() {
    $.shortaccesskey.init();
    });
    

And you are done. All the accesskeys on you page will now be accessible with shortaccesskeys.

If you have any questions or suggestions do add a comment here.