Creating a Cross-Browser (DOM) Expandable Tree

by Volker Weber

As a user interface designer for Web applications, I find that there is a constant need (read: demand) for certain UI components across the board. The most commonly requested component is an expandable/collapsible tree, often referred to as an explorer tree (referring to its use in Microsoft Windows Explorer).

Previously, it could take a lot of time and effort to create a tree that could work in both Internet Explorer and Netscape Navigator. With recent improvements in Internet Explorer and Netscape, however, it is possible to make an expandable tree without needing any browser detection whatsoever.

This article will focus on building a JavaScript tree. The target browsers for this tree are Internet Explorer 5.0 and Netscape 6.1 (Netscape 6.0 had many bugs that could affect the proper display of the tree). This tree will be built with cross-browser code that works on both IE5 and NS6, so that the code requires no browser detection to work on these two browsers (note that if your users may still be using IE4 or NS4, you will need to do an additional browser detect to see if you can use the code in this article).

Sample

More >

Comments

Post a comment











Shall I remember this for you?




Use your full name and a working email address. Unless you want your comment to be removed. No kidding.



Recent comments

john head on Which Notes client do you use? at 17:21
Kevan Emmott on Apple is having a bit of a problem with the iPhone at 16:18
Michael Kobrowski on Apple is having a bit of a problem with the iPhone at 14:34
Henning Heinz on Which Notes client do you use? at 14:33
Bryan McDade on Four generations of the iPhone at 12:44
Hanno Zulla on Lug und Trug von 1&1 at 11:41
Hubert Stettner on Apple is having a bit of a problem with the iPhone at 11:37
Stefan Domanske on Apple is having a bit of a problem with the iPhone at 11:32
Andreas Imnitzer on Which Notes client do you use? at 11:28
Volker Weber on Apple is having a bit of a problem with the iPhone at 11:26
Volker Weber on Apple is having a bit of a problem with the iPhone at 11:22
Andrew Dempster on Which Notes client do you use? at 11:22
Hubert Stettner on Apple is having a bit of a problem with the iPhone at 11:17
Martin Kautz on Apple is having a bit of a problem with the iPhone at 11:03
Albert Buendia on Which Notes client do you use? at 10:51
Reinhard Steurer on Which Notes client do you use? at 08:10
Maik Endler on Lug und Trug von 1&1 at 07:41
Detlev Buschkamp on Which Notes client do you use? at 06:04
Olaf Boerner on Which Notes client do you use? at 05:34
Bruce Elgort on Which Notes client do you use? at 01:05
Richard Moy on Which Notes client do you use? at 00:19
Timo Stamm on Lug und Trug von 1&1 at 23:46
Stephan Perthes on Four generations of the iPhone at 23:18
Andreas Braukmann on I think I want one at 23:05
Paul Mooney on Which Notes client do you use? at 22:50

Ceci n'est pas un blog

vowe.net is a personal website published by Volker Weber a.k.a. vowe. I am an author, consultant and systems architect based in Darmstadt, Germany.

rss Click here to subscribe

Hello

About me
Contact
Publications
Certificates
Frequently asked questions
Join the network

Twitter Updates

More >

Local time is 18:28

visitors.gif
156 visitors online

News

Other sources of news, imported into my own format to make them more accessible:

Schlagzeilen
Weather

Archives

As most of my articles roll off the front page rather quickly, I am making an archive of previous posts available here. You can also use the handy search box at the top of the page if you are looking for something particular.

Last 30 days
More archives

Got the T-shirt?

Got the T-shirt?

Systems Architecture

This site runs on an Apache web server on top of the Linux operating system. The content is managed with MovableType which is implemented in Perl. Last but not least the HTML code your browser sees is put together with PHP.

© 1992-2010 Volker Weber.
All Rights Reserved.

Impressum