Making some kind of treeview with css - need some tips

Stoemp · Jul 20, 2005

Hi there

I'm making some sort of treeview (dynamically built up with ASP to print files and folders on our Intranet). I have 3 images: A simple vertical line, a vertical line with a horizontal in the middle to point to a file in the middle of a list and a corner to mark a file at the end of the list. Now I want to align everything perfectly and I want the vertically stacked images to fit perfectly on each other without any space in between. I posted an example screenshot on this location:

http://www.biognost.be/maps/treeview.gif

I don't use any particular CSS at this time, but I tried setting the margin and padding of the DIV where the images are put in without any result.

Could you please help me?

Thanks

Steven

CliveC · Jul 20, 2005

No Problem. I was not referring to your post or to other posts in this thread, just the forum in general.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

http://port-lucaya.com

Stoemp · Jul 21, 2005

Hi guys

Been away for 1 1/2 day now and I see this conversation has been developing in some sort of little discussion about what I want to do. When I re-read what I wrote, it is indeed a little confusing. Please let me rephrase my question a bit.

I want to centralise all our digital information on the Intranet. In the past, our representatives used some paper files and they had a list with them with numbers and titles. These numbers and titles appear also on each different flyer we have. If they want to send information to a customer, they call our secretary, give the coordinates of the customer and the numbers of the flyers they want her to send. With the new digital system, I want to organise the files in a more appropriate way, but our representatives still want a paper list with numbers and titles. So if I give all our digital files a number and a good title and I can print a list with all the files on the server (in a good overview -> treeview), this would be a good solution for our representatives.

So what I'm trying to do here is making an Intranet webpage for our representatives where they insert a path to a folder in a form and the webpage iterates through this folder and all subfolders, printing the names (and file sizes, date last modified, ...) in the treeview. This way our representatives always have the latest version of the list (if they print it once in a while).

Chrishunt: I think your interpretation of my question was the closest to what I was trying to ask here...

Thanks to you all for the help.

Steven

ChrisHunt · Jul 22, 2005

I think the solution I posted should work for you, but you need to add a little to get the folder and file images (untested - you may need to tweak it):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
  <style>
    .tree ul {
      margin: 0;
      padding: 0;
      list-style: none;
      background: url(bar.gif) repeat-y;
    }

    .tree li {
      margin: 0;
      padding: 0 0 0 12px;
      background: url(branch.gif) 4px 0.5em no-repeat;
    }

    .tree li.last {
       background-image: url(lastbranch.gif);
    }

    .tree span {
       padding-right: 20px;
       background: url(file.gif) 0 50% no-repeat;
    }

    .folder {background-image: url(folder.gif);}
    .doc    {background-image: url(doc.gif);}
    .pdf    {background-image: url(pdf.gif);}
    .html   {background-image: url(html.gif);}
  </style>
<head>
<body>
  <div class="tree">
    <span class="folder">My documents</span>
    <ul>
       <li><span class="doc">able.doc</span></li>
       <li><span class="doc">baker.pdf</span></li>
       <li><span class="folder">charlie</span>
          <ul>
            <li><span class="pdf">delta.pdf</span></li>
            <li><span class="pdf">echo.pdf</span></li>
            <li class="last"><span class="pdf">foxtrot.pdf</span></li>
          </ul>
       </li>
       <li class="last"><span class="html">hotel.htm</span></li>
    </ul>
  </div>
</body>
</html>

Add some Javascript (not something I can do off the top of my head, I'm afraid) and you should be able to make the branches of the tree expand and contract a la Windows Explorer.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Stoemp · Jul 22, 2005

Chris, did you test this last solution? The code seems ok to me but it doesn't work here...

ChrisHunt · Jul 22, 2005

Like I said, "untested - you may need to tweak it". In particular you may run into specificity problems and need to write the image rules like

Code:

.tree span.doc    {background-image: url(doc.gif);}

If I find time to create some suitable images later, I may have a play with it myself.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

ChrisHunt · Jul 22, 2005

Oh, hang on, fixed it:

Code:

    .tree span {
       padding-[b]left[/b]: 20px;
       background: url(file.gif) 0 50% no-repeat;
    }

    [b]span[/b].folder {background-image: url(folder.gif);}
    [b]span[/b].doc    {background-image: url(doc.gif);}
    [b]span[/b].pdf    {background-image: url(pdf.gif);}
    [b]span[/b].html   {background-image: url(html.gif);}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

ChrisHunt · Jul 22, 2005

All singing, all dancing version, with folders that open and close on clicking. If viewed with Javascript switched off, the whole tree is displayed. Use of nested <ul>s means that it even looks good with CSS switched off.

Constructive criticism of my Javascript welcomed - it's not my strong suit.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
  <style>

    .tree ul {
      margin: 0;
      padding: 0;
      list-style: none;
      background: url(bar.gif) repeat-y;
    }

    .tree li {
      margin: 0;
      padding: 0 0 0 12px;
      background: url(branch.gif) 4px 0.5em no-repeat;
    }

    .tree li.last {
       background-image: url(lastbranch.gif);
    }

    .tree a {
       padding-left: 20px;
       background: url(file.gif) 0 50% no-repeat;
    }

    a.folder {background-image: url(folder.gif);}
    .doc    {background-image: url(doc.gif);}
    .pdf    {background-image: url(pdf.gif);}
    .html   {background-image: url(html.gif);}
  </style>

  <script type="text/javascript">
     function toggle (e) {
        /* next sibling will be a text node, then the <ul> */
        var list = this.nextSibling.nextSibling;

        if (list.style.display == "none") {
           list.style.display = "block";
        } else {
           list.style.display = "none";
        }
     }

     /* Cross-browser event adder, from [URL unfurl="true"]http://weblogs.asp.net/asmith/archive/2003/10/06/30744.aspx[/URL] */
     function XBrowserAddHandler(target,eventName,handlerName) { 
       if ( target.addEventListener ) { 
         target.addEventListener(eventName, function(e){target[handlerName](e);}, false);
       } else if ( target.attachEvent ) { 
         target.attachEvent("on" + eventName, function(e){target[handlerName](e);});
       } else { 
         var originalHandler = target["on" + eventName]; 
         if ( originalHandler ) { 
           target["on" + eventName] = function(e){originalHandler(e);target[handlerName](e);}; 
         } else { 
           target["on" + eventName] = target[handlerName]; 
         } 
       } 
     } 

     function init_tree() {
        var divs = document.getElementsByTagName("div");
        for (var i = 0; i < divs.length; i++) {
           if (divs[i].className == "tree") {
              var links = divs[i].getElementsByTagName("a");
              for (var j = 0; j < links.length; j++) {
                 if (links[j].className == "folder") {
                    links[j].toggle = toggle;
                    XBrowserAddHandler(links[j],"click","toggle");
                 }
              }
              var lists = divs[i].getElementsByTagName("ul");
              for (var j = 0; j < lists.length; j++) {
                 lists[j].style.display = "none";
              }
           }
        }
 
     }
  </script>
<head>
<body onload="init_tree();">
  <div class="tree">
    <a href="#" class="folder">My documents</a>
    <ul>
       <li><a href="#" class="doc">able.doc</a></li>
       <li><a href="#" class="doc">baker.pdf</a></li>
       <li><a href="#" class="folder">charlie</a>
          <ul>
            <li><a href="#" class="pdf">delta.pdf</a></li>
            <li><a href="#" class="pdf">echo.pdf</a></li>
            <li class="last"><a href="#" class="pdf">foxtrot.pdf</a></li>
          </ul>
       </li>
       <li class="last"><a href="#" class="html">hotel.htm</a></li>
    </ul>
  </div>
</body>

Of course in real life, you'd push the CSS and JS into separate files, and make the non-folder hrefs point to the appropriate page.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Stoemp · Jul 22, 2005

OMG, Chris. This is not singing and dancing. It's rocking! Thanks a lot. Now I only have to adapt this bigtime to fit in my ASP. In the mean time my ASP isn't working anymore too. I'm trying to iterate through the folders and files using recursion, but apparently I don't do this right because I get the message that there's not enough memory to perform the action. It seems that with every solution there comes a new problem. God I love this job ;-)

Thanks!

Steven

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Making some kind of treeview with css - need some tips

Stoemp

Programmer

CliveC

Programmer

Stoemp

Programmer

ChrisHunt

Programmer

Stoemp

Programmer

ChrisHunt

Programmer

ChrisHunt

Programmer

ChrisHunt

Programmer

Stoemp

Programmer

Similar threads

Part and Inventory Search

Sponsor