Generating a tabindex

[CharlieLaw]

I have created a tab list at the top of my page which when rolled over makes a box appear with sub-links in them. These links live on the page at the bottom in a sepearte list.

The problem I am having is with IE and getting the tabbing order to work correctly. I want the user to be able to tab onto the top tab which then opens the box of links and then the user can then tab through them

I have generated a tabindex on the fly so the user jumps from the top tab into the box, which works fine in Firefox but not IE. The tabindex is generated fine but its as if IE is not recognising the tabindex is their.

Basically I take all the links before the top tabs and give them a tabindex of 1 to X (depends of number of links), then I give the toptabs an increment of 100. So the generated links will starts at 101, 102 etc.. for the fist tab and 201, 202 for the second tab.

Any help would be greatly appreciated. I am thinking it may be something to do with the way the code is written onto the page that IE does not like or its just the tabindex being generated on the fly.

Cheers Charlie.

code below:

/* Tab index for top section of site */
var localTabindex = 1;
var topSectionLinks = document.getElementById("top").getElementsByTagName("a");
for (var i = 0; i < topSectionLinks.length; i++) {
topSectionLinks.setAttribute("tabindex", localTabindex);
localTabindex ++;
}

/* Tab index for top tabs - increments of 100 */
var topTabLinks = document.getElementById("nav-primary").getElementsByTagName("a");
var tabTabindex = 100;
for (var i = 0; i < topTabLinks.length; i++) {
topTabLinks.setAttribute("tabindex", tabTabindex);
tabTabindex = tabTabindex + 100;
}

var topListItems = document.getElementById("nav-primary").getElementsByTagName("a");
var parent = document.getElementById("wrapper");
for (var i = 0; i < topListItems.length; i++) {
//var currentTabIndex = parseInt(topListItems.getAttribute("tabindex"));
if (window.event) {
var currentTabIndex = parseInt(topListItems.tabindex)
} else {
var currentTabIndex = parseInt(topListItems.getAttribute("tabindex"))
}


var currentSection = (topListItems.id + "-products-box");
var thisSection = getElementsByClassName(parent, "div", currentSection);
for (var j = 0; j < thisSection.length; j++) {
var popupLinks = thisSection[j].getElementsByTagName("a");
var localTabIndex = parseInt(currentTabIndex) + 1;
for (var k = 0; k < popupLinks.length; k++) {
popupLinks[k].setAttribute("tabindex", localTabIndex)
localTabIndex++;
}
}
}

 

[BillyRayPreachersSon]

This is a long-shot, but give it a whirl anyway. Instead of using:

.setAttribute("tabindex", someIndex);

try:

.tabIndex = someIndex;

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]

Charlie,

Did that work? 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]

 

[CharlieLaw]

Hi Dan,
It got me going in the right direction. Turns out that IE dosen't read tabindex but will read tabIndex (note the capital I). So when generating any tabindex just use the capital I for index and everything seemed to work fine.

topSectionLinks.setAttribute("tabIndex", localTabindex);

Cheers for the help
Charlie.