Click here to Skip to main content
Click here to Skip to main content

Cross Browser (JavaScript/DHTML) TreeView

, 9 Nov 2006 CPOL
Rate this:
Please Sign up or sign in to vote.
An easy DHTML TreeView component which works in both Firefox and IE.

Sample Image - IE_FF_DHTML_TreeView.png

Introduction

I needed a good looking TreeView for my site (wickedorange.com/vb2005intro), so I found this article by D.D. de Kerf, and modified it considerably. The differences between these two articles are purely aesthetic; for example, there is now a CSS file which you can use to change the look of the tree quite easily. There are also a few "workarounds" to make sure it works in Firefox and IE.

Please note: I had to change the icons because of License Agreements. The original icons are part of the IconBuffet Studio icon pack which comes free with Visual Basic Express 2005 (if you register).

Using the code

See tree.html in the source if you just want to start making trees.

The code is pretty basic to use. First, we include references to the CSS and JS files included:

<head> 
 <link href="tree.css" rel="stylesheet" type="text/css" />
 <script src="tree.js" type="text/javascript"></script>
 <title>TreeView Example</title> 
</head>

Then, we add code to the body which calls the JavaScript code...

  • "addExpandCollapseAll" adds the buttons at the top of the tree.
  • "addNode(text, url, target)" adds a normal node, which doesn't contain sub items.

We use "startParentNode(text)" to begin a parent node, which can contain normal nodes and other parent nodes. We then use "endParentNode()" to close any parent node which we started.

<body>
<script language="javascript">
    addExpandCollapseAll();

    addNode("WickedOrange.com","http://www.wickedorange.com","mainFrame");

    startParentNode("Search Engines");
        addNode("Google","http://www.google.com","mainFrame");
        addNode("Yahoo","http://www.yahoo.com","mainFrame");
    endParentNode();

    startParentNode("Dev Sites");
          addNode("CodeProject","http://www.codeproject.com","mainFrame");
        addNode("MSDN","http://www.msdn.com","mainFrame");
         startParentNode("Dev Sites");
              addNode("CodeProject","http://www.codeproject.com","mainFrame");
            addNode("MSDN","http://www.msdn.com","mainFrame");
             startParentNode("Dev Sites");
                  addNode("CodeProject","http://www.codeproject.com","mainFrame");
                addNode("MSDN","http://www.msdn.com","mainFrame");
            endParentNode();
        endParentNode();
    endParentNode();
</script>
</body>

Points of Interest

Sometimes, Firefox doesn't find child nodes using nextSibling, previousSibling etc.. like IE does, so I had to name each item that needed to be modified later; for example, the parent node images need to be changed when expanded.

History

Nothing yet!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

AndrewVos
Software Developer
United Kingdom United Kingdom
No Biography provided

Comments and Discussions

 
Questionchanging the pictures and having them in a different directory.... PinmemberDragonNightz13-Jan-12 2:25 
Questiontree view Pinmemberparvez Sindhi19-Aug-11 1:15 
GeneralPersist selected node on postback Pinmemberpussicatt01026-Dec-06 8:09 
GeneralRe: Persist selected node on postback Pinmemberpussicatt01026-Dec-06 9:48 
GeneralRe: Persist selected node on postback PinmemberAndrewVos11-Dec-06 23:21 
Generaltable -> div Pinmemberu990051714-Nov-06 23:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 10 Nov 2006
Article Copyright 2006 by AndrewVos
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid