Comments on: Adding Keyboard Navigation

By: imthiyaz

imthiyaz — Thu, 15 Apr 2010 09:31:21 +0000

The demo is not working in Firefox 3.6.3. Any issue ?

By: Rija

Rija — Fri, 09 Apr 2010 08:19:29 +0000

Hello

Good example! It is a kind of carousel, isn'it?

1 - The problem is that clicking pagination link (1,2,3,4,5) is a redirection to #1, #2, ... so it is as loading new pages, there is many "keyboard navigation" in the browser history, a step backward leads to the #x 2- Difference in Internet Explorer (7)

I'm from a french-speaking country, I hope that I express well

By: Touchscreen monitor

Touchscreen monitor — Sun, 04 Apr 2010 18:32:47 +0000

It’s an amazing blog.This was a very well-written and enjoyable post to read.Thanks for the info sharing with us.The way you have described all the things are superb.Keep it up.Keep blogging.

By: Em!

Em! — Tue, 23 Mar 2010 17:27:22 +0000

Thanks for another great tutorial I have keyboard navigation in my website, which is a bit different from yours.

By: Clive Walker

Clive Walker — Thu, 04 Mar 2010 17:41:27 +0000

In a slightly different but related vein, the left/right arrow keys are used for site/page navigation on Crush + Lovely. I really like this method myself and would be interested to hear what other people think of this. Perhaps worthy of a screencast/tutorial?

By: Mathias Bynens

Mathias Bynens — Thu, 04 Mar 2010 15:59:10 +0000

Why are you binding the keyup events to $('document.documentElement')? $('document').keyup(function() { … }) seems to work just as well.

By: Armand

Armand — Mon, 01 Mar 2010 16:14:22 +0000

I really like your tutorials! I just discovered this website. This might sound silly but is there any way of me getting that awesome wallpaper you have in your videos?

By: Alex

Alex — Tue, 23 Feb 2010 11:38:47 +0000

I just found out about this site and I have to say, I love it! Keep up the good work man!

(I've just started learning jQuery so this site will be a huge help for me in the long run)

By: Ruana

Ruana — Fri, 12 Feb 2010 12:12:45 +0000

Sorry for the double post. I just saw that the code (html) didn't display correctly.

It's this part (no list that can be displayed inline-block?): div class="panel" div class="panel-wrapper" h2 class="title" 1 /h2> img src="image.jpg" / /div /div

I also changed to body to $(document.documentElement).keyup(function (event) ...

Ruana

By: Ruana

Ruana — Fri, 12 Feb 2010 12:00:50 +0000

Hi, I'd love to use your keyboard navigation. Unfortunately I have a problem: in your css you define a list for the nav-tabs that's supposed to display inline.

the CSS for the nav-tabs:

/* Tab nav */ .coda-nav ul li a.current { background: url('../images/nav-on.png') no-repeat center; }

/* Tabbed nav */ .coda-nav ul { clear: both; display: block; overflow: hidden; width: 80px; padding: 0; margin: 0px auto; margin-bottom: 23px;} .coda-nav ul li { display: inline-block; margin: 0; padding: 0; text-align: center;} .coda-nav ul li a { display: block; float: left; height: 12px; width: 12px; }

However, in the markup I don't see any list whatsoever.

HTML inside of the slider-wrapper:

...

Therefore the navigation displays vertically below the images. I'm good at coding (html and css) but a beginner in scripting. I was unable to make the nav-tabs display horizontally so are the tabs maybe somehow attached to the script? Or could it be a IE specific problem?

Ruana