Miss Part 1? Go give it a read then.

So now that you have your custom scrollees, how about we fix those arrow keys, mmkay? First lets take a look at why the keys aren't working.

The key here is you must focus

The main issue here is one of focus, or rather lack of focus. When your page loads the wrapper div needs to have focus, or be activated for it to register the the up and down arrow keys. I am not sure what the default behavior for a web browser is, but I think the document window itself has focus on load. Once you interact with the page you transfer focus to the element(s) in question.

Anywhoo, we need to make sure that the wrapper div has focus so it can register the use of up and down arrow keys. Luckily this is pretty simple to do.

Time for a little javascript

I had originally spec'ed out activating the use of the arrow keys, as well as adding some smooth scrolling to the site, but after some initial tests decided that although it was great to look at, it introduced some unwanted usability issues. In the end I decided to just restore normal user expectations and leave it at that.

For this example I will be using a smidge of jQuery, and a smidge of straight javascript. I already include jQuery in all my themes for various eye candy interactions so it was handy to pull it in for this.

If you prefer another framework, as long as it has a method for checking with the DOM is ready, you are good to go. Here is the javascript, in its entirety:

Badda bing, badda boom. So, here's the breakdown. We wait for the DOM to be ready for us to munge with it, and when it is ready, we munge. Brother do we munge.

Basically we are telling the page to give focus to the first link it finds in the page. Since this link is inside our wrapper div, wrapper now focus as well which means that our arrow keys will now work as expected.

Not to difficult really. Oh, and I mentioned in the previous installment that we would see why the following CSS was important:

a:focus { outline:0px;}

When a link has focus you get the dotted outline applied to it which is less than desireable. This CSS removes that outline. Now, there is an argument that we are impeding usability by removing the outline, and there is a great deal of merit to that argument. I don't believe I would do this on a website meant for commercial consumption, but for a personal site meant for learning, sharing and exploration it sits pretty well I think.

Well that is it for now. Hopefully you have found this micro-series helpful. As always comments and questions are welcome.