treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Please help integrate keyboard nav to script…

  • Howdy all,

    Looking to integrate keyboard navigation to the following code. My goal is to mimic the behavior of the mouse wheel effect — with keyboard navigation (obviously).

    Any help/suggestions is greatly appreciated. Thanks.

    jsFiddle: http://jsfiddle.net/pikappa/Sg8JQ/

  • Solved this if anybody is interested. The following code is simply combined with the above jsFiddle. Cheers.

    $(window).keydown(function(e) {
       //prevent default arrow key behavior
      var $targetElement;
      //right
      if (e.keyCode == 39) {
          $targetElement = $('.active').next('div');
          e.preventDefault();
      }
      //left
      else if (e.keyCode == 37) {
          $targetElement = $('.active').prev('div');
          e.preventDefault();
      } 
    
      if (!$targetElement || !$targetElement.length===0) {
          return;
      }
      $('.active').removeClass('active');
      $targetElement.addClass('active');
    
      //scroll element into view    
      $('html, body').clearQueue().animate({
          scrollTop: $targetElement.offset().top
      }, 1000);
    

    });​