Home/ Questions/Q 868899
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T10:13:13+00:00

Can you do this, like you can with MooTools http://ryanflorence.com/slideshow/#navigation-demo in jQuery? So you

  • 0

Can you do this, like you can with MooTools

http://ryanflorence.com/slideshow/#navigation-demo

in jQuery? So you can navigate like that and use left/right keys?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    sure you could.

    just capture the keydown event for the document

    $(document).keydown(function(evt) {
   evt = evt || event;
   switch (evt.keycode) {
      case 37: //your left keycode
          //now in each case statement you could 
          //load a new page via ajax and animate 
          //the new page into view.
          // or you could do something different. 

      case 39: //your right keycode

      case 38: //your up keycode

      case 40: //your down keycode
   }

})

    Edited: Below is a functional solution that you can play with. Basically this solution creates some divs and fades them in and out using the left and right arrow keys.

    <html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready( function () {
        $(document).keydown(function(evt) {
            evt = evt || event;
            var currentControlBoxIndex = parseInt($(".controlBox.controlBoxHighlight").text(), 10);
            var leftControlBoxIndex = currentControlBoxIndex == 1 ? 3 : currentControlBoxIndex - 1;
            var rightControlBoxIndex = currentControlBoxIndex == 3 ? 1 : currentControlBoxIndex + 1;
            $("#f" + currentControlBoxIndex).toggleClass("controlBoxHighlight");
            $("#fade" + currentControlBoxIndex).fadeOut("slow", function () {
                $(this).toggleClass("controlBoxHighlight");
            });

            switch (evt.keyCode) {
                case 37: 
                    $("#f" + leftControlBoxIndex).toggleClass("controlBoxHighlight");
                    $("#fade" + leftControlBoxIndex).fadeIn("slow", function () {
                        $(this).toggleClass("controlBoxHighlight");
                    });

                    break;
                case 39: //your right keycode 
                    $("#f" + rightControlBoxIndex).toggleClass("controlBoxHighlight");
                    $("#fade" + rightControlBoxIndex).fadeIn("slow", function () {
                        $(this).toggleClass("controlBoxHighlight");
                    });
                    break;
            }
       });
    });
</script>
<style type="text/css">
    #controls {
        position:absolute;
        left:100px;
        bottom: 100px;
        z-index: 500;
    }
    .controlBox {
        border: 1px solid #000000;
        margin: 10px;
        display: block;
        float: left;
        width: 20px;
        height:20px;
        text-align: center;
    }
    .controlBoxHighlight{
        color: #FFFFFF;
        background-color: #000000;
    }
    .fadeDiv {
        position:absolute;
        left:0px;
        top:0px;
        width:100%;
        height:100%;
    }
    .fadeDivTop {
        z-index: 100;
    }
    .fadeDivBottom {
        z-index: -100;
    }
</style>
<body>
    <div id="fade1" class="fadeDiv fadeDivTop" style="background-color:#FF0000;">
    </div>
    <div id="fade2" class="fadeDiv" style="background-color:#00FF00;">
    </div>
    <div id="fade3" class="fadeDiv" style="background-color:#0000FF;">
    </div>
    <div id ="controls">
        <span id="f1" class="controlBox controlBoxHighlight">1</span>
        <span id="f2" class="controlBox">2</span>
        <span id="f3" class="controlBox">3</span>
    </div>
</div>


</body>
</html>
    • 0