...

View Full Version : table based folder tree



sugata_bhar
08-20-2008, 12:36 PM
my tree looks like this

but i need to create/automate this tree with javascript

something like:

http://sugatabhar.freetzi.com/test1.html

Please help

html code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
td div{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:11px;
}
a{
font-family:Verdana,Geneva,Arial,Helvetica,sans-serif;
font-size:11px;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td ><img alt="" src="img/base.gif" height="20" width="19"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="" src="img/minus.gif" height="20" width="19"></td>
<td ><img src="img/folderopen.gif" width="18" height="18" /></td>
<td ><div class="ParentNode">Company</div></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="" src="img/i.gif" height="20" width="19"></td>
<td><img alt="" src="img/t.gif" height="20" width="19"></td>
<td ><img src="img/folder.gif" width="18" height="18" /></td>
<td ><a href="The-Falana-Model.php" class="LeafNode">The Falana model </a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="" src="img/minus.gif" height="20" width="19" /></td>
<td ><img src="img/folderopen.gif" width="18" height="18" /></td>
<td ><div class="ParentNode">News</div></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="" src="img/i.gif" height="20" width="19" /></td>
<td><img alt="" src="img/minus.gif" height="20" width="19" /></td>
<td ><img src="img/folderopen.gif" width="18" height="18" /></td>
<td ><div class="LeafNode">Media</div></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="" src="img/i.gif" height="20" width="19" /></td>
<td><img alt="" src="img/i.gif" height="20" width="19" /></td>
<td><img alt="" src="img/t.gif" height="20" width="19" /></td>
<td ><img src="img/folder.gif" width="18" height="18" /></td>
<td ><a href="In-the-News.php" class="LeafNode">In The News </a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="" src="img/i.gif" height="20" width="19" /></td>
<td><img alt="" src="img/i.gif" height="20" width="19" /></td>
<td><img alt="" src="img/t.gif" height="20" width="19" /></td>
<td ><img src="img/folder.gif" width="18" height="18" /></td>
<td ><a href="Press-Releases.php" class="LeafNode">Press Releases </a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="" src="img/i.gif" height="20" width="19" /></td>
<td><img alt="" src="img/i.gif" height="20" width="19" /></td>
<td><img alt="" src="img/l.gif" height="20" width="19" /></td>
<td ><img src="img/folder.gif" width="18" height="18" /></td>
<td ><a href="CNBC-Mpegs.php" class="LeafNode">X-papers </a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="" src="img/i.gif" height="20" width="19" /></td>
<td><img alt="" src="img/l.gif" height="20" width="19" /></td>
<td ><img src="img/folder.gif" width="18" height="18" /></td>
<td ><a href="White-Papers.php" class="LeafNode">White Papers </a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/plus.gif" width="19" height="20" /></td>
<td ><img src="img/folder.gif" width="18" height="18" /></td>
<td ><a href="Contacts.php" class="LeafNode">Contacts</a></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="" src="img/l.gif" height="20" width="19" /></td>
<td ><img src="img/folder.gif" width="18" height="18" /></td>
<td ><a href="Terms-of-Use.php" class="LeafNode">Terms of Usage </a></td>
</tr>
</table>

</body>
</html>



the images are available at:
http://sugatabhar.freetzi.com/img/

chaosprime
08-20-2008, 03:26 PM
As far as I can tell, the point you're at is that you need to learn JavaScript (http://www.w3schools.com/js/).

ohgod
08-20-2008, 06:11 PM
http://abeautifulsite.net/notebook.php?article=21

i use ^^^ and it works fine

sugata_bhar
08-21-2008, 06:34 AM
Hi Ohgod

Thanks for the folder tree link. But i need the look and feel to be like:
http://sugatabhar.freetzi.com/test1.html

Can u please help me in customizing the css

Thanks
Sugata



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum