Best IT Recipes

Jquery keynav plugin not working

I can’t move the shortcut label to any (any) web page whose locomotion is allowed only with the help of four arrow keys (and the fifth key (with key code of 13)). I do not know anything about what is the fifth key and its purpose. I use the keynav plugin for this purpose and additional code to insert a marker into it, but all in vain

+1
javascript jquery jquery-plugins
May 22 '11 at 5:56 a.m.
source share
1 answer

If this is the jquery.keynav plugin that you use, then it works fine even with the latest jQuery (v1.6.1). When calculating, ASCII is a character encoding scheme, and 13 is the number of the ↵ (Enter) key (see ASCII Control Characters ).

The jQuery plugin is for the arrow keys ↑ ↓ ← → to move the selection box and the ↵ key to launch .click() .

Here is a demo that uses the plugin. You will need to save the plugin code as jquery.keynav.js and place this file in the same directory as the demo code.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.keynav.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#keynavDemo div').keynav('keynav_focusbox','keynav_box'); $('#keynavDemo div:first').removeClass().addClass('keynav_focusbox'); // give first div focus (optional) $('#keynavDemo div').click(function() { alert('key 13'); }); }); </script> <style type="text/css"> #keynavDemo { position:relative; } .keynav_box, .keynav_focusbox { position:absolute; height:30px; width:30px; border:1px solid black; } .keynav_box { background-color:green; } .keynav_focusbox { background-color:red; } </style> </head> <body> <div id="keynavDemo"> <div class='keynav_box' style='left:0px'>0:0</div> <div class='keynav_box' style='left:50px'>0:1</div> <div class='keynav_box' style='left:100px'>0:2</div> <div class='keynav_box' style='left:150px'>0:3</div> <div class='keynav_box' style='left:200px'>0:4</div> <div class='keynav_box' style='left:250px'>0:5</div> <div class='keynav_box' style='left:300px'>0:6</div> <div class='keynav_box' style='left:350px'>0:7</div> <div class='keynav_box' style='left:400px'>0:8</div> <div class='keynav_box' style='left:450px'>0:9</div> </div> </body> </html>

Credit of the author of the plugin , where I "borrowed" a demo from :-)

+1
May 22 '11 at 13:33
source share


More articles:


All Articles