Control tabbing order

P

Paul Furman

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.
 
P

Paul Furman

Paul said:
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.
Click to expand...


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>
 
P

Paul Furman

Paul said:
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>
Click to expand...


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

<BODY onLoad="document.forms.mail.body.focus()">
 
M

Michael Wilcox

Paul Furman said:
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.
Click to expand...

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.
 
P

Paul Furman

Michael said:
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.
Click to expand...


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.
 
J

Jukka K. Korpela

Paul Furman said:
I appreciate the concern but I do have a good reason to mess with
the tabbing.
Click to expand...

I don't think so.
It would not be practical to navigate without these
changes.
Click to expand...

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
Click to expand...

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.
 
P

Paul Furman

Jukka said:
I don't think so.
Click to expand...


Oh Yeah?
<hmph>


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?




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.
Click to expand...


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.
 
R

rf

Paul Furman said:
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.
Click to expand...

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.
 
S

Steve Pugh

Paul Furman said:
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).
Click to expand...

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
 
D

David Mackenzie

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.
Click to expand...

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

Paul Furman

rf said:
...



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.
Click to expand...


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).
 
P

Paul Furman

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

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."
 
P

Paul Furman

Steve said:
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.
Click to expand...


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.
Click to expand...


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.
 
P

Paul Furman

Toby said:
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.
Click to expand...

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?
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

File content in descending order 0
Only one table shows up with the information 2
Tabbing between text inputs with other tags between them 7
Problem with Tabbing order 2
Tabbing Help 1
Tabbing through Controls - 2nd post 3
Calendar Control tabbing 0
Tabbing through form and clicking in field 0

Members online

No members online now.
Total: 30 (members: 1, guests: 29)
Robots: 231

Forum statistics

Threads
473,755
Messages
2,569,537
Members
45,022
Latest member
MaybelleMa

Latest Threads

Top