Steve Nelson

Navigation

Skip navigation.

Search

Site navigation

Email conversation

FromSteve Nelson
ToMe
Subjectnested list collapse menu - top level li as link in addition to trigger?
Date18 September 2005 20:30
Tarquin;

I admit that was sort of an ugly subject line. I was trying to  conform to
your suggestions for informative subject lines!

1) What a FABULOUS resource your site it. Thanks you SO MUCH.

2) What a FABULOUS script your "Nested List Collapsing Script" is.  Thank
you so much!

3) I love everything about your nested list collapse menu. I  especially
love how easy it makes indicating the current page. I have  implemented it
in a prototype for a redesign for the church I attend.
[URL]

4) Here's the question. (And I have written enough tutorials to know  what a
mental clutter reader questions become, so I am grateful to  even general
pointers you have.) The others on my committee love  ALMOST everything about
the menu. The problem they have is that  clicking on a top level menu item
("About Us" for example) doesn't  load a page. They feel this runs contrary
to user expectations and  requires a redundant "Intro" item in the nested
list ("A Brief  Overview" in the "About Us" example above).

In a perfect scenario, clicking "About US" would BOTH
  - expand the sub category links AND
  - load the summary/intro page for that category.

When I try wrapping the top level <li> in an anchor element... well  I'm
sure I don't need to tell you what happens.

I have seen at least two other sites that use a collapsing menu since  I
became infatuated with yours, and they behave the same way: click a  top
level menu item and the sub links are revealed but no new page  loads.
(Examples: fairly austere: [URL] somewhat fancier: [URL])

Maybe it is not possible to do what I hope to do. But if it IS  possible
could you give me a pointer as to how to make it happen? In  addition to
fulfilling user expectations that clicking a link loads a  new page, I have
read articles on usability (Joe Clark wrote a long  one) that advise
designers using various "tricky" menus to provide  redundant links in an
intro page for uses with visual or manual  dexterity issues or whatever.
This is hard to implement if the top  level item doesn't load a page.

Thank you so very much for your time and your wonderful code.

Steve Nelson
FromMe
ToSteve Nelson
SubjectRe: nested list collapse menu - top level li as link in addition to trigger?
Date18 September 2005 21:11
Steve,

> I admit that was sort of an ugly subject line.

works for me ;)

> 1) What a FABULOUS resource your site it. Thanks you SO MUCH.
> 2) What a FABULOUS script your "Nested List Collapsing Script" is.  Thank
you so much!

Good to hear you like it :)

> When I try wrapping the top level <li> in an anchor element... well  I'm
> sure I don't need to tell you what happens.

Indeed. On my site, it breaks onto two lines. The reson for that is very
simple - it's because I use display:block; in the links. I have tried adding
these links to the lists on your own site (where you are not using
display:block;) and it worked fine.

Am I missing something here?

> I have read articles on usability (Joe Clark wrote a long  one) that
> advise designers using various "tricky" menus to provide  redundant links in
> an intro page for uses with visual or manual  dexterity issues or whatever.
> This is hard to implement if the top  level item doesn't load a page.

In the case of my script, this is completely unnecessary, as the script
itself is naturally accessible. If it cannot run, the list remains fully
expanded, so everything is available. However, you have changed that
functionality by adding this:

#coreMenu ul {
    display:none;

I recommend you remove that, because you are making the page less
accessible. My script will take care of everything for you.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
FromSteve Nelson
ToMe
SubjectRe: nested list collapse menu - top level li as link in addition to trigger?
Date18 September 2005 21:49
I'm staggered by the speed of your reply!!!

> Am I missing something here?

It's clearly me who is missing something.
"it worked fine" - by that you mean you were able to get a top level  <li>
to
  - link to a page
  - expand the nested list and
  - be on the same line as the marker symbol? Gads, I can't get it.

Are you saying I should or should NOT have the display:block; line in  the
style sheet? If If I SHOULD, where should it be? If I wrap a top  level <li>
in an anchor element and don't have display:block anywhere  in the style
sheet it links to that page but doesn't trigger  expanding the nested list.
If I put display:block anywhere that makes  sense to me, it wraps to two
lines and only the +- symbol expands the  nested list. Clearly I'm missing
which element should be a block  element. I tried

#coreMenu li, #coreMenu a {
/*proposed fix*/
    display:block;
    etc;
}

(Note: working on this locally; version online is unchanged.)

> In the case of my script, this is completely unnecessary, as the  script
> itself is naturally accessible. If it cannot run, the list  remains fully
> expanded, so everything is available. However, you  have changed that
> functionality by adding this:
>
> #coreMenu ul {
>     display:none;
>
> I recommend you remove that, because you are making the page less 
> accessible. My script will take care of everything for you.

I did so and couldn't see that it affected anything one way of the  other,
so I'll leave it out I guess. Sorry to persist.

Steve
FromMe
ToSteve Nelson
SubjectRe: nested list collapse menu - top level li as link in addition to trigger?
Date18 September 2005 22:06
Steve,

> "it worked fine" - by that you mean you were able to get a top level <li> to
>   - link to a page
>   - expand the nested list and
>   - be on the same line as the marker symbol? Gads, I can't get it.

not exactly. There will be two links. one containing the +- symbol (or
whatever you choose to put there), and one that is your link. It is not
possible to make the text expand _and_ follow the link, otherwise you would
click it, and it would expand, but at the same time it would also follow the
link.

That is why the script allows you to put extra +- text - that way there is
something to click-to-expand when there is a link on the same line.

> Are you saying I should or should NOT have the display:block; line in  the
> style sheet?

correct, you should not have it, or it will break the line.

>> I recommend you remove that, because you are making the page less 
> accessible. My script will take care of everything for you.
>
> I did so and couldn't see that it affected anything one way of the  other,
so I'll leave it out I guess.

good :) that means the script is working. If you use a browser that does not
support it (netscape 4, IE 4, Opera 6 or earlier, etc), you will see them
fully expanded.
FromSteve Nelson
ToMe
SubjectRe: nested list collapse menu - top level li as link in addition to trigger?
Date18 September 2005 22:19
Wow - you're so fast this is more like instant messaging than e-mail.
:)

> not exactly. There will be two links. one containing the +- symbol  (or
> whatever you choose to put there), and one that is your link.  It is not
> possible to make the text expand _and_ follow the link,  otherwise you would
> click it, and it would expand, but at the same  time it would also follow
> the link.

"otherwise you would click it, and it would expand, but at the same  time it
would also follow the link."

That's precisely what I want to do. When one clicks the "About US"  menu
item I would love for it to load a new page AND at the same time  expand the
nested menu.

Well - it's good to know it's not me doing something wrong. No one is  going
to figure out that clicking the symbol does something different  than
clicking the text next to it. BUT - if I have the top level <li>  link to an
intro page which contains one or more links to sub topic  pages, clicking
one of them does expand the nested list in the main  menu. I may have to
live with that.

Thanks. Let's see how this compromise goes over with the committee. I  sure
do appreciate your help.

Steve
FromMe
ToSteve Nelson
SubjectRe: nested list collapse menu - top level li as link in addition to trigger?
Date18 September 2005 22:41
Steve,

> "otherwise you would click it, and it would expand, but at the same  time
> it would also follow the link."
>
> That's precisely what I want to do. When one clicks the "About US"  menu
> item I would love for it to load a new page AND at the same time  expand the
> nested menu.

Well, if the script automatically opens to the current page when the page
loads, that should not be needed, but I guess you know your requirements
better than me :)

Ok, then this should do what you need:

function prepareLinksIn(oId) {
  if( !document.getElementsByTagName ) { return; }
  var theLinks = document.getElementById(oId).getElementsByTagName('a');
  for( var i = 0; i < theLinks.length; i++ ) {
    if( theLinks[i].parentNode.getElementsByTagName('ul').length ) {
      theLinks[i].onclick = function () {
        if( this.previousSibling && this.previousSibling.onclick ) {
          this.previousSibling.onclick();
        }
      };
    }
  }
}

You can call this function _before_ you collapse the menu:

window.onload = function () {
  prepareLinksIn('someID');
  compactMenu('someID',false,'&plusmn; ');
}

Tarquin
FromSteve Nelson
ToMe
SubjectRe: nested list collapse menu - top level li as link in addition to trigger?
Date18 September 2005 23:26
Almost. It loads the page and displays the expanded sub topics  briefly but
then it snaps closed again.

Listen - I'm awfully sorry to take up so much of your time on this.  Feel
free to tell me to get over it and find something meaningful to  worry
about...

Steve
FromMe
ToSteve Nelson
SubjectRe: nested list collapse menu - top level li as link in addition to trigger?
Date18 September 2005 23:32
Steve,

Are you using the cookie as well (if you are, you will need to modify the
onload handler in the script I sent you last time, because I did not include
the part that uses the cookie)? if so, I guess onunload fires too quickly
(before the menu expands), and I don't think there is anything I can do
about it. If not, then you should try using it.

Tarquin
FromSteve Nelson
ToMe
SubjectRe: nested list collapse menu - top level li as link in addition to trigger?
Date19 September 2005 00:04
> Are you using the cookie as well (if you are, you will need to  modify the
> onload handler in the script I sent you last time,  because I did not
> include the part that uses the cookie)? if so, I  guess onunload fires too
> quickly (before the menu expands), and I  don't think there is anything I
> can do about it. If not, then you  should try using it.

I had been. I tried removing the onunload statement from the <body>  element
altogether plus the link to the cookie script and it didn't  change
anything.

Still get a flash of the expanded submenu and then it closes up again.

Thanks for everything.

Steve
FromSteve Nelson
ToMe
SubjectDoes aol not like your PHP email validator?
Date21 March 2006 22:24
Hi Mark;

Thanks once again for all the fabulous resources you offer on your site.

I'm sorry to pester you. I'm trying to track down why a valid aol
address gets rejected by your PHP email validator. I don't know if
it's the script, my host (Dreamhost) or aol. Other (non-aol) addresses
work great. The aol address works on YOUR site's demo. But when I try
it on my site it fails.

I set up a debug version of the script so I could see what came back.
It polled 4 aol mail servers and each returned the following:

"Created socket (Resource id #2) to mailin-02.mx.aol.com
mailin-02.mx.aol.com did not send SMTP connection header: 554-
(RTR:DU) [URL]"

So do you think this is some sort of defense on the part of the aol
servers? Do they not like being spoken to directly by a script? Is
Dreamhost unpopular with aol? I can't figure out why other (non-aol)
addresses work okay for me and even aol addresses work okay for you
but not for me.

Thanks for any insights you might be able to offer. I'd rather not
have to revert to a dumber regex email check but I don't want to block
aol users' access to this site.

My debug script is here (temporarily):
[URL]
the addresses I tried were
[address] and [address]
FromMe
ToSteve Nelson
SubjectRe: Does aol not like your PHP email validator?
Date21 March 2006 23:54
Steve,

> The aol address works on YOUR site's demo. But when I try
> it on my site it fails.

It is quite likely that AOL have some special filtering on their site, and
do not allow connections from Dreamhost (I have come across things like this
before with my own ISP).

For what it's worth, AOL always accepts emails for anything@aol.com, even if
that specific account does not actually exist (meaning that the script
cannot tell for sure if an AOL account is real or not). You could just
accept any AOL addresses as valid - that is probably the best solution
considering the way AOL behaves.
FromSteve Nelson
ToMe
SubjectRe: Does aol not like your PHP email validator?
Date22 March 2006 03:58
Hi;

Thanks so much for the reply. I wasn't sure what you were suggesting
with the "anything@aol.com" so I tried plugging it into the debug
script and it still wouldn't fly:
"Could not establish SMTP session with any MX servers"

So I guess aol doesn't like being tickled by a script living on a
Dreamhost server.
:(

I only have access to one other host. I put the scripts on that site
and aol said "HELO", so that would seem to support the theory that aol
doesn't trust Dreamhost. (For the record, aol also passed
"anything@aol.com" from this host!)

The idea of doing a two-tier validation script that passes any
"@aol.com" address before the MX server conversation isn't real
appealing but I guess it might come to either that or a simpler
pattern-matching test for a well formed address.

Fooey on aol.

Anyway. Thanks again so much for taking the time to write, and thanks
again so much for all the superb information you make available!

Steve
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.