Is there a way to dynamically change the tabindex of an element based on its visibility in the viewport? I am looking to either reset the current tabindex when entering a new section and assign new values to elements within that section, or disable and re-enable the tabindex of specific elements.
Here is some sample HTML:
<div id="nav">
<a id="firstLink" href="#section1" tabindex="1">Go to section 1</a>
<a id="secondLink" href="#section2" tabindex="2">Go to section 2</a>
</div>
<div id="container">
<div id="section1">
<a href="#" tabindex="3">Specific to section 1</a>
</div>
<div id="section2">
<a href="#" tabindex="3">Specific to section 2</a>
</div>
</div>
I want the links to be included in the tabbing order only if their respective sections are visible.
And here is the corresponding CSS:
#container {
overflow: hidden;
width: 400px;
height: 400px;
}
#section1 {
background: red;
width: 400px;
height: 400px;
}
#section2 {
background: green;
width: 400px;
height: 400px;
}
Live example: http://jsfiddle.net/2UF3n/5/