Advanced keypress navigation with jQuery

Not working for me

Bruce — Mon, 06 Jul 2009 10:12:17 +0100

Hi Marco, Just thought I\'d let you know that your demo on partially works for me on an Intel MacBook Pro (mid-2009) with OS X 10.5.7 and Safari 4.0.1. Enter key works, navigation by mouse works, but the arrow keys on my built-in or attached keyboard do nothing. Arrow keys do work for me in Firefox 3.5 for Mac however.

Fix

Marco — Mon, 06 Jul 2009 10:36:14 +0100

Hi Bruce! First, thanks for your comment. I checked and you\'re totally right. I did find it strange, because I want 100% positive it worked on Safari before. After some Googling, I found out why it stopped working. Check out the following code: [quote]$(document).keypress(function(e) {[/quote] For some reason, when \"keypress\" is used, Safari can\'t retrieve the keyCode for the arrow keys. This is how the function looked before and does work on Safari: [quote]$(document).keydown(function(e) {[/quote] When using \"keydown\", it does work fine on Safari. The downside of \"keydown\" is, that when you hold the arrow key, it doesn\'t move to the next object. That\'s why I changed it to \"keypress\". Anyway, thanks for noticing and I hope you can work with the fix!

A potential optimization

Nathan Logan — Mon, 06 Jul 2009 21:19:59 +0100

Good stuff. I like how you handled several things. By way of optimization, you could supplant your use of .data for [url=http://docs.jquery.com/Core/index#subject].index[/url]. That is, in place of this code: [quote]currentSelection = $(this).data(\"number\" );[/quote] You could use: [quote]var currentSelection = $(\"#menu ul li a\" ).index(this);[/quote] This would also allow you to completely remove this code: [quote]for(var i = 0; i < $(\"#menu ul li a\" ).size(); i++) { $(\"#menu ul li a\" ).eq(i).data(\"number\", i); }[/quote] The gains are that you are using native jQuery functions and that you keep the data object namespace clear of potential conflicts (particularly since \"number\" could be a popular one). Just an idea - but nicely done!

Good thinking, thanks!

Marco — Mon, 06 Jul 2009 21:26:48 +0100

Hi Nathan! First off, thanks for your comment, feedback and compliment. You\'re totally right, that would absolutely be much prettier. I wasn\'t aware of the \".index\" method (still learning jQuery every day, getting to know it better and better ;) ), so thanks for letting me know. All I knew is that I needed the \"index\" and I placed it in the \"data\", instead of using the (native) \"index\" function. Anyhow, learned something new (again) today; Thanks a lot!

Raymond Selda — Tue, 07 Jul 2009 14:39:20 +0100

Very nice tutorial. I will definitely keep this in mind. Thanks for sharing.

Its not wokring in IE

Qamer — Fri, 17 Jul 2009 08:35:12 +0100

Hi I am not able to run this key press navigation in IE, i am using IE 7. Please help me to figure out this issue. Qamer

Phaoloo — Sun, 19 Jul 2009 14:51:12 +0100

Hmm, it might not work on IE, but others is OK. Thanks for the tip.

Great Work

TKF — Sat, 08 Aug 2009 00:50:24 +0100

Thanks for this example,using it i modified fancy apple.com style suggestion so it is now supports keyboard. I had some problems with addclass. Don\'t know why when class was dynamically added to suggestions div there was no style change. Instead of adding style i used changing css property.

TKF — Sat, 08 Aug 2009 00:59:50 +0100

For me example also didn\'t work in IE6. I modified it, if you use keyup instead of keydown it will work fine in IE. But as Marco said if you hold the key nothing will happen.

Very Nice

Jannis Gerlinger — Mon, 02 Nov 2009 14:22:24 +0100

I like it! Very nice - keep going !

JB — Wed, 04 Nov 2009 22:23:26 +0100

How do I enable the first item of my list to have the .itemhover? I tried this line of code prior to the start of the functions, but it didn\'t work (using FF3.5): [code]$(\"#menu ul li a:first\").addClass(\"itemhover\");[/code]

code

Mariano — Fri, 06 Nov 2009 08:13:28 +0100

I\'ve failed to modify the previous code for apple style suggestion with this one. Could you provide the code you wrote? Thanks!