arrow key navigation problem in html/jquery

i have an application which has 3X4 matrix of images using arrow key(up,right,top,bottom) i move among images. if iamge is focused for 1sec that particular image will zoomin. as focus moves to next cell image zoomout. initially focus will be in first cell.

now my problem are: 1) even though i have navigation module (as i said initially focus in first cell of table) using arrow keys to move from initial cell is not working. first i need to use tab only then i can 开发者_JAVA技巧move using arrow keys

2)say for example focus is in initial cell if dont move focus any where else for 1sec firstimage should zoomin. which is not happening in my case.

3) say for example im in first cell and if i press up (according to my application ) it should remain in same cell as there is no image to jump. but where as in my application focus goes off. again i have to reload page in order to get focus.how do i over come this issue.

could some one help me solve this issue. have look at demo i have enclosed.

thanks in advance

demo

I would suggest consolidating any code that requires jQuery into the $(document).ready(function () { // your code here }); function. This should eliminate dependency issues. Also, you should consider declaring any variables that might be used throughout your app, in the first part of your ready function. I have a working example from your code here. Hope this helps.

Edit: I updated the jsfiddle to help you with the upkey issue you are experiencing. Take a look at the code under your upkey event.