topical media & game development

talk show tell print

#javascript-code-09-keyCode.js / js



  // Locate the first <li> element on the page
  var cur = document.getElementsByTagName(“li”)[0];
  
  // and make sure that it’s visible
  cur.style.display = ‘block’;
  
  // Watch for any keypresses on the page
  document.onkeypress = function(e){
      // Normalize the Event object
      e = e || window.event;
  
      // If the left or right arrow keys were pressed
      if ( e.keyCode == 37 || e.keyCode == 39 ) {
  
          // hide the currently displayed <li> element
          cur.style.display = ‘none’;
  
          // If the left arrow was pressed, find the previous <li> element
          // (or loop back around and go to the last one)
          if ( e.keyCode == 37 )
              cur = cur.previousSibling || cur.parentNode.lastChild;
  
          // If the right arrow key was pressed, find the next <li> element
          // or if we’re at the end, go back to the first <li> element
          else if ( e.keyCode == 39 )
              cur = cur.nextSibling || cur.parentNode.firstChild;
  
          // show the next <li> in the sequence
          cur.style.display = ‘block’;
      }
  
  };
  


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.