Using keyboard keys as navigation

Question

I'm working on a blog theme & I'd like to have keyboard navigation. I know it has something to do with the id of the keyboard keys, but I've looked for I think 3 hours now and still have not found an easy solution. Here are the keys that I'd like to press & what I'd like them to do.

J - Scroll down to next post
K - Scroll up to previous post
R - Opens a new tab with THAT post's reblog URL
P - Opens a new tab with THAT post's permalink URL

If anyone could help me with this it would be extremely helpful. Also, I know you can do something by setting the links up in the URL like <article data-reblog-url="http://reblogurl" data-permalink-url="{Permalink}"> but I have no clue how to make the browser open a new tab when the R & P keys are pressed with that data as the URL. Also, the J & K, I'd like the browser to smooth scroll to the top of the post including the post's margin-top.

If anyone could help me with the whole code I would appreciate it a TON. I know it's a lot and I'm probably going to get thumbs down for this, but like I said I've been trying for more than an hour and I just need an expert's help.

score 1 · Answer 1 · answered Jul 10 '12 at 01:24

1

More than an hour isn't a lot. But here's something to get you started:

You can reliably check which key was pressed by checking the which on the event object. I've made a demo so you can see how to check which key was pressed.

DEMO: http://jsfiddle.net/RXPhP/

Gotcha: The event is only fired on the element that has focus, so you're probably better tying it to body or document for navigation.

answered Jul 10 '12 at 01:24

ahren

16,803
5
50
70

This is helpful to find out keycodes, but I still need help with the scrolling to the posts, and also open the new tabs. I'm going to need a huge answer with a huge code. @ahren – James Charless Dickinson Jul 10 '12 at 01:26
1

for scrolling to posts, check out using scrollTo(yPosOfElement('some id')); and write your own yPosOfElement(id) function that gets the Y offset of an element – Augie Jul 10 '12 at 01:54
@JamesCharless - if I was to write the whole thing for you, that would defeat the purpose of it all (that purpose being you learning). You can combine information found in other places, or break down the problem into smaller parts. Here are some resources that will help you: http://stackoverflow.com/questions/726761/javascript-open-in-a-new-window-not-tab http://stackoverflow.com/questions/2905867/how-to-scroll-to-specific-item-using-jquery – ahren Jul 10 '12 at 02:05

score 0 · Answer 2 · answered Jul 10 '12 at 01:35

0

Something like this would give you a nice start. If you cannot use any libraries, then you do

<script>

var keyMap = [];
keyMap["j"] = 106;
keyMap["k"] = 107;
keyMap["r"] = 114;
keyMap["p"] = 112;

window.onkeypress = function (event) {
 var asciiVal = (event.which) ? event.which : event.keyCode;
 //Write a switch here to individually handle input.
}

answered Jul 10 '12 at 01:35

vishakvkt

864
6
7

I'd be using the jQuery library. – James Charless Dickinson Jul 10 '12 at 01:37

score -1 · Answer 3 · answered Jul 10 '12 at 01:26

-1

http://www.w3schools.com/jsref/event_onkeypress.asp for the keypress events. It allows you to execute js when a key is pressed. The js would receive an event event and that would tell you what key was pressed. Depending on the key press, you would do something else nothing

answered Jul 10 '12 at 01:26

reagan

653
1
4
16

hate all you want, that site is an incredible resource for people learning many languages – reagan Jul 10 '12 at 01:34
1

@Tats_innit from the site: `WE BELIEVE W3SCHOOLS IS HARMFUL TO THE WEB. WEB DEVELOPERS DESERVE BETTER.`, read on ;) – Andreas Wong Jul 10 '12 at 01:34
@reagan I'm not hating, I think you deserve better :), but it's all your call anyway :) – Andreas Wong Jul 10 '12 at 01:41
@SiGanteng Understood, but I'm not using this resource, just recommending it for a quick look-up. Just because it's name is W3 doesn't mean anything, but you can't deny that it's a great resource for finding really quick information concerning html/js/css etc – reagan Jul 10 '12 at 01:43
@reagan - w3fools.com isn't complaining about the name being W3, it's complaining about the information provided to developers being out of date and incorrect - it's absolutely detrimental to learning. – ahren Jul 10 '12 at 02:02
@ahren I haven't run into a single false piece of data on that website, so I have no problem recommending it for a quick overview of functions or concepts. – reagan Jul 10 '12 at 02:06
@ahren the content looks the same, except on a worse color scheme – reagan Jul 10 '12 at 02:21

Using keyboard keys as navigation

3 Answers3