Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    rkz
    rkz is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    function expand all on tree menu

    I have a tree menu script.

    I need function that would collapse all my menu items.
    using like: <a href="#" onclick="expandall()">expand all</a>
    <a href="#" onclick="closeall()">default tree</a> (sorry don't know how to say it).

    I cant do it myself, please help me, it shouldnt be very difficult


    Code:
    Code:
    var enablepersist="on" //Enable saving state of content structure using session cookies? (on/off)
    var collapseprevious="no" //Collapse previously open content when opening present? (yes/no)
    
    if (document.getElementById){
    document.write('<style type="text/css">')
    document.write('.expand{display:none;}')
    document.write('</style>')
    }
    
    function getElementbyClass(classname){
    ccollect=new Array()
    var inc=0
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    for (i=0; i<alltags.length; i++){
    if (alltags[i].className==classname)
    ccollect[inc++]=alltags[i]
    }
    }
    
    function contractcontent(omit){
    var inc=0
    while (ccollect[inc]){
    if (ccollect[inc].id!=omit)
    ccollect[inc].style.display="none"
    inc++
    }
    }
    
    function expandcontent(cid){
    if (typeof ccollect!="undefined"){
    if (collapseprevious=="yes")
    contractcontent(cid)
    document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
    }
    }
    
    function revivecontent(){
    contractcontent("omitnothing")
    selectedItem=getselectedItem()
    selectedComponents=selectedItem.split("|")
    for (i=0; i<selectedComponents.length-1; i++)
    document.getElementById(selectedComponents[i]).style.display="block"
    }
    
    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 getselectedItem(){
    if (get_cookie(window.location.pathname) != ""){
    selectedItem=get_cookie(window.location.pathname)
    return selectedItem
    }
    else
    return ""
    }
    
    function saveswitchstate(){
    var inc=0, selectedItem=""
    while (ccollect[inc]){
    if (ccollect[inc].style.display=="block")
    selectedItem+=ccollect[inc].id+"|"
    inc++
    }
    
    document.cookie=window.location.pathname+"="+selectedItem
    }
    
    function do_onload(){
    getElementbyClass("expand")
    if (enablepersist=="on" && typeof ccollect!="undefined")
    revivecontent()
    }
    
    
    if (window.addEventListener)
    window.addEventListener("load", do_onload, false)
    else if (window.attachEvent)
    window.attachEvent("onload", do_onload)
    else if (document.getElementById)
    window.onload=do_onload
    
    if (enablepersist=="on" && document.getElementById)
    window.onunload=saveswitchstate
    thank you, for your attention

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Please show the markup (HTML) involved.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    rkz
    rkz is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
       <ul  class="treeview">
    <script type="text/javascript" language="javascript" src="lib/helparea.js"></script>
    <div>
    <ul>
    
    <li>
    <a id="pic56"  onclick="expandcontent('sub56')" style="cursor:hand;">
    <span class="sectionheader">Japoniški įrankiai
    </span></a>
    <div id="sub56" class="expand"><ul>
    <li>
    <a id="pic58"  onclick="expandcontent('sub58')" style="cursor:hand;">
    <span class="sectionheader">pjūklai 
    </span></a>
    <div id="sub58" class="expand"><ul>
    <li>
    <a id="pic59" href="?page=dozuki" style="cursor:hand;">
    dozuki 
    </a>
    </li>
    
    <li>
    <a id="pic62" href="?page=ryoba" style="cursor:hand;">
    ryoba
    </a>
    </li>
    
    <li>
    <a id="pic63" href="?page=kataha" style="cursor:hand;">
    kataha
    </a>
    </li>
    
    <li>
    <a id="pic64" href="?page=vieliniai" style="cursor:hand;">
    vieliniai
    </a>
    </li>
    
    <li>
    <a id="pic66" href="?page=priedai" style="cursor:hand;">
    priedai
    </a>
    </li>
    </ul></div></li>
    
    <li>
    <a id="pic67"  onclick="expandcontent('sub67')" style="cursor:hand;">
    <span class="sectionheader">galąstuvai
    </span></a>
    <div id="sub67" class="expand"><ul>
    <li>
    <a id="pic68" href="?page=dirbtiniai" style="cursor:hand;">
    dirbtiniai
    </a>
    </li>
    
    <li>
    <a id="pic69" href="?page=stovai" style="cursor:hand;">
    stovai
    </a>
    </li>
    </ul></div></li>
    etc..
    Im using this script on cmsms

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Base on your code, you can call the contractcontent function to contract all the elements, and expandcontent function to expand elements (base on the class) that you want to expand.

    See the implementation:
    Code:
    <input type="button" value="Contract All" onclick="contractcontent('treeview')">
    <input type="button" value="Expand All" onclick="expandcontent('sub56');expandcontent('sub67')">
    Hope that helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    rkz
    rkz is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rangana View Post
    Base on your code, you can call the contractcontent function to contract all the elements, and expandcontent function to expand elements (base on the class) that you want to expand.

    See the implementation:
    Code:
    <input type="button" value="Contract All" onclick="contractcontent('treeview')">
    <input type="button" value="Expand All" onclick="expandcontent('sub56');expandcontent('sub67')">
    Hope that helps.
    Actually there are many such links from sub01to sub99 and etc, So I need something wildcard like expandcontent('sub*'); or something that I dont know

  • #6
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    If the class names are from sub01 to sub99, then create a for loop:
    Code:
    <input type="button" value="Contract All" onclick="contractcontent('treeview')">
    <input type="button" value="Expand All" onclick="for(var i=1;i<=99;i++)expandcontent(i<10?'0'+i:i);">
    Hope that makes sense.-
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #7
    rkz
    rkz is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rangana View Post
    If the class names are from sub01 to sub99, then create a for loop:
    Code:
    <input type="button" value="Contract All" onclick="contractcontent('treeview')">
    <input type="button" value="Expand All" onclick="for(var i=1;i<=99;i++)expandcontent(i<10?'0'+i:i);">
    Hope that makes sense.-
    Contract all, works fine.
    But expand all, has error (Object required) and not working
    I dont know js syntax, but in php it would be something like this:
    onclick="for($i=0; $i<$n; $i++) {echo "expandcontent('sub'.$i.');"}";

    In ohter words, i need to optimize
    onclick="expandcontent('sub1');expandcontent('subn-1');expandcontent('subn');expandcontent('subn+1');"

    in ideal way; $n there should be numer of items id="sub.."
    Last edited by rkz; 10-07-2008 at 12:21 PM. Reason: added more info

  • #8
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Err, it was my mistake, apologies. Add highlighted instead:
    Code:
    <input type="button" value="Contract All" onclick="contractcontent('treeview')">
    <input type="button" value="Expand All" onclick="for(var i=1;i<=99;i++)expandcontent('sub'+i<10?'0'+i:i);">
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #9
    rkz
    rkz is offline
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the some error :/
    Last edited by rkz; 10-08-2008 at 07:30 AM.


  •  

    Posting Permissions

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