Javascript Navigation Part Deux

Yesterday i posted some code related to using JavaScript to assis in keyboard navigation of a website, In that post I mentioned there was a problem when manually scrolling past chapter, today I’ve fixed that problem and am posting the solution.

The Solution is not particularly difficult, all you need to do is determine the users position and then determine which header that would go under. First things first, a interval must be set up to run a script every so often, when testing I use 3 seconds as it gave me enough to to scroll around the page and make sure it was all working well, but the final version of the script I moved up to every half second. Setting up a command to run over so often is easy.

I set that up in an init function that I called once the page was loaded (that function also included getting all the H1 tags and setting some variables) then comes the locator function

Snipplr: http://snipplr.com/view/45934/better-javascript-keyboard-navigation/

That code will process all of the h1 tags and find the one your actually reading, and set the currentpos variable (part of the larger script in the post Working with Javascript Input) to wherever you are allowing you to skip headers based on your current location instead of your last location.

This code is in another example (again, this one is modified to work better work with project gutenburg formatting, this time it’s using H5 tags) on the examples page.

This code was made with the GoogleTV in mind, so no testing was done outside of webkit, but it should work fine in firefox and IE (although it might need a few modifications). If anybody has an application in mind for web use let me know and I can help you tweak it to work in the big 3 desktop browsers.

There are two other improvements I have in mind that I might incorporate in the future. The first is being able to type in the chapter number and the second is implementing smooth scrolling instead of the current jump to method. I’m not sure if I’ll do those any time soon, but it all depends on the time I have.

Leave a Reply

Your email address will not be published. Required fields are marked *