Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    620
    Thanks
    1
    Thanked 20 Times in 20 Posts

    Tabindex is not moving tab point.

    I have a number of groups of links on my page and links at the top to go to each group. When I tab to one of those top links and click it or hit enter, the page properly moves to the top of the appropirate group. Then I hit tab one more time, expecting to tab to the first link in that group, the browser goes back to the top link just after the one that I just activated. Adding "tabindex" to the links does not help:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>TabIndex</title>
      <body>
        <div id="header">
          <h1>TabIndex</h1>
          <hr />
          <a tabindex="1" href="#Group1">G1</a>
          <a tabindex="1" href="#Group2">G2</a>
          <a tabindex="1" href="#Group3">G3</a>
          <hr />
        </div>
        <div id="content">
          <div id="Group1">
            <a tabindex="1" href="G1A">A</a>
            <a tabindex="1" href="G1B">B</a>
          </div>
          <div id="Group2">
            <a tabindex="1" href="G2A">A</a>
            <a tabindex="1" href="G2B">B</a>
          </div>
          <div id="Group3">
            <a tabindex="1" href="G3A">A</a>
            <a tabindex="1" href="G3B">B</a>
          </div>
        </div>
       </div>
      </body>
    </html>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You have set all of them to be the FIRST - they can't all be first. Each tabindex="x" should have a different number as the x to identify the order.

    If you are going to number them sequentially down the page then the tabindex can be omitted as that is the default. You only need to include them if numbering them out of numerical order.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Do you hide the groups that don't belong to the selected top link?

    Try this:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>TabIndex</title>
      <body>
        <div id="header">
          <h1>TabIndex</h1>
          <hr />
          <a tabindex="1" href="#Group1">G1</a>
          <a tabindex="4" href="#Group2">G2</a>
          <a tabindex="7" href="#Group3">G3</a>
          <hr />
        </div>
        <div id="content">
          <div id="Group1">
            <a tabindex="2" href="G1A">A</a>
            <a tabindex="3" href="G1B">B</a>
          </div>
          <div id="Group2">
            <a tabindex="5" href="G2A">A</a>
            <a tabindex="6" href="G2B">B</a>
          </div>
          <div id="Group3">
            <a tabindex="8" href="G3A">A</a>
            <a tabindex="9" href="G3B">B</a>
          </div>
        </div>
       </div>
      </body>
    </html>
    Or:
    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <title>TabIndex</title>
      <body>
        <div id="header">
          <h1>TabIndex</h1>
          <hr />
          <a tabindex="1" href="#Group1">G1</a>
          <a tabindex="2" href="#Group2">G2</a>
          <a tabindex="3" href="#Group3">G3</a>
          <hr />
        </div>
        <div id="content">
          <div id="Group1">
            <a tabindex="4" href="G1A">A</a>
            <a tabindex="5" href="G1B">B</a>
          </div>
          <div id="Group2">
            <a tabindex="6" href="G2A">A</a>
            <a tabindex="7" href="G2B">B</a>
          </div>
          <div id="Group3">
            <a tabindex="8" href="G3A">A</a>
            <a tabindex="9" href="G3B">B</a>
          </div>
        </div>
       </div>
      </body>
    </html>
    I think the latter is the more logical one.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    620
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by felgall View Post
    You have set all of them to be the FIRST - they can't all be first. Each tabindex="x" should have a different number as the x to identify the order.

    If you are going to number them sequentially down the page then the tabindex can be omitted as that is the default. You only need to include them if numbering them out of numerical order.
    If I leave off the tabindex, Opera 12 won't tab straight down. It does the form fields first and then comes back for the links.

    If I number them sequentially down the page, or bouncing back and forth as suggested by the next poster, I still can't click the first link which takes me to the top of Group 1 and then tab to the first item in that group. Both ways go back to the top links.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by jalarie View Post
    or bouncing back and forth as suggested by the next poster, I still can't click the first link which takes me to the top of Group 1 and then tab to the first item in that group. Both ways go back to the top links.
    Seems like it's working? I tried it in Chrome:

    Edit fiddle - JSFiddle

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by glenngv View Post
    Seems like it's working? I tried it in Chrome:
    I tried it in Opera 12 and it works there too.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    620
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by glenngv View Post
    Seems like it's working? I tried it in Chrome:

    Edit fiddle - JSFiddle
    I want to be able to tab to the G1 link and then to the G2 link and then to the G3 link. If I hit the enter key on any of them, I want to be taken to the top of the related group and then be able to tab within that group. No matter how I number the links, I can't get them to function that way.

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Is this what you need?

    Edit fiddle - JSFiddle

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    620
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by glenngv View Post
    Is this what you need?

    Edit fiddle - JSFiddle
    That does seem to work; thank you. I had hoped for a straight HTML (non-JS) solution, but this is great. Thanks, again.

  • #10
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    You cannot do it without JS because you need to change the tab order when you click on the top links.

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    620
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by glenngv View Post
    You cannot do it without JS because you need to change the tab order when you click on the top links.
    Actually, it's quite trivial for IE and Firefox. Illinois Information Technology Accessibility Act Implementation Guidelines for Web-Based Information and Applications 1.0 says, "Set tabindex="-1" on same-page link targets." It's great! But Opera and Safari object and it's also illegal because tabindex is supposed to be 0-32767.

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,043
    Thanks
    0
    Thanked 251 Times in 247 Posts
    HTML5 spec allows negative tabindex which means that the element is skipped when tabbing.

    7 User interaction — HTML5

    If the value is a negative integer
    The user agent must set the element's tabindex focus flag, but should not allow the element to be reached using sequential focus navigation.
    But still as I said earlier, you cannot do what you want without JS because you want the tab order to change from the default order when you click on the top links. This has nothing to do with negative tabindex.

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Location
    Flint, Michigan, USA
    Posts
    620
    Thanks
    1
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by glenngv View Post
    HTML5 spec allows negative tabindex which means that the element is skipped when tabbing.

    7 User interaction — HTML5

    But still as I said earlier, you cannot do what you want without JS because you want the tab order to change from the default order when you click on the top links. This has nothing to do with negative tabindex.
    Thank you; the HTML5 info is interesting. That link does claim to be a "Candidate Recommendation" only.

    I found a JS solution that works for me and is quite short. I put the top (G1 G2 G3) links within a div and then, when a G-link is clicked, set that div's display to none.

    Thank you, everyone, for the help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •