Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to get the arrow keys on the keyboard to trigger navigation (previous/next page) links within a blog

the script i've pieced together so far looks like this:

<script type="text/javascript">
/* KEYNAV */
document.onkeydown = function(e) {
if (! e) var e = window.event;
var code = e.charCode ? e.charCode : e.keyCode;
if (! e.shiftKey && ! e.ctrlKey && ! e.altKey && ! e.metaKey) {
if (code == Event.KEY_LEFT) {
if ($('previous_page_link')) location.href = $('previous_page_link').href;
} else if (code == Event.KEY_RIGHT) {
if ($('next_page_link')) location.href = $('next_page_link').href;}
}
}); 
</script>

and my html looks like this:

<p>
{block:PreviousPage}
<a id="previous_page_link" href="{PreviousPage}">PREVIOUS PAGE</a> 
{/block:PreviousPage}

{block:NextPage}
<a id="next_page_link" href="{NextPage}">NEXT PAGE</a>
{/block:NextPage}
</p>

the {PreviousPage} / {NextPage} code represents dynamic page links which are different depending on which page you are on. this particular question is specific to tumblr, but generally as well:

is there a way to get my left and right arrow keys to trigger these dynamic links?

thank you for reading and any help with this is greatly appreciated.

like image 530
dfogge Avatar asked Feb 14 '10 00:02

dfogge


People also ask

How do you navigate with arrow keys?

Arrow keys - Using the arrow keys on the keyboard, move the cursor up, down, left, or right in the document. Ctrl and Arrow keys - Holding down Ctrl while pressing the left or right arrow keys moves the cursor one word at a time.

Which keyboard buttons are used for navigation?

Navigation keys. These keys are used for moving around in documents or webpages and editing text. They include the arrow keys, Home, End, Page Up, Page Down, Delete, and Insert.

How do I change the settings on my arrow keys?

Fortunately, on most keyboards, you can toggle between the standard-setting and the alternate key setting by pressing FN + W keys.


2 Answers

function leftArrowPressed() {
   // Your stuff here
}

function rightArrowPressed() {
   // Your stuff here
}

document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37:
            leftArrowPressed();
            break;
        case 39:
            rightArrowPressed();
            break;
    }
};
like image 158
Tim Down Avatar answered Sep 20 '22 15:09

Tim Down


Use this to tell you the keyIdentifier attribute of the object.

<html>
<head>

<script type="text/javascript">
  document.onkeydown = function() {
  alert (event.keyIdentifier);
}; 
</script>
</head>
<body>
</body>
</html>

Then you can use if-then logic to ignore all key presses you aren't interested in, and wire the correct behavior to the ones you are.

The following will assign the left and right arrow keys to your links (based on the id of the anchor/link elements).

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
            document.onkeydown = function() 
                {
                    var j = event.keyIdentifier
                    if (j == "Right")
                        window.location = nextUrl
                    else if (j == "Left")
                        window.location = prevUrl            
                        }
                   });

      $(document).ready(function() {
                    var nextPage = $("#next_page_link")
                    var prevPage = $("#previous_page_link")
                    nextUrl = nextPage.attr("href")
                    prevUrl = prevPage.attr("href")
                });

</script>
</head>
<body>
<p>
    <a id="previous_page_link" href="http://www.google.com">Google</a> 
    <a id="next_page_link" href="http://www.yahoo.com">Yahoo</a>
</p>
</body>
</html>
like image 6
eric.christensen Avatar answered Sep 20 '22 15:09

eric.christensen