Accessing links in a table with arrow keys

[Mephist0222]

I am making an application that allows users to use the key board to interface with it. I am using YUI for the key listening and have almost all of my functions working. The one that seems impossible right now is I have a search result page where links to items are in a table. I need functions that I can call from my YUI key listener to do the following:

Right arrow function: Gets the next link on the page in a defined table. If the selected one is in a TD at the end of the row, this should go to the first link in the next row. At the last item in the last row, it should go to the first item (this is a nice to have)

Down arrow function: Goes to the link in the current position in the next row. For example if you are on the 3rd link in the 2nd row, and hit down, you will be in the 3rd link in the 3rd row. On the last row, you will go to the first row (this is a nice to have)

Left arrow function: Get the previous link in a defined table. If the current link is the first link, the function should go to the last link in the previous row. If it is the first item, this should go to the last item in the last row (this is a nice to have)

Up arrow function: Goes to the link in the current position in the previous row. For example if you are on the 3rd link in the 2nd row, and hit down, you will be in the 3rd link in the 1st row. On the first row, you will go to the last row (this is a nice to have)


I have tried this 100 different ways, arrays, hashes ... and it is not working. I am open to using divs, I am using tables so I can select rows of data

 

[BillyRayPreachersSon]

It sounds like it shouldn't be too tricky. Do you always know your "current" row / column? If so, surely you can just add 1 onto your col / row position when the relevant cursor key is pressed, and then do simple boundary checking to advance to the next line / first column as needed?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Mephist0222]

I will always know the first item, so the starting point is easy, but the tricky thing with doing the + 1 is I may not know how many items there are to define the next row. Also the up and down functions are not paning out.

 

[BillyRayPreachersSon]

So not all rows have the same number of cells?



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Mephist0222]

Correct, it will be based on how many results come back in the search query.

 

[BillyRayPreachersSon]

So if not all rows have the same number of cells, could you give us an idea of your end table layout? I was assuming something like this:

+------+------+------+------+
| Link | Link | Link | Link | 
+------+------+------+------+
| Link | Link | Link | Link | 
+------+------+------+------+
| Link | Link | Link | Link | 
+------+------+------+------+

But you're saying it could be like this:

+------+------+------+------+
| Link |     Link           | 
+------+------+------+------+
|    Link     | Link | Link | 
+------+------+------+------+
| Link | Link |   Link      | 
+------+------+------+------+

Well, at least I'm taking that to be what you mean when you say not all rows have the same number of cells (i.e. it could be completely random).

If that's not it, perhaps you could give us a better idea, because right now, I have no idea.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Mephist0222]

It won't be quite as complex. I know there will be a max of 4 items in a row, but the next row could have 1 - 4 items in it.

| item | item | item | item |
| item | item |

So it gets trickie. If I am on row one item 1 and hit the down arow, I will go to row 2 item 1.

But since you will never now how many items there are, it could be 1 or 50, the function needs to be able to create and store arays of how many items there are and have the right math to move around.

Hope this helps, thank you for taking time to help with this.

 

[BillyRayPreachersSon]

So what behaviour do you want if, using your above example, you hit "down" when in link 3 on row 1?

Help us out here... you seem to be giving very sketchy details of what you need, and I feel I'm having to tease more and more out of you as we go along. Have you thought out how you want this to work?

Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Mephist0222]

I thought I was pretty explicit in my descriptions, but I am sorry if I was not. It is always a little tricky explaining things in email. Forums need a white board tool

The scenario you mentioned is something that would fall into my nice to haves for each function. It would be great if the functions new how to go from the last row to the first if you hit the down arrow, or to
| item | item | item | item |
| item | item |
go to row 2 item 1 if you are on row 1 item 3. I am fine trying to add this functionality later and just have the down arrow do nothing if there is no corresponding item in the next row, or stop on the last row.

Let me know if IM might be a good way to chat about this a little.

 

[BillyRayPreachersSon]

Every table has a "rows" collection (which has a length), and each "row" has a "cells" collection, which also has a length. This means you can easily iterate over the table:

var theTable = document.getElementById('yourTableId');
var rows = theTable.rows;

for (var rowLoop=0; rowLoop<rows.length; rowLoop++) {
   var cols = rows[rowLoop].cells;
   for (var colLoop=0; colLoop<cols.length; colLoop++) {
      var cell = cols[colLoop];

      // do something with "cell" here...
   }

}

With this knowledge to traverse the table structure, moving up / down / left / right within it should be fairly easy.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Mephist0222,

How did you go with that? Did you resolve your problem?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Mephist0222]

Hi,

I was able to figure this out, sorry for the delay in response, for some reason email from here gets caught in my spam filter:

// Set initial variables
var focus={ x:0, y:0 , table : null}
// Function that adds the focus to each
function focusOn(focus)
{
if(document.getElementsByTagName('table')[0]){
if(focus.table.rows[focus.y].cells[focus.x].lastChild.href) {
alert('link');
}
else if(focus.table.rows[focus.y].cells[focus.x].lastChild.type = "radio") {
//alert('radio');
document.forms[0].elements[0].selected = 'true';
}
//focus.table.rows[focus.y].cells[focus.x].lastChild.focus();
}
}
// Initializes the function
function init()
{
focus.table = document.getElementsByTagName('table')[0];// selecting first table (you could select it by ID for example)
focusOn(focus);
// Captures the keystroke. We are not using YUI here as it would only overly complicate these functiona
document.body.onkeyup = function(evt)
{
var key = (document.all) ? event.keyCode : evt.which;
// This is what changes the function based on the arrow that is hit
switch(key)
{
case 37: // left arrow
focus.x--;
break;
case 38: // up arrow
focus.y--;
break;
case 39: // right arrow
focus.x++;
break;
case 40: // down arrow
focus.y++;
break;
}
// The meat of the functions, this moves the focus around
if (focus.x<0) { focus.y --; if (focus.y<0) focus.y=focus.table.rows.length-1; focus.x=focus.table.rows[focus.y].cells.length-1; }
if (focus.y<0) { focus.y = focus.table.rows.length-1; }
if (focus.y>=focus.table.rows.length) { focus.y=0;}
if (focus.x>=focus.table.rows[focus.y].cells.length) { focus.x=0; focus.y++; }
if (focus.y>=focus.table.rows.length) { focus.y=0;}
focusOn(focus);

return false;
}
}
// This is so we do not have to have an onload in the body tag
YAHOO.util.Event.addListener(window, "load", init);

 

[BillyRayPreachersSon]

Nice - good to see you got it working in the end.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]