Control tabbing order

Discussion in 'HTML' started by Paul Furman, Feb 19, 2004.

  1. Paul Furman

    Paul Furman Guest

    I'd like to be able to allow keyboard navigation of the following page:
    <http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=ecards.php&IMG_DIR=faces&PAGE=1&PIC=0&PICS=6>
    I saw a little javascript line that can set the focus on a form object
    based on the ID so I guess I might be able to set an ID for each picture
    and maybe make that work.

    What I'd really like is to use the arrow key.

    Currently if i tab 6 times then hit enter, it loads the next image from
    the thumb, next time I tab 7 times, then 4 tabs to hit the "next" link.

    Any way to make this work? If I could set the tab order with plain html
    coding, I could redo each refresh with PHP so the next pic is the first tab.
    Paul Furman, Feb 19, 2004
    #1
    1. Advertising

  2. Paul Furman

    Paul Furman Guest

    Paul Furman wrote:

    > I'd like to be able to allow keyboard navigation of the following page:
    > <http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=ecards.php&IMG_DIR=faces&PAGE=1&PIC=0&PICS=6>
    >
    > If I could set the tab order with plain html
    > coding, I could redo each refresh with PHP so the next pic is the first
    > tab.



    Apparently it is possible using the tabindex attribute:
    http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.11.1

    "The following elements support the tabindex attribute: A, AREA, BUTTON,
    INPUT, OBJECT, SELECT, and TEXTAREA."


    This will still require two tabs to jump down from the address bar.
    Anyone know how to produce that with javascript perhaps? I hunted around
    for a while without much luck.

    What I'm talking about:
    http://www.edgehill.net/html/tab

    Page 1
    <br>
    tab twice and hit enter for next page
    <br>
    <a tabindex="3" href="index.htm">one</a>
    <a tabindex="1" href="index2.htm">two</a>
    <a tabindex="2" href="index3.htm">three</a>
    Paul Furman, Feb 19, 2004
    #2
    1. Advertising

  3. Paul Furman

    Paul Furman Guest

    Paul Furman wrote:
    >
    > This will still require two tabs to jump down from the address bar.
    > Anyone know how to produce that with javascript perhaps? I hunted around
    > for a while without much luck.
    >
    > What I'm talking about:
    > http://www.edgehill.net/html/tab
    >
    > Page 1
    > <br>
    > tab twice and hit enter for next page
    > <br>
    > <a tabindex="3" href="index.htm">one</a>
    > <a tabindex="1" href="index2.htm">two</a>
    > <a tabindex="2" href="index3.htm">three</a>



    How would I adapt this script to find a particular <a> tag:

    <BODY onLoad="document.forms.mail.body.focus()">
    Paul Furman, Feb 19, 2004
    #3
  4. Paul Furman

    Paul Furman Guest

    OK I got it working:
    <http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=ecards.php&IMG_DIR=faces&PAGE=1&PICS=6>
    IE unfortunately requires two tabs, Mozilla works with one tab. They
    both need an enter key. I cheated a bit by simply setting tabindex=1 for
    the first series & 2 for the next, etc.

    It would be best to get javascript to highlight the first link
    automatically, then it'd just take enter enter enter to scroll through
    the gallery.


    > Paul Furman wrote:
    >
    >> <a tabindex="2" href="index.htm">one</a>
    >> <a tabindex="1" href="index2.htm">two</a>
    >> <a tabindex="1" href="index3.htm">three</a>

    >
    >
    >
    > How would I adapt this script to find a particular <a> tag:
    >
    > <BODY onLoad="document.forms.mail.body.focus()">
    >
    Paul Furman, Feb 19, 2004
    #4
  5. Paul Furman <> wrote:
    > Any way to make this work? If I could set the tab order with plain
    > html
    > coding, I could redo each refresh with PHP so the next pic is the
    > first tab.


    Yes, you can use some HTML to do this, as you've apparently discovered.
    However, the tabbing order is something that's specific to each browser.
    When a user is used to their particular tabbing mechanisms, it really makes
    them mad when you screw it up with Javascript (it's still good to so with
    HTML, but a well structured document shouldn't need it). There's no good
    reason to mess with the tab order.
    --
    Michael Wilcox
    mjwilco at yahoo dot com
    Essential Tools for the Web Developer - http://mikewilcox.t35.com
    Michael Wilcox, Feb 19, 2004
    #5
  6. Paul Furman

    Paul Furman Guest

    Michael Wilcox wrote:
    > Paul Furman <> wrote:
    >
    >>Any way to make this work? If I could set the tab order with plain
    >>html
    >>coding, I could redo each refresh with PHP so the next pic is the
    >>first tab.

    >
    >
    > Yes, you can use some HTML to do this, as you've apparently discovered.
    > However, the tabbing order is something that's specific to each browser.
    > When a user is used to their particular tabbing mechanisms, it really makes
    > them mad when you screw it up with Javascript (it's still good to so with
    > HTML, but a well structured document shouldn't need it). There's no good
    > reason to mess with the tab order.



    I appreciate the concern but I do have a good reason to mess with the
    tabbing. It would not be practical to navigate without these changes.
    It's working now http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=ecards.php
    but requires two tabs to get out of the address bar with IE (one in
    Mozilla is nice!) I found a javascript to fiddle with it but it seems to
    get confused by my custom tab order.

    This one now has the javascript:
    http://www.edgehill.net/html/tab
    and is fouled up.
    Paul Furman, Feb 19, 2004
    #6
  7. Paul Furman <> wrote:

    > I appreciate the concern but I do have a good reason to mess with
    > the tabbing.


    I don't think so.

    > It would not be practical to navigate without these
    > changes.


    Then reduce the navigation links. Less is more.

    For example, what could possibly be the point in the "back" link?
    Confusing the user who wonders how it relates to the Back button?

    Or thinking constructtively, how many links does the user actually need
    when viewing the gallery. "Next" and "up" maybe. Well, I'm bit confused
    though - there's no obvious reason to use "next", since the photos are
    all visible on screen so I can just tab between them, can't I?

    > It's working now
    > http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=ecards.php


    Not really. It's very confusing when you jump around the page when
    tabbing. And I don't like the idea of having to react to my browser
    asking for permission to run JavaScript - I don't see what
    a mean structurally simple photo gallery would benefit from it.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Feb 20, 2004
    #7
  8. Paul Furman

    Paul Furman Guest

    Jukka K. Korpela wrote:
    > Paul Furman <> wrote:
    >
    >
    >>I appreciate the concern but I do have a good reason to mess with
    >>the tabbing.

    >
    >
    > I don't think so.



    Oh Yeah?
    <hmph>



    >
    >>It would not be practical to navigate without these
    >>changes.

    >
    >
    > Then reduce the navigation links. Less is more.
    >
    > For example, what could possibly be the point in the "back" link?
    > Confusing the user who wonders how it relates to the Back button?
    >
    > Or thinking constructtively, how many links does the user actually need
    > when viewing the gallery. "Next" and "up" maybe. Well, I'm bit confused
    > though - there's no obvious reason to use "next", since the photos are
    > all visible on screen so I can just tab between them, can't I?
    >
    >
    >>It's working now
    >>http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=ecards.php

    >
    >
    > Not really. It's very confusing when you jump around the page when
    > tabbing. And I don't like the idea of having to react to my browser
    > asking for permission to run JavaScript - I don't see what
    > a mean structurally simple photo gallery would benefit from it.



    OK well, since the javascript doesn't work, nevermind, it's not on that
    page yet anyways. (Though it would have been awesome to just hit enter
    to go through the slide show).

    But just with the tabbing:

    loads first picture and a few thumbs
    tab enter
    steps to next thumb
    tab enter
    steps to next thumb
    tab enter
    etc.
    tab enter
    "next" button goes to next page of 6 thumbnails

    So basically:
    tab enter
    tab enter
    tab enter
    tab enter
    tab enter
    tab enter
    tab enter
    or in IE
    tab tab enter
    tab tab enter


    Without the tabindex stuff it takes 5 tabs to advance thumbs the first time

    tab tab tab tab tab enter

    then 6, 7, 8, 9, 10, and 11 tabs to hit the "next" button, which is
    pretty much unusable for keyboard navigating. The tabindex is standard
    compliant html, and that sort of control is totally standard for any
    kind of gui software. Of course you put the focus on the next obvious
    step. I think it's an excellent idea and makes the page much more usable.

    How would you propose setting up a slideshow? Most are totally
    javascript controlled or require tedious mousing. I'm open for
    suggestions. The up button is eliminated because some galleries would
    have 40 or more thumbnails. I really like the way this loads a few
    thumbs and pops one of them into enlarged view. The number o thumbs is
    adjustable.
    Paul Furman, Feb 20, 2004
    #8
  9. Michael Wilcox, Feb 20, 2004
    #9
  10. Paul Furman

    Paul Furman Guest

    Paul Furman, Feb 20, 2004
    #10
  11. Paul Furman

    rf Guest

    "Paul Furman" <> wrote in message
    news:...
    > Michael Wilcox wrote:
    >
    > > Paul Furman <> wrote:
    > >
    > >>How would you propose setting up a slideshow?

    > >
    > >
    > > Slideshow:
    > > http://slide.bruciesusenetshit.info/
    > >
    > > Gallery:
    > > http://butterflies.bruciesusenetshit.info/
    > > http://balls.bruciesusenetshit.info/

    >
    >
    > Those are good. The "sexy butterflies" page was an inspiration <g>.
    > Darned if I don't have to go through & add my own indentation to be able
    > to read that code but I suppose that's a useful exercise.


    If it was hard to write it should be Real Hard to edit.

    brucie probably spat that out of a PHP script or something where the
    formatting of the HTML is irrelevant.

    Cheers
    Richard.
    rf, Feb 20, 2004
    #11
  12. Paul Furman

    Steve Pugh Guest

    Paul Furman <> wrote:

    >OK well, since the javascript doesn't work, nevermind, it's not on that
    >page yet anyways. (Though it would have been awesome to just hit enter
    >to go through the slide show).


    Opera has this feature built in. Opera scans pages for links with text
    like 'next' and then allows the user to follow those links via a
    feature called Fast Forward. One problem is that on your page the link
    has the text ' next ' (with spaces) and thus Opera's doesn't recognise
    it.

    Anyway, the solution to your problem is to rewrite the page so that
    the next link is the first link on the page. No JavaScript, no mucking
    with the tab order.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Feb 20, 2004
    #12
  13. On Fri, 20 Feb 2004 09:30:52 +0000, Steve Pugh <> wrote:

    >Anyway, the solution to your problem is to rewrite the page so that
    >the next link is the first link on the page. No JavaScript, no mucking
    >with the tab order.


    The OP could also add <link rel='next' href='...'> to his page to help
    people whose browsers display their own navigation toolbar.

    --
    David ( @priz.co.uk )
    David Mackenzie, Feb 20, 2004
    #13
  14. Paul Furman

    Paul Furman Guest

    rf wrote:
    >
    > ...
    >>>http://slide.bruciesusenetshit.info/
    >>>http://butterflies.bruciesusenetshit.info/
    >>>http://balls.bruciesusenetshit.info/

    >>

    > "Paul Furman" wrote:
    >>Those are good...
    >>Darned if I don't have to go through & add my own indentation to be able
    >>to read that code but I suppose that's a useful exercise.

    >
    >
    > If it was hard to write it should be Real Hard to edit.
    >
    > brucie probably spat that out of a PHP script or something where the
    > formatting of the HTML is irrelevant.



    Yes, PHP & there's a 'view source' link which shows the code and it is
    all strung on as few lines as possible with no indentation like the html
    & CSS. But actually it's real simple code (clean).
    Paul Furman, Feb 20, 2004
    #14
  15. Paul Furman

    Paul Furman Guest

    David Mackenzie wrote:
    > On Fri, 20 Feb 2004 09:30:52 +0000, Steve Pugh <> wrote:
    >
    >
    >>Anyway, the solution to your problem is to rewrite the page so that
    >>the next link is the first link on the page. No JavaScript, no mucking
    >>with the tab order.

    >
    >
    > The OP could also add <link rel='next' href='...'> to his page to help
    > people whose browsers display their own navigation toolbar.


    Hmm I never heard of that:
    http://www.w3.org/TR/html401/struct/links.html#h-12.3

    "This element defines a link. Unlike A, it may only appear in the HEAD
    section of a document, although it may appear any number of times.
    Although LINK has no content, it conveys relationship information that
    may be rendered by user agents in a variety of ways (e.g., a tool-bar
    with a drop-down menu of links)."

    "The rel and rev attributes play complementary roles -- the rel
    attribute specifies a forward link and the rev attribute specifies a
    reverse link."
    Paul Furman, Feb 20, 2004
    #15
  16. Paul Furman

    Paul Furman Guest

    Steve Pugh wrote:

    > Paul Furman <> wrote:
    >
    >
    >>OK well, since the javascript doesn't work, nevermind, it's not on that
    >>page yet anyways. (Though it would have been awesome to just hit enter
    >>to go through the slide show).

    >
    >
    > Opera has this feature built in. Opera scans pages for links with text
    > like 'next' and then allows the user to follow those links via a
    > feature called Fast Forward. One problem is that on your page the link
    > has the text ' next ' (with spaces) and thus Opera's doesn't recognise
    > it.



    I can remove the spaces if that helps.


    >
    > Anyway, the solution to your problem is to rewrite the page so that
    > the next link is the first link on the page. No JavaScript, no mucking
    > with the tab order.



    I think maybe you guys aren't understanding what I'm doing. I've moved
    the 'back' & 'next' down to make more sense and described them as "next
    PAGE" so you don't think it's "next IMAGE". Now I'm just talking about
    using tabindex here (no javascript yet).

    [CAPS] indicate current enlarged thumbnail.

    [*asterix*] indicates first active link on tabbing in

    -----------------------------------
    1st page loads, one tab jumps across the home button and the first image
    which is already loaded & takes you where an enter will load the next
    image in the series
    -----------------------------------
    [home]
    [THUMB1] [*thumb2*] [thumb3] [thumb4]
    [prev. page] [next page]
    [ PICTURE1 ]
    -----------------------------------
    tab enter moves to next image
    -----------------------------------
    [home]
    [thumb1] [THUMB2] [*thumb3*] [thumb4]
    [prev. page] [next page]
    [ PICTURE2 ]
    -----------------------------------
    tab enter moves to next image
    -----------------------------------
    [home]
    [thumb1] [thumb2] [THUMB3] [*thumb4*]
    [prev. page] [next page]
    [ PICTURE3 ]
    -----------------------------------
    tab enter moves to next image
    -----------------------------------
    [home]
    [thumb1] [thumb2] [thumb3] [THUMB4]
    [prev. page] [*next page*]
    [ PICTURE4 ]
    -----------------------------------
    tab enter moves to next PAGE
    -----------------------------------

    If I could get the javascript working that would be better because it
    would just take a single enter key to advance the slide show. Using an
    arrow key or spacebar would be good too. This simulates any typical
    image browsing program where you just hit one key to advance at your own
    pace. Having to move the mouse, click, tab, whatever, is much much more
    of a pain in the ass and makes it uncomfortable to view a slide show for
    more than a few frames. Automatic timed slide shows are sort of
    annoying. I'm talking about galleries that may have as many as 100
    pictures in them, actually the one below has 140:

    <http://hills.ccsf.edu/~pfurma02/index.php?SCREEN=ecards.php&IMG_DIR=faces&PAGE=12&PIC=44&PICS=4>

    After advancing for a while, try using the backspace key to see how nice
    it would be if this could be done with one keystroke.
    Paul Furman, Feb 20, 2004
    #16
  17. Paul Furman wrote:
    > David Mackenzie wrote:
    >> On Fri, 20 Feb 2004 09:30:52 +0000, Steve Pugh <> wrote:
    >>
    >>> Anyway, the solution to your problem is to rewrite the page so that
    >>> the next link is the first link on the page. No JavaScript, no mucking
    >>> with the tab order.

    >>
    >> The OP could also add <link rel='next' href='...'> to his page to help
    >> people whose browsers display their own navigation toolbar.

    >
    > Hmm I never heard of that:
    > http://www.w3.org/TR/html401/struct/links.html#h-12.3


    And FYI, <link> is supported by tonnes of browsers, e.g. Mozilla, Opera,
    Lynx, Links, iCab but not Internet Explorer and Safari. Googlebot will
    also follow <link> links.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    Toby A Inkster, Feb 20, 2004
    #17
  18. Paul Furman

    Paul Furman Guest

    Toby A Inkster wrote:

    > Paul Furman wrote:
    >
    >>David Mackenzie wrote:
    >>>
    >>>The OP could also add <link rel='next' href='...'> to his page to help
    >>>people whose browsers display their own navigation toolbar.

    >>
    >>Hmm I never heard of that:
    >>http://www.w3.org/TR/html401/struct/links.html#h-12.3

    >
    >
    > And FYI, <link> is supported by tonnes of browsers, e.g. Mozilla, Opera,
    > Lynx, Links, iCab but not Internet Explorer and Safari. Googlebot will
    > also follow <link> links.


    Hmm I found this in Mozilla:
    View > Page Info
    -includes a tab showing links including <a> & <link> but not convenient
    to use for anything but research.

    View > Show/Hide > Site Navigation Bar
    -includes the following buttons:
    Top Up First Previous Next Last Document More

    -greyed out on every page I checked, even if I match their keywords:
    <LINK rel="Top" href="index.php">

    Is this what you are talking about?
    Paul Furman, Feb 20, 2004
    #18
  19. Andrew Glasgow, Feb 21, 2004
    #19
  20. In article <zXeZb.11782$>,
    "Michael Wilcox" <> wrote:

    > Slideshow:
    > http://slide.bruciesusenetshit.info/


    Wow. Nice! (I've missed brucie...)

    My only problem is--I work for a botanist and it was really surreal
    since the names didn't match the pictures... :)

    Audry

    --
    tawdry glamour who is at smile global dot com
    T. Audry Glamour, Feb 21, 2004
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kerri
    Replies:
    1
    Views:
    512
    Ravikanth[MVP]
    Aug 20, 2003
  2. Lars Netzel
    Replies:
    1
    Views:
    341
    Lars Netzel
    May 21, 2004
  3. Miriam
    Replies:
    1
    Views:
    306
    Hermit Dave
    Sep 13, 2004
  4. Chris

    Calendar Control tabbing

    Chris, May 18, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    386
    Chris
    May 18, 2005
  5. tshad

    Problem with Tabbing order

    tshad, Sep 10, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    352
    tshad
    Sep 10, 2007
Loading...

Share This Page