How to disable and re-enable tabindex of hidden/visible elements?

Question

How can I change the tabindex of an element based on whether or not the element is visible (in view-able area)? I would like to do one of these things: reset the current tabindex upon entering a new section and assign new tabindex's to the elements in that section. Or be able to disable and re-enable tabindex's of certain elements.

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 in the tabbing order ONLY if their section is visible.

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/

score 4 · Accepted Answer · edited Dec 10 '14 at 01:31

4

You can dynamically add or remove disabled="disabled" from any hidden field to make its tabindex value ignored.

$("a:hidden").attr("disabled","disabled");

edited Dec 10 '14 at 01:31

Pang

9,564
146
81
122

answered Sep 20 '12 at 19:34

Tammy Shipps

865
4
13

but what if I'm not using the `hidden` attribute. In my example its a container with `overflow:hidden`. Could you rework my example to show me how that could be incorporated? – Jake Zeitz Sep 20 '12 at 19:52
You will need some distinction to select the hidden elements, in that case because there's no way to pick up on links that aren't shown due to overflow: hidden; without doing position checks...which I think is more a pain in the butt than you want to deal with. The :hidden selector in jQuery will select items that take up no space in the document, but overflow: hidden; does not accomplish that; they still take up space, you just can't see it. I would suggest hiding the elements you don't need visible via CSS or jQuery and not use overflow: hidden;. – Tammy Shipps Sep 20 '12 at 22:40
1

That makes a lot of sense, but in my actual project I have a good deal of animations that rely on `overflow:hidden`. I'll try some different selectors out and use the `disabled` attribute as you suggested. – Jake Zeitz Sep 21 '12 at 02:35
Doesn't work for divs. E.g. when using semantic-ui's dropdowns. – avalanche1 Feb 08 '16 at 09:38
@TammyShipps , is it still true with modern browsers that this will not work with `overflow:hidden` ? – Eric Mar 23 '17 at 22:05
@avalanche1 Well, no, of course not. You can't disable a plain div with no function. The disabled flag is for functional elements like anchors and form inputs. – Tammy Shipps Mar 26 '17 at 08:32

How to disable and re-enable tabindex of hidden/visible elements?

1 Answers1