|
ActiveTree - Script creates dynamic lists |
|
|
|
|
Friday, 21 December 2007 |
|
I wrote client-side javascript that will convert nested lists (<ul> tags) into dynamic lists. All you have to do is create a reference to the activetree.js file in your web page. Then, add the “active-tree” class to all of the lists that you want dynamic.
Live demo
Sample HTML
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
ActiveTree
</title>
<script language="javascript" type="text/javascript" src="/scripts/activeTree.js"></script>
<style type="text/css">
div.list-tree-1 ul {list-style: none;}
div.list-tree-1 ul li {font-weight:bold;margin-bottom:10px;}
div.list-tree-1 ul li ul {list-style-image:none;margin-top:6px;margin-bottom:6px;}
div.list-tree-1 ul li ul li {font-weight:normal;margin-bottom:6px;}
</style>
</head>
<body>
<div class="list-tree-1">
<ul class="active-tree">
<li><a href="#stub">item one</a></li>
<li><a href="#stub">item two</a></li>
<li><a href="#stub">item three</a>
<ul>
<li><a href="#stub">item three - sub one</a></li>
<li><a href="#stub">item three - sub two</a></li>
<li><a href="#stub">item three - sub three</a></li>
<li><a href="#stub">item three - sub four</a></li>
<li><a href="#stub">item three - sub five</a></li>
</ul>
</li>
<li><a href="#stub">item four</a></li>
<li><span>item five</span>
<ul>
<li><a href="#stub">item five - sub one</a></li>
<li><a href="#stub">item five - sub two</a></li>
<li><a href="#stub">item five - sub three</a></li>
<li><a href="#stub">item five - sub four</a></li>
<li><a href="#stub">item five - sub five</a></li>
</ul>
</li>
<li>item six</li>
</ul>
</div>
</body>
</html>
Basic instructions
- Download the script and associated images (expand and collapse GIF images)
- Place the activetree.js file somewhere on your server. Let's assume you placed it in a folder called “scripts” that is located in the root. (/scripts/activetree.js)
- Place the expand.gif image and the collapse.gif image in your images folder. By default, the script looks for those images in a folder in the root called “images”. Please update the activetree.js file if you would like those images to sit somewhere else. The variables for the image location is located that the top of the script.
- Add a script tag to the <head> area of your web page.
- <script language=”javascript” type=”text/javascript” src=”/scripts/activetree.js” />
- Place class=”active-tree” in the root <ul> tag of all of the lists that you want dynamic.
Additional Information
- You can control the look of the dynamic list by encasing the list in a <div> tag. Add a class to the <div> tag and control the look-n-feel of the list through CSS.
- By default, the dynamic list is collapsed when the browser loads. You can use the “active-tree-expanded” class if you want the list expanded when the browser loads.
- This script has only been tested in Firefox, IE 6 SP2, and IE 7.
- This script converts all static lists during the “onload” event of the browser's window. The user may see long lists collapse if the user has a slow CPU and the list(s) has a large number of nested items. This can be fixed by removing the initialization of the script from the “onload” event. You can then place a script tag at the bottom of the page that manually calls the initialization function. This will fire before the “onload” and the user will not see the construction of the dynamic lists.
- All parent items should be encased in a tag (<a> or <span>). This is only required if you plan on using the auto-expand functionality.
- The auto-expand functionality is optional and is activated by default. There is a variable in the top of the activetree.js file that can be set to false if you don't want the auto-expand feature.
Download the code
Here's the active-tree script and associated files. If you update the script by fixing bugs, making it more cross-browser compatible, etc.... please add a comment below with the segment of script that you updated so it will help everyone. Thanks!
|
NewLuna