Earlier I wrote about Attaching hotkeys to links and how that now allows you to navigate my posts and pages using the left arrow key and right arrow key.
As very few will actually figure out this functionality I needed something to indicate it was there. Hence, the representation of keys and their functions that now sits at the top right of each of my pages. They do a bit more than just telling you there are hotkeys. Go ahead, press your left arrow key and watch its graphic at the top of the page. Waah, isn't that something. I think so. (In case it is broken, the graphics of the keys light up as you press them)
It is a very simple extention to my keypress script and will look familiar if you also checked out the layout resize script.
-
case 37:
-
if (document.getElementById('prev').childNodes[0]) {
-
document.getElementById('keyleft').className = 'left_active';
-
window.location.href = document.getElementById('prev').childNodes[0].getAttribute('href');
-
} else {
-
document.getElementById('keyleft').className = 'left_inactive';
-
}
-
break;
That is the case for the left arrow key from the keypress script. Lines 3 and 6 are new, as is the else part of the if statement. I already checked to make sure there was a previous page to go to, that is what the if statement does. When there is a previous page to go to, I add a class to the block that contains my left arrow key description. When there is no previous page, I also add a class, but a different one. Here is the xhtml:
-
<div id="keynav_legend">
-
<div id="keyleft"><span>Left Key</span><br />Previous page/post</div>
-
<div id="keyright"><span>Right Key</span><br />Next page/post</div>
-
<div id="keyhome"><span>Home Key</span><br />To the front page</div>
-
</div>
Pretty basic. The rest of the magic is in the CSS. Here are the three styles for div#keyleft:
-
#keyleft {
-
background: url('images/oddkey_left.gif') no-repeat 0 0;
-
height: 30px;
-
padding: 6px 4px 0 37px;
-
float: left;
-
}
-
#keynav_legend div.left_active {
-
background-position: 0 -37px !important;
-
}
-
#keynav_legend div.left_inactive {
-
background-position: 0 -74px !important;
-
}
You will see that there is only one background image. It contains all three states in one graphic. I do this so that no preloading has to be done. When using three seperate background images, some browsers will not load them, even after the div received its class from the javascript. To toggle the various states, I set a new background-position to move different parts of the image into view. Something also covered by ALA's CSS Sprites. Add !important to make sure the new position overrules any other.
The best part is that I did not have to leave my javascript safety zone to figure out how to reset the graphic as the hotkeys will load a new page, effectively resetting the graphics to their initial state. When a hotkey is pressed that has no action at the current page, the key lights up red. It would be nice if it resets after a moment in that case. That is, however, something for later.
Feel free to implement the hotkey behavior where ever you like. Every site that lets me browse posts and pages with just the keys makes my day.
This article is mentioned at: Infected-FX » Hotkey navigation
On October 12th, 2006 at 14:43
Una curiosa forma de navegar en tu sitio, utilizando las teclas anterior, siguiente y home puedes navegar por páginas ó post [...]
Anthony says:
On October 23rd, 2006 at 6:40
I am really impressed with this implementation, and I think it adds a great deal to the overall usefulness of a site. That you have implemented it with such style is a very nice find for me. Kudos.
Michael says:
On November 5th, 2006 at 7:33
Most excellent!
Only, I occasionally found myself trying to click on the hotkey ‘legend’ as well. Why not actually make them links, too - the hover state graphics are already done.
Regardless - well done.