New DHTML Tree Available (no js programing required!)

[Matt Kruse]

I've just put up a new script on my site:

http://www.mattkruse.com/javascript/mktree/

This script combines javascript and some tricky CSS to create the
easiest-to-implement expandable/collapsable tree I've seen anywhere.

Just define your tree structure in an <UL> list, set its CSS class,
include the .js source file, and that's it! Newer browsers will see it
as a fully-functional tree, and older browsers will see the plain
unordered list.

You don't have to touch a single javascript command (other than the
include!) to make a fully-functional tree in your page.

Oh, and don't worry, it's free ;)

The concept is based on work of others, as listed on the page above.
Hats off to them for doing a lot of the dirty proof-of-concept work!

Comments welcome, here or in email!

Matt Kruse
The Javascript Toolbox: http://www.mattkruse.com/javascript/

[Peter Foti]

Re: New DHTML Tree Available (no js programing required!)

"Matt Kruse" <matt@mattkruse .com> wrote in message
news:7a6fa093.0 312091418.7cb85 dc2@posting.goo gle.com...[color=blue]
> I've just put up a new script on my site:
> http://www.mattkruse.com/javascript/mktree/
>
> This script combines javascript and some tricky CSS to create the
> easiest-to-implement expandable/collapsable tree I've seen anywhere.[/color]

I have yet to look at the code, but my initial browsing of the site above
seems positive.

Comments:
1. I think your "JavaScript " logo at the top of the page is probably
trademarked by O'Reilly, so you may want to reconsider whether or not to
include that on the page. (I could be wrong though)
2. It took me a while to notice the navigation under the "DHTML Tree". You
might include additional links to your Source page within the text of other
pages (like the Example and Documentation pages), for usability. For
example "See the *Documentation* for details ... Download the source from
the *Source* page"

I know those are not really related to your code, but I thought I would
offer it anyway. :)
Regards,
Peter Foti

[Matt Kruse]

Re: New DHTML Tree Available (no js programing required!)

"Peter Foti" <peterf@systoli cnetworks.com> wrote:[color=blue]
> I have yet to look at the code, but my initial browsing of the site above
> seems positive.[/color]

Well that's good - it's only been around for years :)
[color=blue]
> 1. I think your "JavaScript " logo at the top of the page is probably
> trademarked by O'Reilly, so you may want to reconsider whether or not to
> include that on the page. (I could be wrong though)[/color]

Yes, it's their image. I'll remove it if they ask.
Actually, I'll do a whole site redesign someday, and move stuff over to

http://www.JavascriptToolbox.com/

[color=blue]
> 2. It took me a while to notice the navigation under the "DHTML Tree".[/color]
You[color=blue]
> might include additional links to your Source page within the text of[/color]
other[color=blue]
> pages (like the Example and Documentation pages), for usability. For
> example "See the *Documentation* for details ... Download the source from
> the *Source* page"[/color]

True. Wanna do my site redesign? It's boring to me. I like doing fun new
things :)

Hope to get some comments on the lib itself :)

Matt

[Nick Kew]

Re: New DHTML Tree Available (no js programing required!)

In article <7a6fa093.03120 91418.7cb85dc2@ posting.google. com>, one of infinite monkeys
at the keyboard of matt@mattkruse. com (Matt Kruse) wrote:[color=blue]
> I've just put up a new script on my site:
> http://www.mattkruse.com/javascript/mktree/[/color]

I had a few problems with that: it does nothing (but degrades OK)
in Konqueror, but is causing Moz to crash (FreeBSD/KDE).

I'm guessing it should look something like the Document Tree view in
AccessValet? ( http://valet.webthing.com/access/ )

--
Nick Kew

In urgent need of paying work - see http://www.webthing.com/~nick/cv.html

[Philipp Lenssen]

Re: New DHTML Tree Available (no js programing required!)

Matt Kruse wrote:
[color=blue]
> I've just put up a new script on my site:
> http://www.mattkruse.com/javascript/mktree/
>
> This script combines javascript and some tricky CSS to create the
> easiest-to-implement expandable/collapsable tree I've seen anywhere.
>[/color]

Sounds nice. I've done something in ASP which browses the file-system
anc creates such a DHTML tree. If the client allows it can also be done
on the client side (the XSLT).
<http://outer-court.com/tech/asp_sitemap.htm >

[tony kulik]

Re: New DHTML Tree Available (no js programing required!)

On 9 Dec 2003 14:18:15 -0800, matt@mattkruse. com (Matt Kruse) wrote:
[color=blue]
>I've just put up a new script on my site:
> http://www.mattkruse.com/javascript/mktree/
>
>This script combines javascript and some tricky CSS to create the
>easiest-to-implement expandable/collapsable tree I've seen anywhere.
>
>Just define your tree structure in an <UL> list, set its CSS class,
>include the .js source file, and that's it! Newer browsers will see it
>as a fully-functional tree, and older browsers will see the plain
>unordered list.
>
>You don't have to touch a single javascript command (other than the
>include!) to make a fully-functional tree in your page.
>
>Oh, and don't worry, it's free ;)
>
>The concept is based on work of others, as listed on the page above.
>Hats off to them for doing a lot of the dirty proof-of-concept work!
>
>Comments welcome, here or in email!
>
>Matt Kruse
>The Javascript Toolbox: http://www.mattkruse.com/javascript/[/color]

Execellent script! I spent a long time looking for such a script for a
database driven php cms script I wrote. This will probably call for a
rewrite. I urge you to add the cookies to maintain state as this is
essential the kind of complex menus this script is capable of. I've
bookmarked you and will check back. Thanks!

Tony
Thanks

Tony Kulik

[Dave Patton]

Re: New DHTML Tree Available (no js programing required!)

matt@mattkruse. com (Matt Kruse) wrote in
news:7a6fa093.0 312091418.7cb85 dc2@posting.goo gle.com:
[color=blue]
> I've just put up a new script on my site:
> http://www.mattkruse.com/javascript/mktree/
>
> This script combines javascript and some tricky CSS to create the
> easiest-to-implement expandable/collapsable tree I've seen anywhere.
>
> Just define your tree structure in an <UL> list, set its CSS class,
> include the .js source file, and that's it! Newer browsers will see it
> as a fully-functional tree, and older browsers will see the plain
> unordered list.
>
> You don't have to touch a single javascript command (other than the
> include!) to make a fully-functional tree in your page.
>
> Oh, and don't worry, it's free ;)
>
> The concept is based on work of others, as listed on the page above.
> Hats off to them for doing a lot of the dirty proof-of-concept work!
>
> Comments welcome, here or in email![/color]

FWIW:
I took a look using Mozilla, and it seemed to work OK.
I then loaded the page in IE6, and it's still loading,
minutes later. I'm mentioning this in case you get
similar comments from others.
In fact, it's probably nothing to do with your page, per se.
The page appeared to load, but without the + signs and bullets
in the list, which I thought was odd. Then I noticed that IE
was telling me it had 130+ items left to download. It was proceeding
to update this message every few seconds, 4 items at a time.
I think it's a configuration issue with Norton Internet Security 2004,
which I recently installed.
Once the page was finished loading, the + signs and bullets didn't
appear until I reloaded the page.
In other words, if people have the same issue as I have, they may
mistakenly think the page doesn't work properly in IE6.

--
Dave Patton
Canadian Coordinator, the Degree Confluence Project
http://www.confluence.org dpatton at confluence dot org
My website: http://members.shaw.ca/davepatton/
Vancouver/Whistler - host of the 2010 Winter Olympics

[Matt Kruse]

Re: New DHTML Tree Available (no js programing required!)

"Dave Patton" <dpatton@remo ve-for-nospam.confluen ce.org> wrote:[color=blue]
> matt@mattkruse. com (Matt Kruse) wrote in
> news:7a6fa093.0 312091418.7cb85 dc2@posting.goo gle.com:
> The page appeared to load, but without the + signs and bullets
> in the list, which I thought was odd. Then I noticed that IE
> was telling me it had 130+ items left to download. It was proceeding
> to update this message every few seconds, 4 items at a time.
> I think it's a configuration issue with Norton Internet Security 2004,
> which I recently installed.[/color]

That is interesting. I've not experienced it myself on a number of IE6 test
computers, but I do believe you ;)

One issue that does exist is that IE5.5+ doesn't always like to cache images
used as a background in CSS, which is done in this script. I did some
tweaking and thought I got rid of the problem, though, since I don't see it
anymore (it used to be _really_ bad!).

I'm going to keep looking at this issue, since trees could potentially get
large, and having to download a thousand +/- images over the internet could
be a bit slow :)

Thanks for the feedback, I'll keep it in mind for future reference and try
to come up with some solution to the general problem.

Matt