Arrow navigation 23 December 2005

At www.artlebedev.com you can page through Routine, Process and Illustrations in Daily Section by pressing ← and → holding down the Ctrl key.

It’s easy to guess what needs to be done for this. The script has to include references to the next and the previous page and a keyboard event handler.

Where to put the references? Well, it doesn’t really matter. Lets use <link> tags providing appropriate ids:

<link rel="next" href="/portfolio/sokol/2005/" id="NextLink" />
<link rel="prev" href="/portfolio/samsung/megaded/" id="PrevLink" />
<script type="text/javascript" src="/svalka/navigate.js"></script>

This code also serves another purpose—some browsers recognize these tags and display extra buttons in the navigation panel.

And here comes the onkeydown event handler:

document.onkeydown = NavigateThrough;

Now, just wait for a click on the arrow:

function NavigateThrough (event)
{
	. . .
	switch (event.keyCode ? event.keyCode : event.which ? event.which : null)
	{
		case 0x25:
			link = document.getElementById ('PrevLink');
			break;
		case 0x27:
			link = document.getElementById ('NextLink');
			break;
	}
	if (link && link.href) document.location = link.href;	
}

Opera is an exception. It runs the handler after it has performed the default operation (combination Ctrl + arrow key is reserved by the browser). So, using Opera you should press Shift in addition to Ctrl which makes the three-key combination for navigating the <link> references.

When you do things like that, carefully decide on what page is to be considered the next or the previous. For example, in our portfolio you navigate forward and back time-wise, while in Yandex, if you sort search results by date, it’s the other way round.