Grow your CSS skills. Land your dream job.

[Solved] Please help integrate keyboard nav to script…

  • # November 4, 2012 at 11:59 am

    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/

    # November 4, 2012 at 1:05 pm

    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);
    });​

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".