Mike Byrne

Hi,

I have become a big fan of the nested list collapsing script you wrote
because I like the way it degrades gracefully and it allows items that
should be listed in an order, like a list of actions, to be written down as
such while giving many more options on the display of them.

I am using the script on a Tea website to show the steps on how to make a
cup of tea - [URL]. The steps are done as per
your script with some css to control all the sizing and positioning, each
step has a flash movie and some text explaining the step. And this works
fine, bar a few flash display glitches (which I have now fixed thanks to the
[brand] method of embeddeding flash - [URL]).

What I want to do is this: At the end of the text describing the step, place
a  "next step" link.

Is there an easy way to do this, by calling clickSmack? Or is the only way
to make some custom javascript that makes the listCollapse.js think its
checking a cookie and so collapse the list as though reading a saved state?
Can you think of an easier way than this?

Any help would be much appreciated.

Cheers

--------------------------------------
Mike Byrne

I'm glad you found enough value in my comment to incorporate the idea into
your site -- I hoped that I wasn't just adding static to your life.

>> Wow, if you can quickly scan that much information, I envy your mental
>> agility. But ok, if it suits you, then good :)

Scanning doesn't necessarily imply comprehension, but it can help you
achieve it. Humans look for patterns, and when you're trying to get a handle
on a large amount of information, it sometimes helps to be able to let your
eye wander over a structured representation of the data, stopping to look at
details here and there, picking up on relationships between different parts,
etc. 

(I'm regurgitating poorly digested ideas taken from the work of Edward Tufte
here, and it's very possible that I've completely misinterpreted him, so
feel free to scoff at my justification.)

>> The dashes are a little odd, but they are used by the script to work out where
>> to put linebreaks.

Would it make any sense to write <br /> tags in the source code instead of
dashes, and then replace the breaks with \n when you create the alerts? That
way the no-script representation would be closer to the format of the
alerts. The downside would be a longer page, but if the information is more
readable, it might be a reasonable trade-off.

>> Changing the option works in Opera, Firefox, Konqueror and IE/win. It
>> runs a little slowly in IE, but not too bad. It does not work in
>> Safari/iCab because they refuse to remove a stylesheet once it has been
>> added. It does not work at all in IE Mac because it cannot dynamically
>> add stylesheets (so the information is always visible anyway).

I'm going to stick my neck out and make a naïve suggestion that I'll
probably realize is either not possible or unwise, once I've finished
reading tutorials on JavaScript and CSS...

Would it be possible to write "ul.treeview span { display: none; }" into a
style tag on the page, instead of attaching a separate stylesheet? Then
toggle the display property when the user clicks the link? If it's possible,
would it make the page more compatible with Safari/iCab? Would you lose
compatibility with any browsers?

Or (less elegantly) could the script go through and add/change inline styles
on each affected span?

As an aside, I've spent the entire morning (I'm slow) studying your tree
pages to figure out how you accomplished this sleight-of-hand.

The first thing that threw me was finding where the code lived--I couldn't
find it in the two .js files that are loaded in the head, and it was some
time before I spotted the file that you load just above the contents.
(Newbie mistake on my part.)

The thing I still don't get is why I don't see any of the onClick attributes
in the source code, even when I use Firefox's WebDevloper extension to view
the generated source. I'm sure it'll come clear once I've worked through
your tutorials, but at the moment it remains opaque to me.

Thanks again for providing such a wonderful public service!

-Hilary

>> Would it make any sense to write <br /> tags in the source code instead of
>> dashes, and then replace the breaks with \n when you create the alerts?
>
> This makes manipulating it much harder. DOM is a bit laborious when it
> comes to multiple childNodes (unless I wish to resort to innerHTML,
> which I don't).

Good to know -- thanks.
 
> The dash is a good tradeoff, as we
> use them normally for punctuation.

I won't argue the point. I find it quite readable as it is. I was just
brainstorming on the assumption that you preferred the layout with breaks,
since they are inserted into the alerts. (Would the alert dialog not wrap
them to a reasonable width without \n?)
 
> Much worse than that. If JavaScript is not available, it would be
> completely invisible, and totally inaccessible.

I'll make one last stab at coming up with a useful thought: what if you
wrote "ul.treeview span { display: inline; }" into the source code, and then
changed it to display:none through JavaScript? That ought to preserve
accessiblity, but would it work in Safari/iCab, and not break in other
browsers?
 
> The way I do it now is a single change, and a single
> reflow, meaning a much faster effect.

That makes perfect sense, and I more or less expected there would be a
problem like that. I'll definitely keep that problem in mind when I start
trying to cook up my own scripts.
 
>> The thing I still don't get is why I don't see any of the onClick attributes
>> in the source code, even when I use Firefox's WebDevloper extension to view
>> the generated source.
> 
> I set them as using the .onclick syntax. This does not generate HTML, it
> just references a resolved value. If I had used setAttribute, then it
> changes the HTML, so you would see it (except IE does not allow that for
> event handlers).

Another priceless gem of information! Thanks!

btw... I'm CC:ing my colleague, [snip.]
I pointed him to your site yesterday, and he's also thinks
it's cool.

Thanks again!
-Hilary

Tarquin,

>> (Would the alert dialog not wrap
>> them to a reasonable width without \n?)
> 
> Only in good browsers (not IE, or some minor browsers). But it can also
> look better in some cases with controlled linebreaks.

Thanks -- and should I assume from the lack of comment that my last stab at
relevance (putting the treeview style in the source with display set to
inline, and then hiding it with JavaScript) didn't pass muster?

( To save you time, I'll assume that no further response means "yes"  :-)

-Hilary