Today's Episode:
Watch Out For That Tree!
Recently at my day job, I was web-enabling the client side of a client-server application. One of the client windows displayed data returned from the server in the form of an expandable/collapsable tree like you see in some MS Windows dialogs. In the interests of time, I desperately wanted to stay away from Java. What to do, what to do...
At webreference.com, there is an article on how to implement a similar construct using Javascript and CSS rules. Though it worked, I was not impressed with the amount of Javascript they used. So I started tinkering, using the article as a starting point. The results (accessible by using the View Source command of your browser) are in the CSS styles, Javascript, and HTML structure on this page.
The technique works by encasing the data you wish to be "treed" in <DIV> blocks. We assign each of these blocks to CSS class node and give each a unique id. The blocks start out with their display attribute set to none, effectively rendering them invisible upon initial page load. When the user wants to toggle a level, they click on the folder image. This runs a Javascript that (depending on the initial visiblilty of the targeted tree node) changes the image and sets the display attribute of the associated tree node to either block or none. The browser then takes care of reflowing the visible content. All in only 8 lines of Javascript!
BUGS FEATURES
There are some oddities with its functioning that I have noted, but have not been motivated enough to research further.
- On both Mozilla (0.7+ on Linux) and Internet Explorer (5.x on Windows 98 and above), it takes a double-click to start toggling a tree layer. Once this has been done, single clicks are all that is required to toggle tree nodes.
- On IE 5.x for the Macintosh, three mouse clicks are required to perform this priming function. At random intervals, multiple mouse clicks are neccessary to toggle tree nodes.
UPDATE: Reader Steve Sartain pointed out that the above feature is caused by a bug in IE that causes it to not recognize a style set by a stylesheet when initially referenced by Javascript. His fix was to explicitly set the style property of each <div class="node"> element to display: none. It may seem redundant to the casual observer, but it kills the bug feature dead on IE/Mac and Mozilla/Linux. Thanks, Steve!
First Category