New DHTML Tree Available (no js programing required!)

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/

"Matt Kruse" <matt (AT) mattkruse (DOT) com> wrote

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.

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

In article <7a6fa093.0312091418.7cb85dc2 (AT) posting (DOT) google.com>, one of infinite monkeys
at the keyboard of matt (AT) mattkruse (DOT) com (Matt Kruse) wrote:

I've just put up a new script on my site:
http://www.mattkruse.com/javascript/mktree/

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

"Peter Foti" <peterf (AT) systolicnetworks (DOT) com> wrote:

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

Well that's good - it's only been around for years

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)

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/

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"

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

Matt Kruse wrote:

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.

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>

Matt Kruse wrote:

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.

Should it work with IE5? I don't have it now to test but from looking at
the code it seems you only show the plain unordered list while IE5 has
the necessary DOM support to create elements and nodes. Only

addEvent(window,"load",convertTrees);

// Utility function to add an event listener
function addEvent(o,e,f){
if (o.addEventListener){ o.addEventListener(e,f,true); return true; }
else if (o.attachEvent){ return o.attachEvent("on"+e,f); }
else { return false; }
}

excludes IE5 as it doesn't have attachEvent or addEventListener but you
could set
window.onload = f;
to call your function with IE5. It of course could make your code
collide with any other script in the page trying to set window.onload
but if someone just puts your script in the page then you could get IE5
users to have the collapsible list.

--

Martin Honnen
http://JavaScript.FAQTs.com/

On 9 Dec 2003 14:18:15 -0800, matt (AT) mattkruse (DOT) com (Matt Kruse) wrote:

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/

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

matt (AT) mattkruse (DOT) com (Matt Kruse) wrote in
news:7a6fa093.0312091418.7cb85dc2 (AT) posting (DOT) google.com:

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!

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

"Dave Patton" <dpatton (AT) remove-for-nospam (DOT) confluence.org> wrote:

matt (AT) mattkruse (DOT) com (Matt Kruse) wrote in
news:7a6fa093.0312091418.7cb85dc2 (AT) posting (DOT) google.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.

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