i have keystroke function open webpage based on key press. example key press of "alt+s" open web page issue not seem work in google chrome browser.
i need work in cant seem work properly.
<html> <script type='text/javascript'>//<![cdata[ $(window).load(function(){ $(document).ready(function() { // hides divs class container // , displays 1 id 'home' $(".container").css("display", "none"); $("#home").css("display", "block"); // makes navigation work after containers have bee hidden showvialink($("ul#navigation li a")); // listens navigation keypress activity $(document).keypress(function(e) { e.preventdefault(); if (e.altkey) { switch (e.which) { // user presses "a" case 97: showviakeypress("#home"); break; // user presses "s" key case 115: showviakeypress("#about"); break; // user presses "d" key case 100: showviakeypress("#contact"); break; // user presses "f" key case 102: showviakeypress("#awards"); break; // user presses "g" key case 103: showviakeypress("#links"); } } }); }); // shows given element , hides others function showviakeypress(element_id) { $(".container").css("display", "none"); // if multiple keys pressed rapidly hide last pressed key's div $(".container").hide(1); $(element_id).slidedown("slow"); } // shows proper div depending on link 'href' function showvialink(array) { array.each(function(i) { $(this).click(function() { var target = $(this).attr("href"); $(".container").css("display", "none"); $(target).slidedown("slow"); }); }); } });//]]> </script> </head> <body> <div id="header"> <h1>jquery keypress navigation</h1> <ul id="navigation"> <li><a href="#home">home ( )</a></li> <li><a href="#about">about ( s )</a></li> <li><a href="#contact">contact ( d )</a></li> <li><a href="#awards">awards ( f )</a></li> <li><a href="#links">links ( g )</a></li> </ul> </div> <div style="display: block;" id="home" class="container"> <h2>welcome!</h2> <p>thanks taking time visit site</p> </div> <div style="display: none;" id="about" class="container"> <h2>about me</h2> <p>web design more job, more hobby.</p> </div> <div style="display: none;" id="contact" class="container"> <h2>no spam please</h2> <p>gifts? job offers? compliments? welcome.</p> </div> <div style="display: none;" id="awards" class="container"> <h2>awards, many ...</h2> <p>if count of them, here quite while. wish.</p> </div> <div style="display: none;" id="links" class="container"> <h2>cool sites</h2> <p>make sure pay visit these sites:</p> </div> <div id="footer"> <p>&nbps;</p> </div> </body> </html>
the issue lies in difference between keydown , keypress. alt key changes keycode value when use keypress.
- keypress
alt+a= 229 - keypress
a= 97 - keydown
alt+a= 65 - keydown
a= 65
from docs:
note keypress docs, keydown , keyup provide code indicating key pressed, while keypress indicates character entered. example, lowercase "a" reported 65 keydown , keyup, 97 keypress. uppercase "a" reported 65 events. because of distinction, when catching special keystrokes such arrow keys,
.keydown()or.keyup()better choice.
you can fix either changing keydown listener (ala @adeneo's suggestion) or edit keycodes appropriately.
Comments
Post a Comment