How to add key navigation to your web-site

This is probably an old topic which still raises here and there.

Day ago while waiting for delayed flight on United, I was doing some follow up on the discussion about my Theme for Gallery 3 and was asked if I could add support for Keyboard navigation.

In general, it is easy topic, especially when jQuery is supported for the web-site.

An objective is to allow visitor use keyboard to navigate. In my case it is applied to Gallery pagination enabling use of Left/Right/Up keys to move between photos or album pages.

While being simple in implementation, it adds a convenience for the end user enabling keyboard navigation versus mouse clicks.

So let’s add it…

First, we need some “anchors” on the page to find dynamically what our keys would do when pressed.

In case of my theme, I have paginator control allowing user navigate first/prev/next/last or go level up in the gallery structure (small arrow buttons/links), but it could be anything.

If we are to be W3C-friendly, then <link> tag in the header is more appropriate, but I am not going to use it in the example below. So let’s assume we have 5 links as following

<a title="First (Ctrl+Left)" id="g-navi-first" href="/first.html">First</a>
<a title="Prev (Left)" id="g-navi-prev" href="/prev.html">Prev</a>
<a title="Parent (Ctrl+Up)" id="g-navi-parent" href="/parent.html">Parent</a>
<a title="Next (Right)" id="g-navi-next" href="/next.html">Next</a>
<a title="Last (Ctrl+Right)" id="g-navi-last" href="/last.html">Last</a>

As you can see we have 5 different actions to take and we have selected key combinations we are going to use.
Code above by itself, would only work with mouse click.
What we need next is very small jQuery code to bring life into it and add desired keyboard sensitivity.
Please notice that it would override default arrow key based scroll support of the browser. So if you want to keep both then simply adjust code below to your liking.

There goes the code. Simply dump it into JS file and add reference in your page:

/**
*
* Copyright (c) 2010 Serguei Dosyukov, https://blog.dragonsoft.us
*
*/
$.fn.KbdNavigation = function() {
  $(this).bind("keydown", function(event) {
    var lnk = "";
    var lnk_first, lnk_prev, lnk_parent, lnk_next, lnk_last;
    lnk_first  = $("#g-navi-first").attr("href");
    lnk_prev   = $("#g-navi-prev").attr("href");
    lnk_parent = $("#g-navi-parent").attr("href");
    lnk_next   = $("#g-navi-next").attr("href");
    lnk_last   = $("#g-navi-last").attr("href");
   
    switch(event.keyCode) {
      case 0x25: // Ctr+Left/Left
        if(event.ctrlKey) { lnk = lnk_first; } else { lnk = lnk_prev; }
        break; 
      case 0x26: // Ctrl+Up
        if(event.ctrlKey) { lnk = lnk_parent; }
        break;
      case 0x27: // Ctrl+Right/Right
        if(event.ctrlKey) { lnk = lnk_last; } else { lnk = lnk_next; }
        break; 
    }
   
    if(lnk) {
      window.location = lnk;
      return true;
    }
   
    return true;
  });
}
$(document).ready( function() {
  $(document).KbdNavigation({});
});
This entry was posted in Web-design and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

  • About

    From being a junior developer all the way to Development Manager position, I was always interested in new technologies. Passionate speaker, IT junky, developer, architect, team lead, and development manager - many hats, one goal - making software better and closer to people’s needs. For the most part I am using my blog as a scratch pad, writing small articles on things which I came across, was asked about more then once, and which would otherwise require additional research again and again.

    View Serguei Dosyukov's profile on LinkedIn
  • Testimonials

    I've been using this [theme] since the start. It is by far the most attractive, feature packed and stable of...

    Rhyull

    I’m a huge fan of this theme. I’ve got more than 90,000 pictures in my gallery3 running on a Ubuntu...

    Jklobo

    The greydragon theme is fantastic. It’s clean, stable and feature rich. It took me a while to decide to move...

    Ed

    more...

  • Categories