navigation with jquery -


Can you do that, as you can with MooTools

In jQuery? So you can navigate this way and use the left / right key?

Be sure you can.

Simply capture the key down 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 can load a new page through // Ajax and see the animate of // // You can do something different Case 39: // Your Right Keycode Case 38: // Your Keycode Case 40: // Your Downloaded Keycode}})  

Edit: a car below In Atmk solutions with whom you can run. Basically this solution creates some divs and fade them out and using the left and right arrow keys.

  & lt; Html & gt; & Lt; Script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" & gt; & Lt; / Script & gt; & Lt; Script type = "text / javascript" & gt; $ (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 true communicationboxiexx = currentconnectboxxx == 3? 1: currentconventionboxxx + 1; $ ("#f" + current controlbox index) .togleclauses ("controlbox highlights"); $ ("# Fade "+ currentControlBoxIndex") Fade ("slow", function () {$ (this) .toggleClass ("controlBoxHighlight");}); switch (evt.keyCode) {Case 37: $ ("#f" + leftControlBoxIndex) Toggle Class (" Controlbox Highlight "); $ (" #five "+ left controlbox index) .Fadeine (" slow ", function () {$ (this) .toggleClass (" controlBoxHighlight ");}); brakes; Case 39: // Your The right keycode $ ("#F" + Correct Controllball Index) Toggle Class ("Control Box Light"); $ ("# Fade" + Right Controlbox Index) .Fade in ("slow", function () ($ (this ). Toggleclouds ("Controlbox Highlight");}); break; }}); }); & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; # Control (position: absolute; left: 100px; bottom: 100px; z-index: 500;} control box {border: 1px solid # 000000; margin: 10px; display area; swim left; width: 20px; height : 20px; Text align: center;}. ControlBoxHighlight {color: #FFFFFF; background color: # 000000;} FadeDiv {status: full; left: 0px; top: 0px; width: 100%; height: 100%; }. FadeDivTop {z-index: 100;} FadeDivBottom {z-index: -100;}  body; gt; id = "fade1" class = "fadeDiv FadeDivTop "style =" background-color: # ff0000; "& gt; & lt; / div & gt; Lt; div id = "fade2" class = "fadeDiv" style = "background color: # 00FF00;"> 

Comments

Popular posts from this blog

windows - Heroku throws SQLITE3 Read only exception -

lex - Building a lexical Analyzer in Java -

python - rename keys in a dictionary -