Email conversation
| From | Maia Good |
|---|
| To | Me |
|---|
| Subject | Modify location of +- in nested list collapsing script |
|---|
| Date | 21 June 2008 15:03 |
|---|
Hi,
First, what I'm sure everyone says but needs to be said anyway, thank
you for the scripts you have made available on your site.
I'm trying to use the "Nested list collapsing script" with the Nisad
Sivcevic and Alex Campbell's mods to implement a menu for a website
which requires keyboard accessibility (as I think all should anyway.).
I would like to modify the script to place the +/- link after the
text of the <li> with a sublist. In other words, currently the script
will setup something like this (if you were looking at it all
expanded):
+- About Us
Our Mission
Our Vision
+- Events
Training
[Activity]
Calendar
+- Training
In-house
+- External
Public
Members Only
What I would like to do is to be able to place that link after, as follows:
About Us +-
Our Mission
Our Vision
Events +-
Training
[Activity]
Calendar
Training +-
In-house
External +-
Public
Members Only
In this manner for anyone traversing the menu with a keyboard, and a
screen reader, they can get to About Us, tab again and hear or read
"open submenu list" for that link or see an arrow indicating there's
more. If they want to open the submenu list they can press enter,
otherwise they can tab again and go to the next same level item. I
was trying to implement this website's menu using [BRAND] ([URL]) but
the collapsible menu they have collapses a group when another is
expanded. I would like to give the user the choice of when to expand
/ collapse groups. [BRAND] is also a much more complex script, and it has
a lot of unnecessary (for me) complexities. I'd rather use something
simpler such as your script, as long as I can make it be as
user-friendly and accessible as I need.
I've tried looking at the source to see if I could do this myself, but
I'm not a javascript programmer and just haven't come up with the idea
of what would need to be done. I appreciate your help. If you can't
help now, I also understand, so thanks any way.
Thanks for your help, and your scripts, again.
Maia Good
| From | Me |
|---|
| To | Maia Good |
|---|
| Subject | Re: Modify location of +- in nested list collapsing script |
|---|
| Date | 21 June 2008 18:45 |
|---|
Maia,
> I would like to modify the script to place the +/- link after the
> text of the <li> with a sublist.
http://www.howtocreate.co.uk/emails/Tonya.html
This should tell you everything you need.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Maia Good |
|---|
| To | Me |
|---|
| Subject | Re: Modify location of +- in nested list collapsing script |
|---|
| Date | 21 June 2008 19:56 |
|---|
Hi, Tarquin:
Thank you so much for your quick reply. I must say I had not seen
that email among the emails, but the solution does not work for me.
Moving the +/- to the right with a float only moves the text, it does
not move the actual link tag which is what I need for keyboard
accessibility. If you want to see what I mean I put a test page up
on:
[URL]
Try accessing the list with the keyboard. You will see that there's a
dot where the link is on the left, although the +/- is on the right.
It would have been great if this change you suggested would solve the
problem. I'm figuring that to actually solve it I have to change the
javascript, but maybe I just don't know enough about the script
parameters.
Thanks again.
Maia
| From | Me |
|---|
| To | Maia Good |
|---|
| Subject | Re: Modify location of +- in nested list collapsing script |
|---|
| Date | 22 June 2008 19:55 |
|---|
Maia,
> Try accessing the list with the keyboard. You will see that there's a
> dot where the link is on the left, although the +/- is on the right.
This works perfectly for me in all browsers except Firefox 3. It works
correctly in Firefox 2. None of the others show any odd artifacts when the
+- link is focused. The list is perfectly accessible in all of them.
The bug is a regression in Firefox 3, not a problem in my script or the CSS.
Please report it to Mozilla, using their bug tracking system:
https://bugzilla.mozilla.org/
You can give them this simple bit of HTML to demonstrate the bug:
<a href=""><span style="float:right">Tab to this link</span></a>
Of course those browsers that use tab navigation (or caret browsing) step to
the +- before stepping to the text (basically because they work based on
source order, which is inherently stupid since the user can't be expected to
know the source order when CSS or tables are involved), but that's harmless
because it still makes sense.
Browsers like Opera that use spatial navigation are far superior for
keyboard access, as they allow the user to step to links based on what they
see, not the source order. This also works perfectly with the floating link.
(Opera also offers a way to step through links in source order, for those
using a non-visual medium.)
So my only suggestion is to report it to Mozilla. When they fix the
regression, the problem will be gone. Do not spend time trying to look for a
workaround, unless you have some urgent need to provide such in depth
flawless support for keyboard access for users of buggy versions of Firefox
3. Users who need keyboard accessibility really should be using a browser
that has spatial navigation anyway.
| From | Maia Good |
|---|
| To | Me |
|---|
| Subject | Re: Modify location of +- in nested list collapsing script |
|---|
| Date | 23 June 2008 14:46 |
|---|
Hi, Tarquin:
Again thank you for your help and all the information you sent here.
Sorry about having you chase a bug in Firefox. Unfortunately I think
Firefox 3 is quite buggy. I've had many problems with it. I like
using its add-ons ([Brand], [Brand], [Brand]) when developing. For
layout position debugging I like Opera best.
I'm all set for the moment. Hope the client can decide.
THANKS.
Cheers from [Location].
Maia
| From | Maia Good |
|---|
| To | Me |
|---|
| Subject | Re: Modify location of +- in nested list collapsing script |
|---|
| Date | 24 September 2008 16:31 |
|---|
Hi, again, Tarquin.
Continuing this thread. Still the same client site... almost ready. Now my
problem is with the cookie. I decided to use your cookie script to save the
state of the menu, but it's not working. I have tried to debug with Opera
and FF, but don't get anywhere. There are no errors. I don't see the
cookie being saved by Opera. No idea what's happening.
The site is accessible at [URL]
Thank you for any insight into why the two scripts are not working together.
Maia Good
| From | Me |
|---|
| To | Maia Good |
|---|
| Subject | Re: Modify location of +- in nested list collapsing script |
|---|
| Date | 25 September 2008 23:13 |
|---|
Maia,
> I don't see the cookie being saved by Opera.
You used this:
window.onunload = setCookie('menuState',stateToFromStr('menu'));
That won't work. You are running the cookie script immediately, and
assigning the return value to window.onunload, instead of assigning it a
function that will run the cookie script when the user leaves the page:
window.onunload = function () {
setCookie('menuState',stateToFromStr('menu'));
};
See the instructions here:
http://www.howtocreate.co.uk/tutorials/jsexamples/listCollapseExample.html
| From | Maia Good |
|---|
| To | Me |
|---|
| Subject | Re: Modify location of +- in nested list collapsing script |
|---|
| Date | 26 September 2008 00:11 |
|---|
THANKS so much again. Don't know why I hadn't noticed that. Now there's
one question left - why is it that I keep getting more and more cookies
called 'menuState'? I would think that the value would be overwritten once
a cookie is set, but that's not the behavior I'm observing. I think I see
what's happening -one cookie is created for every URL visited.
So, if I have my list as a menu, and I'm in one page, when I exit that page
it creates a cookie for that page and the state of the menu for that page.
Then on another page if I change the state of the menu, when I exit it will
create another cookie, for that URL, with another value. And if I go to the
first page I'll see the state of the first page's list? Am I understanding
correctly?
If so, is there an easy way that I could use the same value for whatever
page I go to? In other words, retrieve the cookie on page load, and set it
on page unload overwriting the value rather than creating a new one.
Thanks.
Maia
| From | Me |
|---|
| To | Maia Good |
|---|
| Subject | Re: Modify location of +- in nested list collapsing script |
|---|
| Date | 26 September 2008 11:32 |
|---|
Maia,
> why is it that I keep getting more and more cookies
> called 'menuState'
Probably because of cookie paths (which default to the current directory).
Use this instead of the existing setCookie line:
setCookie('menuState',stateToFromStr('menu'),0,'\/');
See the documentation inside the cookie script for what this will do.
Tarquin
| From | Maia Good |
|---|
| To | Me |
|---|
| Subject | Re: Modify location of +- in nested list collapsing script |
|---|
| Date | 26 September 2008 12:08 |
|---|
Thanks again. I really appreciate your help. Not to mention your
scripts... ;-)
Maia