SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gallery Navigation with Cursor Keys

    Hey everyone,

    I'm very new to javascript, so I'm sure I'm overlooking some laughable detail here, but I can't figure out what it is. I'm using the following script:

    Code:
    <script type="text/JavaScript">
    document.onkeypress = getKey;
    var key = new Array();
    key['p'] = "http://www.domain.com/previousimageurl"
    key['n'] = "http://www.domain.com/nextimageurl"
    function getKey(keyStroke) {
       isNetscape=(document.layers);
       eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
       which = String.fromCharCode(eventChooser).toLowerCase();
       for (var i in key) if (which == i) window.location = key[i];
    }
    </script>
    That code works great as long as I'm navigating with letter keys. As soon as I try to switch it over to the cursor keys, however, things stop working. What would the correct key variables be to put for the arrow keys? I've tried using 37 and 39 with no luck, and also % and ' with no luck.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript">
                var key = new Array();
                    key[37] = 'Left';
                    key[39] = 'Right';
                    key[78] = 'N';
                    key[80] = 'P';
    
                function setup() {
                    document.onkeydown = function(e) {
                        if(!e)
                            e = window.event;
                        var kCode = (e.which) ? e.which : e.keyCode;
                        alert(key[kCode]);
                    }
                }
                window.onload = setup;
            </script>
        </head>
        <body>
            
            
    
        </body>
    </html>


  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2006
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! The code I'm using now (which works cross-browser, as far as I can tell):

    Code:
    <script type="text/JavaScript">
    var key = new Array();
    key[37] = "http://www.domain.com/previousimageurl";
    key[39] = "http://www.domain.com/nextimageurl";
    function setup() {
       document.onkeydown = function(e) {
          if(!e)
          e = window.event;
          var kCode = (e.which) ? e.which : e.keyCode;
          if (kCode in key) window.location = key[kCode];
       }
    }
    window.onload = setup;
    </script>
    Does that look clean enough to everyone?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •