...

View Full Version : function expand all on tree menu



rkz
10-06-2008, 06:20 PM
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:

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

rangana
10-07-2008, 06:44 AM
Please show the markup (HTML) involved.

rkz
10-07-2008, 06:55 AM
<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

rangana
10-07-2008, 07:06 AM
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:


<input type="button" value="Contract All" onclick="contractcontent('treeview')">
<input type="button" value="Expand All" onclick="expandcontent('sub56');expandcontent('sub67')">


Hope that helps.

rkz
10-07-2008, 09:34 AM
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:


<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 :(

rangana
10-07-2008, 09:43 AM
If the class names are from sub01 to sub99, then create a for loop:


<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.-

rkz
10-07-2008, 11:35 AM
If the class names are from sub01 to sub99, then create a for loop:


<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.."

rangana
10-08-2008, 01:07 AM
Err, it was my mistake, apologies. Add highlighted instead:


<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);">

rkz
10-08-2008, 07:03 AM
the some error :/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum