Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2005
    Location
    Delhi
    Posts
    76
    Thanks
    0
    Thanked 0 Times in 0 Posts

    table based folder tree

    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
    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/
    Last edited by sugata_bhar; 08-20-2008 at 12:38 PM. Reason: want to add example link

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Location
    New Jersey
    Posts
    116
    Thanks
    0
    Thanked 29 Times in 29 Posts
    As far as I can tell, the point you're at is that you need to learn JavaScript.
    Chaos
    Lost Souls: text based RPG | MUDseek: MUD gaming search | MUDfind: MUD resource sites | Discordian Quotes

  • #3
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts

  • #4
    New Coder
    Join Date
    Oct 2005
    Location
    Delhi
    Posts
    76
    Thanks
    0
    Thanked 0 Times in 0 Posts

    dotted line look needed

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •