How to move the rows to the left using with keyboard?

Hi guys,

I need your help as I has got a problem with my JavaScript. I got four rows of div with each different rows size. I can be able to move the yellow row to the right on each small row using with the keyboard right arrow button while i can be able to move the small rows to the left.

The problem I has got I can be able to move the yellow row to the big row, but I can't be able to move the big rows to the left when I press on the keyboard right arrow button.

var displayrowcount = 6; //is using for to hide other channels
var rowheight = 42;
var rowwidth = 1053; //is using for how much width the row is going to display while hide the other rows
var rowwidth1 = 1303; //is using for how much width the row is going to display while hide the other rows
var totalwidth_current = 0;
var totalwidth_current1 = 0;

You will see the list of channels with programme with blocks. If you move the yellow block using with the keyboard, you will see that it will move on any big where ever you press on the keyboard arrows button. My problem is I can be able to move the yellow block to the next two big blocks where they will move to the left, but I cannot be able to move the third and fourth block to the left.

Do you know how I can move on the second and third block to the left to allow me to see the third block and fourth block to the left using with the right arrow button of the keyboard?

It does for me; what browser is giving you the issue? I took a look @ it in Chrome and it lets you go left and right, in all rows. The only restriction; that I saw, was the up and down movements. Your code would only allow end user to go up/down rows, if the first block (of each row); was focused on.

It doesn't move the big block of the second rows to the left when I select on the third row. Can you please fix the code to allow me to move the big block to the left when I press on the right arrow button of the keyboard??

I am using firefox. Chrome are treated the same as firefox. I cannot move big rows to the left after the second rows.

It doesn't move the big block of the second rows to the left when I select on the third row.

Please try to elaborate; as I am not quit understanding what the issue is, that you are having.

Originally Posted by stephen100

Can you please fix the code to allow me to move the big block to the left when I press on the right arrow button of the keyboard??

No, but I will try to assist you in fixing the issue; once you elaborate on what the exact issue is or the effect you are going for here.

I am assuming you found this code somewhere; if so, what site did you get this from; so I can look @ what exactly this code was designed to accomplish. What it looks like is; that you are trying to create a TV guide or something, but if that's the case; you do not need to update the shows (onkeypress) until the end user reaches the end of a time slot.

Look at the two big rows, if you press on the right arrow of the keyboard twice, you will see the yellow row move to the next two rows and if you try to press on the right arrow button again, it supposed to be moving the first and second rows to the left to allow me to move the third and fourth rows but it doesn't allowed me to do.

So you are wanting the highlight indicator; to go the first cell of the next row; when the last cell of the current row, is currently highlighted and the right arrow key is pressed... correct? If that is the case; then maybe give each of the last cells (in each of the rows) a specific className (something like "end_cell"). Then (in the right arrow keyCode condition), set-up a condition (validating the className of the current highlighted cell) for your highlighter to go to the first cell of the next row; if current condition exist (if current highlighted cell's className is
"end_cell").