Simple Keyboard Navigation Using Javascript

Do you want to add a clean, intuitive, user interface for navigation to your website?

Sometimes you may find that a site has an intended navigation, or a natural progression, and a navigation bar just doesn’t fit. Javascript(JS) can help you create your next level nevigation, but this demonstration will still allow those without JS enabled to move about your site.

First, do a web search! Your problem is almost never new. In the days of the internet, this is a good thing. It means your path has been paved for you. Resources such as stackoverflow.com are great for finding answered questions.

I have done this for you. Resource 1 (below in resources) has a good answer on how to do basic javascript navigation based on keys. Use the answer, not the question. The code is as so:


function leftArrowPressed() {
   // Your stuff here
}

function rightArrowPressed() {
// Your stuff here
}

document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
}
};

Now that we have the basics, we can change this code to do what we want. In this case there are only two cases (if you want to know how to use switch-case syntax, you can look it up on w3schools, or follow along with this example).

The solution we are given is only coded for the left and right arrows. While useful, we may also want to code the spacebar and the backspace as next and back navigation respectively.

A search of the web for javascript keyboard key values brings up resource 2. Using resource 2 we can see that backspace is 8 and spacebar is 32. We can break apart the code from resource 1 and add in cases for these two numbers. We just redirect these to the proper functions as shown below:


function leftArrowPressed() {
   // Your stuff here
}
function rightArrowPressed() {
// Your stuff here
}

document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
case 8:
            leftArrowPressed();
            break;
        case 32:
            rightArrowPressed();
            break;
    }
};

Resource 3 is the w3schools article on javascript href. The href value can be printed out as in their example to show the current page, OR, you can set the href value to change the page. That is what we want to do. Since they don’t show it, I will explain it.

–I will add the code together later, a mini example to start, however.


location.href="http://example.com";

We can add this piece of code into our overall example in the function areas so that they actually do something!


function leftArrowPressed() {
   location.href="http://example.com/previous-page";
}

function rightArrowPressed() {
location.href="http://example.com/next-page";
}

document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
case 8:
           leftArrowPressed();
            break;
        case 32:
            rightArrowPressed();
            break;
    }
};

So, that is your javascript code. Make sure you wrap it like so:



<script type="text/javascript">

...code...

</script>

<noscript>Javascript isn't enabled in your browser. 

Use the <a href="http://example.com/sitemap">Sitemap</a></noscript>

Tutorial Resources:

1. http://stackoverflow.com/questions/2259690/how-to-get-the-arrow-keys-on-the-keyboard-to-trigger-navigation-previous-next-p

2. http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

3. http://www.w3schools.com/jsref/prop_loc_href.asp

-Zac David McCreary

Advertisements

~ by zacdavidm on September 11, 2012.

One Response to “Simple Keyboard Navigation Using Javascript”

  1. I’d say you need photos, but there’s not really anything to screenshot other than code in this case.
    However, your presentation is good but it’s not very descriptive. You should try to explain what your code actually does. I understand that explaining basic javascript may seem tedious, but for the purpouses of this blog I feel that it would be largely beneficial.

Comments are closed.

 
%d bloggers like this: