0

I created a website very simmilar to http://themeforest.s3.amazonaws.com/116_parallax/tutorial-source-files/tut-index.html. Now i want to add key navigation. So when I push arrow right it will go to box2, when arrow left go back to Home. I tried this tutorial http://jqueryfordesigners.com/adding-keyboard-navigation/

So:

$().ready(function() { $(document.documentElement).keyup(function (event) { var direction = null; // handle cursor keys if (event.keyCode == 37) { // go left direction = 'prev'; } else if (event.keyCode == 39) { // go right direction = 'next'; } if (direction != null) { $('.coda-slider-wrapper ul a#current').parent()[direction]().find('a').click(); } }); }); 

And

<div id="header" class="coda-slider-wrapper"> <h1 id="logo">Scrolling Clouds</h1> <ul id="menu"> <li><a href="#box1" class="link" id="current">Home</a></li> <li><a href="#box2" class="link">Box 2</a></li> <li><a href="#box3" class="link">Box 3</a></li> <li><a href="#box4" class="link">Box 4</a></li> </ul> </div> 

Unfortunetly it wont work properly becouse only one elemnt has id="current". How to get it working? How to add dynamic id? Please write me all the code.

Thx for help.

1 Answer 1

2

You need to set #current on whatever link is current. To do that, use code like this:

$(function(){ var list = $('.coda-slider-wrapper ul'); list.find('a').click(function(e){ list.find('a').removeAttr('id'); this.id = 'current'; }); }); 
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.