Results 1 to 4 of 4

Thread: Simple Tree Menu

  1. #1
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post Simple Tree Menu

    1) Script Title:
    Simple Tree Menu

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

    3) Describe problem:
    I'm trying to open (if not already open) a subtree by clicking on a link in the same page with onClick (something like <a href="http://try.com/example.asp" onClick="ddtreemenu.expandSubTree('treemenu1',0)" >expanding sub 1</a>). However I try calling that function, it does not work. I'm new at Javascript but I can't believe there is no way doing that.

    Another question is, how do I make it possible that when I click on Folder1 it expands but it closes Folder2 (which was open). So is it possible that there is maximum one expanded Folder at the same time?

    If you can help me that would be grate! Specially cause I think it's a very usefull en fast script. Thx

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    For #1, try the attached modified .js file. Then, within your HTML, give the subtree (the LI element) an ID, and call ddtreemenu.manualexpand() to expand it:

    Code:
    <ul id="treemenu1" class="treeview">
    <li>Item 1</li>
    <li>Item 2</li>
    
    <li>Folder 1
    	<ul>
    	<li>Sub Item 1.1</li>
    	<li>Sub Item 1.2</li>
    	</ul>
    </li>
    <li>Item 3</li>
    
    <li>Folder 2
    	<ul>
    	<li>Sub Item 2.1</li>
    	<li id="mysubtree">Folder 2.1
    		<ul>
    		<li>Sub Item 2.1.1</li>
    		<li>Sub Item 2.1.2</li>
    		</ul>
    	</li>
    </ul>
    </li>
    
    <li>Item 4</li>
    </ul>
    
    <script type="text/javascript">
    
    //ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))
    
    ddtreemenu.createTree("treemenu1", true)
    
    </script>
    
    Code:
    <a href="#" onClick="ddtreemenu.manualexpand('mysubtree'); return false">Expand sub tree</a>
    For #2, there's unfortunately no easy way to have one subtree collapse when the current one is open, unlike for example Switch Content script. I'll most likely add in such a feature the next time the script is updated.
    DD Admin

  3. The Following User Says Thank You to ddadmin For This Useful Post:

    straf12 (08-26-2008)

  4. #3
    Join Date
    Aug 2008
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    #1 It's perfect, just great! Even works within the asp-code!
    #2 I'm looking forward to the update
    Lots of appreciations
    Many thanks for the quick answer!

  5. #4
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    I myself was looking for the solution for your second problem and after reading this post decided too give it a try myself since it didn't exist yet.

    I don't know if it is "correctly" programmed for I am not a javascript programmer but it is working as I want it too.

    I've created the function contractRest by taking a good look at the flatten function.

    Code:
    ddtreemenu.contractRest = function(treeid, ulelement)
    {
    	var ultags = document.getElementById(treeid).getElementsByTagName("ul")
    
    	for (var i=0; i<ultags.length; i++)
    	{
    		ultags[i].style.display=(ulelement==ultags[i])? "block" : "none"
    
    		var relvalue = (ulelement==ultags[i])? "open" : "closed"
    
    		if (relvalue=="open")
    		{
    			ddtreemenu.expandSubTree(treeid, ultags[i])
    		}
    		else
    		{
    			ultags[i].setAttribute("rel", "closed")
    			ultags[i].parentNode.style.backgroundImage = "url("+ddtreemenu.closefolder+")"
    		}
    	}
    }
    I call this on the onclick open event:

    Code:
    		ulelement.parentNode.onclick = function(e)
    		{
    			var submenu=this.getElementsByTagName("ul")[0]
    			if (submenu.getAttribute("rel")=="closed")
    			{
    				ddtreemenu.contractRest(treeid, ulelement)
    				submenu.style.display="block"
    				submenu.setAttribute("rel", "open")
    				ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
    			}
    		...
    I've only tested this for the particular site I'm using it on, haven't tested on a "standard" tree menu.
    Hope it helps.

    Attachment 2027

Bookmarks

Posting Permissions

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