Tumblr Style Keyboard Navigation

Question

I don't know much about how it works. My guess is JavaScript, but anyway.

When you go to your dashboard in Tumblr you can go back and forth between pages in your feed with your keyboard. ← to go forward to newer posts and → to go to older posts.

Can someone help me figure out how they do this.

Answer 1

Well, what you have do is set up a "keyup" event listener for your document element that reads which key your user pressed, then execute an action if the keycode matches the code for your left or right keys.

The "left" key's keycode is 37. the right is 39. So the listener for the "left" key you would set up is this:

document.onkeyup = function(e){
  if (e.keyCode == 37) { //"left" key.
    //your code
  }
  if (e.keyCode == 39) { //"right" key.
    //your code
  }
}

Answer 2

Figured it out:

<script type="text/javascript">
document.onkeyup = KeyCheck;       

    function KeyCheck(e)
        {
           var KeyID = (window.event) ? event.keyCode : e.keyCode;

           switch(KeyID)
           {

              case 37:
              window.location = "{PreviousPage}";
              break;


              case 39:
              window.location = "{NextPage}";
              break;
           }
        }
</script>