It was one of the best features of Google Reader and Google GMail: the keyboard shortcuts, specially the ones to navigate through messages or posts (n = next, p = previous).
I decided it was time to implement it on spaniards.es, so here is the code I used. So far it only navigates through comments back and forth on the same page (does not go to next page or so). I am planning to add other shortcuts soon.
-
$(document).keyup(function(event) {
-
-
if (event.target.tagName == "INPUT" ||
-
event.target.tagName == "TEXTAREA")
-
return;
-
-
var selected = $('.comment-selected');
-
-
// Next comment
-
if (event.keyCode == 78) {
-
if (selected.length) {
-
selected.removeClass('comment-selected');
-
selected = selected.nextAll('.comment:first');
-
selected.addClass('comment-selected');
-
} else {
-
selected = $('.comment:first').addClass('comment-selected');
-
}
-
if (selected.length) {
-
window.scrollTo(0, selected.offset().top);
-
}
-
return;
-
}
-
-
// Previous comment
-
if (event.keyCode == 80) {
-
if (selected.length) {
-
selected.removeClass('comment-selected');
-
selected = selected.prevAll('.comment:first');
-
selected.addClass('comment-selected');
-
} else {
-
selected = $('.comment:last').addClass('comment-selected');
-
}
-
if (selected.length) {
-
window.scrollTo(0, selected.offset().top);
-
}
-
return;
-
}
-
});
As you can see, it is important to leave the input and textarea fields alone, so the keyboard shortcuts don’t interfere with the user typing some text. With a little bit of CSS the selected comment can be displayed with a different border color or background. And that’s it!
Check an example topic at www.spaniards.es
Shorcuts are great in general, but I think is a good practice to inform the users about that feature and let them disable shorcuts if they want to.
The problem on the internet is that each website behaves it’s own way, and although ‘p’ and ‘n’ are great choosen characters for that, if the users don’t know about it, they will never use them (I think that’s why in GMail a small line appears on the bottom of the page explaining some shorcuts and a “learn more” button).
BTW, shortcuts work great at spaniards ;)
Thanks for the tip. That’s a good idea :)