keyboard navigation with arrow keys (next and back) for changing filenames

Question

I have a bunch of html files with different file-names, that I need to add an option to use keyboard arrow keys to navigate (previous and next file).

The file-names are not dynamic.. for example: filename.html, anotherfile.html, thirdone.html etc.

So I need what's in the .js file for the navigation, and what I should link the previous, next buttons on the html file?

Calista

This question is SO vague. Examples? Code? What have you tried? – Thomasinathomasine

Seems more like someone not knowing where to start on handling this type of navigation. It seems easily answered, and potentially a good source of information for someone in a similar bind later. – Paramount

possible duplicate of Bind Keyboard to left/right navigation – Paramount

Answer 1

If you were to define two ID's on two <a> tags like so:

<a id="prev" href="filename.html">prev</a>
<a id="next" href="thirdone.html">next</a>

You could do something like this in navigation.js and include it from every page:

// when the document is ready, run this function
jQuery(function( $ ) {
    var keymap = {};

    // LEFT
    keymap[ 37 ] = "#prev";
    // RIGHT
    keymap[ 39 ] = "#next";

    $( document ).on( "keyup", function(event) {
        var href,
            selector = keymap[ event.which ];
        // if the key pressed was in our map, check for the href
        if ( selector ) {
            href = $( selector ).attr( "href" );
            if ( href ) {
                // navigate where the link points
                window.location = href;
            }
        }
    });
});

You could even use a little CSS to make the #prev, #next { display: none; } or play around with absolutely positioned CSS triangles.

Paramount

Thanks a lot for the answer. I gave it a try: I put the above code in a file named navigation.js, and then in the html file I put the first two lines, and before the </head> I put this: <script src="navigation.js" type="text/javascript"></script> (and created the 2 html files with those names), but still it didn't work, and in Internet Explorer it gave "Script Error": "the value of the property 'jquery' is null or undefined, not a function object" – Calista

You need to include jQuery before you include that script – Paramount

super.. I added this at the head and it works: <script type="text/javascript" src="google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1"); google.setOnLoadCallback(function() { }); </script> Thanks a lot – Calista

You might be also capable of helping me is tracking the event through this question: #12986991 , as your answer here was so clear and to the point with easy steps – Calista

If you are changing the actual location of the page, it's much harder to track because when you change page locations, it will unload the current page and replace with the new one. You'd be better off "tracking" a page loading than the "navigation by keyboard" event – Paramount

What do you mean by "changing the actual location of the page"? – Calista

I mean using window.location, which you do here. It is also possible to use ajax to replace the current page content. Look into something like google analytics, it should track navigation. – Paramount

Is it possible to make slideshow option too? For example to have another link with id="slideshow", or some button and when it is clicked to start slideshow, to automatically pick up id="next" link and open it, and on next page to wait for 5 seconds and to open id="next" again. Practically to make slideshow between pages. – Ravel