SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    NS, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Tree Menu Script Question

    I have a basic tree menu navigation on my page. Here is the code for each level. The parent node is class look and the child node is class look2:

    Code:
    <div class="look"><img src="img/folder.gif" class="folding" onclick="swapLayers('lyr2'); return false" onmouseover="window.status='Show Intro layer'; return true" onmouseout="window.status=''"> <a href="java script://"></a>Menu 1
    	<div class="look2" style="list-style-image:url(img/page.gif);display:none;padding-top:5px;padding-bottom:5px;">
    		     <img src="img/page.gif"><a href="#">Link 1a</a><br>
    		     <img src="img/page.gif"><a href="#">Link 1b</a><br>
    		     <img src="img/page.gif"><a href="#">Link 1c</a><br>
    	</div>
    </div>
    And here is the short script in a .js file that controls the opening and closing of the nodes:

    Code:
    img1=new Image()
    img1.src="img/folder.gif"
    img2=new Image()
    img2.src="img/folderopen.gif"
    ns6_index=0
    
    function change(e){
    
    if(!document.all&&!document.getElementById)
    return
    
    if (!document.all&&document.getElementById)
    ns6_index=1
    
    var source=document.getElementById&&!document.all? e.target:event.srcElement
    if (source.className=="folding"){
     var source2=document.getElementById&&!document.all? source.parentNode.childNodes:source.parentElement.all
     if (source2[2+ns6_index].style.display=="none"){
       source2[0].src="img/folderopen.gif"
       source2[2+ns6_index].style.display=''
     }
     else{
       source2[0].src="img/folder.gif"
       source2[2+ns6_index].style.display="none"
     }
    }
    }
    document.onclick=change
    What I want to add is a if statement to my script that can make only one branch open at a time, so when I click on one parent node, and another one is already open, it closes the open one first then opens the new one. I was having trouble with this, can anyone help me out?

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Brad...

    That code is an older JSKit script; the DOM negotiating is pretty (imo) kludgy. Re-worked it for you...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title></title>
    <base href="http://www.javascriptkit.com/script/" />
    <style type="text/css">
    
    body {
    	margin: 100px;
    	background: ghostwhite;
    }
    img.folding {
    	cursor: pointer;
    }
    .look {
    	width: 100px;
    	font: normal 9pt verdana;
    	margin: 2px 0;
    }
    .look2 {
    	margin-top: 2px;
    	margin-bottom: 2px;
    }
    .look2 li {
    	font: normal 7pt verdana;
    }
    .look2 a:link, .look2 a:visited, .look2 a:hover, .look2 a:active {
    	position: relative;
    	top: -5px;
    	text-decoration: none;
    	color: #379;
    	padding: 2px;
    }
    li > a {
    	margin-left: -8px;
    }
    .look2 a:hover {
    	color: #ffd;
    	background: #379;
    }
    a.menu:link, a.menu:visited, a.menu:hover, a.menu:active {
    	text-decoration: none;
    	color: darkred;
    	padding-left: 2px;
    }
    a.menu:visited {
    	color: firebrick;
    }
    a.menu:hover { 
    	color: crimson;
    }
    a.menu:active { 
    	color: red;
    }
    
    </style>
    
    <script language="JavaScript">
    
    //By George Chiang (www.javascriptkit.com) JavaScript site.
    img1=new Image()
    img1.src="fold.gif"
    img2=new Image()
    img2.src="open.gif"
    
    var curr = null;
    function change(e)
    {
    	if (!document.getElementsByTagName)
    		return;
    
    	var clicked = document.getElementsByTagName && !document.all ?  e.target : event.srcElement;
    	var par = clicked.parentNode;
    	if (/^folding|menu$/.test(clicked.className))
    	{
    		if (null != curr && par != curr)
    		{
    			curr.getElementsByTagName('img')[0].src = 'fold.gif';
    			curr.getElementsByTagName('ul')[0].style.display = 'none';
    		}
    		var ul = par.getElementsByTagName('ul')[0];
    		var icon = par.getElementsByTagName('img')[0];
    		icon.src = (/fold.gif/.test(icon.src)) ? 'open.gif' : 'fold.gif';
    		ul.style.display = (ul.style.display == 'none') ? '' : 'none';
    		curr = par;
    	}
    }
    
    document.onclick = change;
    
    </script>
    </head>
    
    <body bgcolor="#FFFFFF">
    <div class="look"><img src="fold.gif" class="folding" /><a class="menu" href="javascript&#58;void(0)">SubMenu 1</a>
    <ul class="look2" style="list-style-image:url(list.gif);display:none;">
        <li><a href="javascript&#58;void(0)">•Link 1a•</a></li>
        <li><a href="javascript&#58;void(0)">•Link 1b•</a></li>
        <li><a href="javascript&#58;void(0)">•Link 1c•</a></li>
    </ul>
    </div>
    
    <div class="look"><img src="fold.gif" class="folding" /><a class="menu" href="javascript&#58;void(0)">SubMenu 2</a>
    <ul class="look2" style="list-style-image:url(list.gif);display:none;">
        <li><a href="javascript&#58;void(0)">•Link 2a•</a></li>
        <li><a href="javascript&#58;void(0)">•Link 2b•</a></li>
        <li><a href="javascript&#58;void(0)">•Link 2c•</a></li>
    </ul>
    </div>
    
    <div class="look"><img src="fold.gif" class="folding" /><a class="menu" href="javascript&#58;void(0)">SubMenu 3</a>
    <ul class="look2" style="list-style-image:url(list.gif);display:none;">
        <li><a href="javascript&#58;void(0)">•Link 3a•</a></li>
        <li><a href="javascript&#58;void(0)">•Link 3b•</a></li>
        <li><a href="javascript&#58;void(0)">•Link 3c•</a></li>
    </ul>
    </div>
    </body>
    </html>
    Wanna see a really cool tree? <link>
    Last edited by adios; May 20, 2004 at 07:43.
    ::: certified wild guess :::

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2004
    Location
    NS, Canada
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking wow!

    thanks adios
    only reason I went with that older tree script in the first place though is it's easy, quick, and I only have a basic use for it, the page it's on is nothing to fancy. Thanks again, haha now I gotta decide which one I like better cause that tree you linked to is pretty cool Lol

  4. #4
    SitePoint Enthusiast imacoding's Avatar
    Join Date
    Jun 2004
    Location
    Rochester NY
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Ughhh

    I am trying to get this tag to not show up
    after a click, <a href="javascript:void()"

    can anyone help???
    Thanks

    <div align="left"><img src="Book-Icon.gif" class="folding" /><a href="javascript:void()" class="menu" onMouseOver="MM_displayStatusMsg('Ineed Help');return document.MM_returnValue">Ineed Help</a>

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to get this tag to not show up
    after a click
    Show up....where? Not clear.

    The void statement requires an argument; void(0) is usually used.
    ::: certified wild guess :::

  6. #6
    SitePoint Enthusiast imacoding's Avatar
    Join Date
    Jun 2004
    Location
    Rochester NY
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It shows up in the status bar after a click, its really driving me NUTS! I have tried everything i know of, any help would be GREATLY appreciated.

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean when the link is moused over? Post a more complete example.
    ::: certified wild guess :::

  8. #8
    SitePoint Enthusiast imacoding's Avatar
    Join Date
    Jun 2004
    Location
    Rochester NY
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didnt really want a gazillion OnMouse events in my code, but if thats all i can do then..........

  9. #9
    SitePoint Enthusiast imacoding's Avatar
    Join Date
    Jun 2004
    Location
    Rochester NY
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It would be onclick or mouse down, although
    i put the event in it still misfires.
    Attached Images Attached Images

  10. #10
    SitePoint Enthusiast imacoding's Avatar
    Join Date
    Jun 2004
    Location
    Rochester NY
    Posts
    78
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think i got it!
    Ill let you know.
    Thanks for at least trying to understand my babble, LAFF

  11. #11
    SitePoint Enthusiast jessegavin's Avatar
    Join Date
    May 2003
    Location
    Minneapolis, MN USA
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should all checkout Matt Kruse's script for DHTML tree navigations. All you need to do is include an external .js file and then make an unordered list, and you have a wonderful tree.

    http://www.mattkruse.com/javascript/mktree/

    REad this and use it, I have been using it for about a half of a year and it is awesome


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
  •