[Code] Keyboard navigation

Working on a new template and need help? Come here for support.

Moderator: Help Desk Team

[Code] Keyboard navigation

Postby eishiya » December 27th, 2013, 8:11 pm

I thought there was a forum thread for this already, but apparently not!

This JavaScript code allows the reader to go to the Next and Previous pages by pressing the Right and Left arrow keys on the keyboard, respectively. If the reader doesn't have JavaScript enabled, it degrades gracefully (meaning, it doesn't break anything).

Copy+paste this code into your Comic Page Template. I recommend putting it at the very top or the very bottom, though it doesn't really matter.

Code: Select all
<a id="jsnavnext" href="{NAV_NEXT}" style="display: none;"></a>
<a id="jsnavprev" href="{NAV_PREV}" style="display: none;"></a>
<script type="text/javascript">
function navTo(id) {
   var url = document.getElementById(id).href;
if(url != '' && url != '#' && url != "{COMIC_URL}" && url != "{COMIC_URL}#comic_area")
      window.location = url;

document.onkeydown = function(e) {
   if(!e) e = window.event;
   switch (e.keyCode) {
      case 37: //left arrow
      case 39: //right arrow

That's it! You should now have keyboard navigation.
It should work correctly regardless of whether you have Auto-Hide Navigation enabled or disabled.

Possible Conflicts:
1. If you have any other code that overwrites the document.onkeydown function (that is, reacts to key presses), there will be conflicts, one will override the other(s). You should be able to combine the two functions to work together by rewriting them into a single function as long as they react to different key presses.

2. Some 3rd party comment systems such as Disqus allow users to type their comments directly on the page, instead of on another page or in a new window like SJ's native system. If they use the arrow keys to go back and forth in their text (such as to correct typos), they will trigger the navigation and leave the current page. Because of this, I do not recommend using this code if you have one of these comment systems. It's possible to create a workaround that doesn't trigger navigation if the user's focus is on one of these 3rd party comment fields, but it depends highly on the specific system.

Advanced Users:
1. If you have a Right-to-Left comic, you may want to reverse the button assignments, so that the Left arrow is Next and the Right arrow is Prev. This is easy to do, just change the original 37 to 39 and the original 39 to 37.

2. The purpose of the two <a> elements at the top of the code is to provide a source of (valid) URLs to the script, and to do so in a way that can be copy+pasted in one lump of code. If you want, you can get rid of them, as long as you assign the two IDs ("jsnavnext", "jsnavprev") to your existing Next and Prev navigation. Since these are IDs, they can only be assigned to one element each, so if you have multiple sets of navigation, pick one to assign them to.
There isn't much need to do this, but if you like your code super-clean, then you might not want two extra <a> elements floating around.

3. If you want to have the keyboard navigation skip your header and auto-scroll down to the comic page (very nice for binge-reading), add an anchor ID right after the {NAV_NEXT} and {NAV_PREV} in the two <a> elements. For templates using {comic_image.FORMATTED}, that's #comic_area, but it may be something else (or you may have to create your own anchor) if you're not using that.
User avatar
Posts: 9692
Joined: December 5th, 2009, 11:17 am

Re: [Code] Keyboard navigation

Postby Tanako » January 7th, 2014, 1:42 am

Wow I have always wondered about this and though why the feature was never available. this makes it easier for my readers to navigate faster :) thanks a lot, this is really good and it helps. thanks for sharing. :)
User avatar
Posts: 107
Joined: June 14th, 2010, 7:06 pm

Re: [Code] Keyboard navigation

Postby mitchellbravo » January 7th, 2014, 3:01 pm

Magnificent! Whenever I force my boyfriend to read my new chapter he gets frustrated that he can't just arrow through. This will help XD
oly: we draw stories about imaginary people
Do not feet infants to honey under one year of age.
me: Posh, Baby, Sporty, and Scary Ham
robybang: Together they're Spiced Ham
User avatar
Posts: 6438
Joined: October 11th, 2010, 1:31 pm
Location: too tired

Return to Template Development & Support

Who is online

Users browsing this forum: No registered users and 4 guests