Email conversation
| From | Brady McCain |
|---|
| To | Me |
|---|
| Subject | Nested list collapsing script - using plain text in <li> followed by underlined link |
|---|
| Date | 29 September 2006 20:52 |
|---|
Hi,
I've got your nested list collapsing script working fine with one exception
that I can't quite figure out.
I have a list of items, let's say:
1 Main Item
1a Sub-Item
1b Sub-Item
1c Sub-Item
2 Main Item
3 Main Item
4 Main Item
4a Sub-Item
4b Sub-Item
You can view the page where I'm testing it here:
[URL].
The link for a Main Item with no children has an underline that spans only
the text and works fine because of my <a href> tag. But any Main Item with
Sub-Items causes the link underline to span across the number and text. Is
there a way to have it only underline the text in the <li>?
Brady McCain
| From | Me |
|---|
| To | Brady McCain |
|---|
| Subject | Re: Nested list collapsing script - using plain text in <li> followed by underlined link |
|---|
| Date | 29 September 2006 22:49 |
|---|
Brady,
> Is there a way to have it only underline the text in the <li>?
The script itself does not have any way to do this. However, there are some
possibilities that you might want to try.
1. If you do not care about Internet Explorer, you can use CSS generated
content, perhaps with CSS counters, to produce the list numbering. I do not
see this as a popular idea.
2. Put the numbers _after_ the text, and float them to the left. Note that
you will need to include a link tag somewhere before it, to ensure the
script does not put it inside the link:
li span { float: left; margin-right: 0.5em; }
...
<li>The text<a></a> <span>1a</span>
...
<li><a href="foo">The text with its own link</a> <span>1b</span>
3. Put this at the start of the LI, before your numbers <a></a> and make
sure that you set the new HTML ('± ') to an empty string (''). The
script will create the expanding link at the start of the LI, but it will be
empty so you will not see it. You can then put your own expand link, with
this as its HREF:
javascript:this.parentNode.firstChild.onclick();
Clicking that will activate the invisible link's click handler, making it
expand/collapse. This will be messy in non-DOM browsers.
Personally I like #2, but whatever suits you. No promises. All will have
their disadvantages, and #2 and #3 are hacks. #1 is the "right" way to do
it, but without IE supporting the required CSS, it will not be useful for
most sites.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/