Question

I am working on creating a simple site with images running vertically down the page. I would like to be able to smooth scroll between images via the keyboard arrow keys. Through the help of this forum, I have received the following suggestion (which does, indeed, work).

Example: http://jsfiddle.net/aVvQF/5/

Question: How can one smooth scroll up and down between objects on a page with arrow keys?

However, I need a bit of additional functionality. This setup prevents the default action of all keyboard function. I would only like the default action changed for the left and right arrow keys. I decided to use left and right, instead of up and down, so that the standard up and down arrow navigation and page up and page down will not be affected. How can the code change to allow the expected use of all keys except the left and right arrows?

Also, this setup only seems to work if there are no other tags between the ‘img’ tags. However, I need to be able to place links, text and line breaks between or around the images. How can the code be adjusted to allow for this? Or, alternatively, would it work better to put the image and the requisite text and links each in ‘div’ classes running down the page (right now it is all in one ‘div’) and then have the keyboard navigation go between ‘div’s?

Thank you.

Answer 1

You should do something like below for allowing all other keys except left and right arrow keys at the beginning of your function ->

var keyCode = e.keyCode;

//return if it is not left/right arrow key
if (keyCode != 39 && keyCode != 37) {
    return;
}

I modified your html and script a bit to make it work. See my approach jsFiddle here

The next() and next([selector]) works differently. The former next simply gets the next sibling, where else the later tries to get the matching list first ($(‘.active’) in your case and picks the next matching element from there (which is 0).

For example,

 <p class="selected active">Hello Again</p>
 <span class="log" >Test</span>
 <p class="selected">Hello Again</p>
 <div><span>And Again</span></div>

And this $("p.selected.active").next('p.selected') may look like it is going to fetch the next p.selected, but it doesn’t. Looks to me like jQuery iterates through $("p.selected.active") to find matching ‘p.selected’ which is going to return empty.

I used .next() and added a where clause to find next img tag in the siblings,

 $targetElement = $('.active').next();

 while ($targetElement.length != 0 && $targetElement.hasClass('img') == false) {
       $targetElement = $targetElement.next();
 } 

I hope it helps

Edit:

Check here.

1. Add isAnimating flag to avoid spamming of keydown.
2. Modified css .active img{ border: 2px dotted red; }.
3. Changed the html a bit.