Recently I was selected to win a free googletv as part of their tv web developers program. Layout wise I don’t expect much to be different that any other device with a 1080p monitor, but the controller has some other media buttons that I though might have some use, and with a lack of a mouse, alternative control methods came into mind.
The devices media buttons are, unfortunately, outside of my testing ability because I can’t replicate their input, but assume the control unit has some basic arrow inputs* then it should be no problem to highjack those to do my bidding.
I’ve done a few things and decided to upload them to the Examples tab under javascript (once, you know, I program all the stuff and make it work, havent done that yet) so ou can check them out, all the code is in the file so it should be easy to look at and examine the construction process. The simplest (and probably the most convient to use) is below in all it’s coded glory. To make it short, it allows you to go between H1 tags with the Left and Right keyboard buttons.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function keycatch(){ var keypress = event.keyCode var h1tags = document.body.getElementsByTagName("h1"); switch(keypress){ case 37: // Left if(currentpos!=0){ currentpos = currentpos-1; h1tags[currentpos].scrollIntoView(); } return false break; case 39: // Right if(h1tags[currentpos+1]!=undefined){ currentpos = currentpos+1; h1tags[currentpos].scrollIntoView(); } return false break; } } |
Snipplr: http://snipplr.com/view/45909/javascript-keyboard-navigation/
There is a current problem with the system, if you manually scroll past a H1 tag then it doesn’t register it and press the next one may ump you back up the document. I’m pretty sure I have a solution but havent really had the time to implement it, and so It’s not in this code, I’ll update if/when I do fix that downside and pose the code.
You can view this code, along with some other modifications of the same concept on the example page. Also note, the example that uses this has been modified, it uses the H2 tag to work better with how project guttenburg lays out it’s HTML files.
*The device given to me is a Logitech Revue, which actually comes with a full keyboard control, but since I love my Logitech Harmony remote I’m much more likely to use that instead of whip out a keyboard. And I can see a time in the future where full keybaord layouts are probably either less common or, not particularly convient.
UPDATE: 8:58PM
the examples are up on the example page now, looks a little baren, just not enough time to fill it properly.