Results 1 to 6 of 6

Thread: Smart Folding Menu Tree Script

  1. #1
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Smart Folding Menu Tree Script

    In the script mentioned in the subject i notice the folders start so far in to the screen. what i mean is there is a space between the left most edge of the page and where the folder starts. Is there a way of getting rid of this space? I have no margins on my page. it just seems to want to put the folders there and i cant see anywhere in the code where its telling it to do that.

    Also the subfolders start very far along meaning the width of the overall tree is very large. is there a way of reducing this?

    Sorry but i'm pretty much new to all of this.

    Hope someone can help me.

    Andrew

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Let me guess, using NS7.2 or FF? Anyways, try this style:

    Code:
    <style>
    #foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
    list-style-image:url(fold.gif);}
    #foldinglist{list-style-image:url(list.gif);
    position:relative!important;position:auto;left:-18;}
    body{margin:0}
    ul {margin-left:0!important;margin-left:25px}
    </style>
    What browser are you using?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default It works!

    Thankyou so much that worked a treat!

    I have another query but im pretty sure of the answer (being a big fat no)

    is it easy to modify this code so that when one level is opened, the level that is currently open is closed? I know there is another tree on your site that does this but i was just wondering if it was possible to make this tree do it, and if so how difficult is it? bearing in mind im a newbie and i suck

    thanks again

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Actually, it is a small thin 'no'. I'll have to think about it. Someone else might see it right away but, check my tagline at the bottom right. I'm not familiar with this code. It is interesting though.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    The more I played with this one the more difficult it appeared. I essentially 'gave up' when NS7.2 appeared to be ignoring its own conventions. The script relies heavily upon child and parent node elements of the tags involved. There must be a way but, since this is my first foray into that realm, when I realized that the Switch Menu does essentially what you want already, just without the cool opening and closing folders, that I'd give that a crack. So far so good, still working on it though.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    OK, I gave up on the Smart Folding Menu Tree Script for this and instead used the Switch Menu, adding folders and the capability for 1 nested level. Here is a demo (uses same folder images as Smart Fold):
    Code:
    <html><head>
    <title>Switch Menu - w/folders Demo</title>
    <style type="text/css">
    
    .pictitle{
    font-family:verdana;
    font-size:normal;
    font-weight:bold;
    padding:0 0 1em 0.5em;
    }
    
    .hdpic {
    position:relative;
    top:2px
    }
    
    img.lst {
    margin:0 .5em 0 1em;
    position:relative;
    top:4px
    }
    
    img.ssub{
    margin:0 0 0 1em;
    position:relative;
    top:2px
    }
    
    #ssub{
    margin:0 .5em 0 1.5em;
    }
    
    .submenu{
    padding-bottom: 0.5em;
    font-family:verdana;
    font-size:.9em;
    }
    
    .ssubmenu{
    margin-bottom: 0.5em;
    font-family:verdana;
    font-size:1em;
    }
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Switch Menu script w/folders & 1 nested level added
    * Original script by Martial B of http://getElementById.com/
    * Modified by Dynamic Drive for format & NS4/IE4 compatibility
    * Visit http://www.dynamicdrive.com/ for full source code
    * Modified by John Davenport Scheuer for folders and 1 level of nesting
    * Visit http://www.dynamicdrive.com/forums/showthread.php?p=8034#post8034
    * for full Modified source - user name: jscheuer1
    ***********************************************/
    
    var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
    var persisttype="local" //enter "sitewide" for menu to persist across site, "local" for this page only
    
    if (document.getElementById){ //DynamicDrive.com change
    document.write('<style type="text/css">\n')
    document.write('.submenu{display: none;}\n')
    document.write('.ssubmenu{display: none;}\n')
    document.write('</style>\n')
    }
    
    function SwitchMenu(obj){
    	if(document.getElementById){
    	var elpic = document.getElementById(obj+'pic');
    	var el = document.getElementById(obj);
    	var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
    	var arpic = document.getElementById("masterdiv").getElementsByTagName("img"); //jds
    		if(el.style.display != "block"){ //DynamicDrive.com change
    			for (var i=0; i<ar.length; i++){
    				if (ar[i].className=="submenu") //DynamicDrive.com change
    				ar[i].style.display = "none";
    			}
    			for (var i=0; i<arpic.length; i++){
    				if (arpic[i].className!=='lst') {//jds
    				if (arpic[i].className!=='ssub') //jds
    				arpic[i].src = "fold.gif";
    			}			
    			}
    			el.style.display = "block";
    			if (elpic)
    			elpic.src = "open.gif";
    		}else{
    			el.style.display = "none";
    			if (elpic)			
    			elpic.src = "fold.gif";
    		}
    	}
    }
    
    function SwitchsubMenu(obj){
    	if(document.getElementById){
    	var selpic = document.getElementById(obj+'pic');
    	var sel = document.getElementById(obj);
    	var sar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
    	var sarpic = document.getElementById("masterdiv").getElementsByTagName("img"); //jds
    		if(sel.style.display != "block"){ //DynamicDrive.com change
    			for (var i=0; i<sar.length; i++){
    				if (sar[i].className=="ssubmenu") //DynamicDrive.com change
    				sar[i].style.display = "none";
    			}
    			for (var i=0; i<sarpic.length; i++){
    				if (sarpic[i].className=='ssub') //jds
    				sarpic[i].src = "fold.gif";			
    			}
    			sel.style.display = "block";
    			selpic.src = "open.gif";
    		}else{
    			sel.style.display = "none";
    			selpic.src = "fold.gif";
    		}
    	}
    }
    
    function get_cookie(Name) { 
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) { 
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    
    function onloadfunction(){
    if (persistmenu=="yes"){
    var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    var cookievalue=get_cookie(cookiename)
    if (cookievalue!=""){
    document.getElementById(cookievalue).style.display="block"
    document.getElementById(cookievalue+'pic').src="open.gif"
    }
    }
    if (persistmenu=="yes"){
    var scookiename=(persisttype=="sitewide")? "sswitchmenu" : "s"+window.location.pathname
    var scookievalue=get_cookie(scookiename)
    if (scookievalue!=""){
    document.getElementById(scookievalue).style.display="block"
    document.getElementById(scookievalue+'pic').src="open.gif"
    }
    }
    }
    
    function savemenustate(){
    var inc=1, blockid=""
    var sinc=1, sblockid=""
    while (document.getElementById("sub"+inc)){
    if (document.getElementById("sub"+inc).style.display=="block"){
    blockid="sub"+inc
    break
    }
    inc++
    }
    while (document.getElementById("ssub"+sinc)){
    if (document.getElementById("ssub"+sinc).style.display=="block"){
    sblockid="ssub"+sinc
    break
    }
    sinc++
    }
    var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
    document.cookie=cookiename+"="+cookievalue
    var scookiename=(persisttype=="sitewide")? "sswitchmenu" : "s"+window.location.pathname
    var scookievalue=(persisttype=="sitewide")? sblockid+";path=/" : sblockid
    document.cookie=scookiename+"="+scookievalue
    }
    
    if (window.addEventListener)
    window.addEventListener("load", onloadfunction, false)
    else if (window.attachEvent)
    window.attachEvent("onload", onloadfunction)
    else if (document.getElementById)
    window.onload=onloadfunction
    
    if (persistmenu=="yes" && document.getElementById)
    window.onunload=savemenustate
    
    </script>
    </head>
    
    <body leftmargin="10" marginwidth="10">
    
    
    <!-- Keep all menus within masterdiv-->
    <!-- Uncomment Below for centered Menu -->
    <!--div style="text-align:left;margin:50px 40% 0 40%;overflow:visible;" id="masterdiv"-->
    <!-- Comment Below for centered Menu -->
    <div id="masterdiv">
    <nobr>
    
    <!--Header for 1st sub Menu-->
    	<img class="hdpic" id="sub1pic" src="fold.gif" onclick="SwitchMenu('sub1')"><span class="pictitle">- Site Menu</span><br><!--End 1st sub Menu Header-->
    	<span class="submenu" id="sub1"><!--This tag begins 1st sub Menu's items-->
    <!--1st nested header-->
    	<img class="ssub" id="ssub1pic" src="fold.gif" onclick="SwitchsubMenu('ssub1')"><span class="pictitle">- What's New</span><br>
                <span class=ssubmenu id=ssub1><!--begin 1st nested items-->
                      <img id="ssub" class="lst" src="list.gif"><a href="http://www.statestreetblues.com/">State Street Blues Stroll!</a><br>
                      <img id="ssub" class="lst" src="list.gif"><a href="http://www.mediajazzbynight.com/">Media Jazz by Night!</a><br>
                </span><!--end 1st nested items-->
    	<img class="ssub" id="ssub2pic" src="fold.gif" onclick="SwitchsubMenu('ssub2')"><span class="pictitle">- Search</span><br>
                <span class=ssubmenu id=ssub2>
                      <img id="ssub" class="lst" src="list.gif"><a href="http://www.yahoo.com/">Yahoo!</a><br>
                      <img id="ssub" class="lst" src="list.gif"><a href="http://www.google.com/">Google</a><br>
                </span>
    		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/hot.htm">What's hot</a><br>
    		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/revised.htm">Revised Scripts</a><br>
    		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/morezone/">More Zone</a><br>
    	</span><!--End 1st sub Menu items-->
    
    	<img class="hdpic" id="sub2pic" src="fold.gif" onclick="SwitchMenu('sub2')"><span class="pictitle">- FAQ/Help</span><br>
    	<span class="submenu" id="sub2">
    		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/notice.htm">Usage Terms</a><br>
    		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/faqs.htm">DHTML FAQs</a><br>
    		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/help.htm">Scripts FAQs</a><br>
    	</span>
    
    	<img class="hdpic" id="sub3pic" src="fold.gif" onclick="SwitchMenu('sub3')"><span class="pictitle">- Help Forum</span><br>
    	<span class="submenu" id="sub3">
    		<img class="lst" src="list.gif"><a href="http://www.codingforums.com">Coding Forums</a><br>
    	</span>
    	
    	<img class="hdpic" id="sub4pic" src="fold.gif" onclick="SwitchMenu('sub4')"><span class="pictitle">- Cool Links</span><br>
    	<span class="submenu" id="sub4">
    		<img class="lst" src="list.gif"><a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
    		<img class="lst" src="list.gif"><a href="http://www.freewarejava.com">Freewarejava</a><br>
    		<img class="lst" src="list.gif"><a href="http://www.cooltext.com">Cool Text</a><br>
    	</span>
    
    	<img class="hdpic" id="sub5pic" src="fold.gif" onclick="SwitchMenu('sub5')"><span class="pictitle">- About</span><br>
    	<span class="submenu" id="sub5">
    		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
    		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
    		<img class="lst" src="list.gif"><a href="http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
    	</span>
    
    </nobr></div>
    </body></html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •