Support Forum Softcomplex logo
About Us  | Services  | Download  | Order  | Support  | |
| Search | Today's Posts | Stats | Board Rules | Not logged in [ Login | Register ]
go to bottom
Last active: Never

Printable Version | Subscribe | Add to Favourites   Post new thread
Author: Subject: Expand All & Collapse All
nrao
Junior Member

Posts: 3
Registered: 9/17/2003
Member Is Offline
posted on 9/17/2003 at 10:30 PM Reply With Quote
Expand All & Collapse All


Is it possible to add 'Expand All' or 'Collapse All' functionality to the menu?
I saw another posting with almost the same request but with no replies.
View User's Profile View All Posts By User U2U Member
rock
Moderator

Posts: 687
Registered: 4/15/2003
Member Is Offline
posted on 9/18/2003 at 10:53 AM Reply With Quote

Yes this is possible. You should call open(b_close) method for each item.
View User's Profile View All Posts By User U2U Member
nrao
Junior Member

Posts: 3
Registered: 9/17/2003
Member Is Offline
posted on 9/18/2003 at 03:29 PM Reply With Quote

How exactly would I do that? I have about 1000 entries in my tree. Is that through a javascript on the same page? If so, can you send me a sample of the javascript code?

Thanks, all help would be much appreciated.
View User's Profile View All Posts By User U2U Member
rock
Moderator

Posts: 687
Registered: 4/15/2003
Member Is Offline
posted on 9/18/2003 at 03:52 PM Reply With Quote

There is a_index array in the tree object containing all items.
View User's Profile View All Posts By User U2U Member
opus27
Newbie

Posts: 1
Registered: 11/2/2003
Member Is Offline
posted on 11/2/2003 at 10:06 PM Reply With Quote

Try this :


function expand_all () {
for (var i = 1; i < trees[0].a_index.length; i++) {
var o_item = trees[0].a_index;
if (!o_item.b_opened) o_item.open(o_item.b_opened);
}
}
function collapse_all () {
for (var i = 1; i < trees[0].a_index.length; i++) {
var o_item = trees[0].a_index;
if (o_item.b_opened) o_item.open(o_item.b_opened);
}
}
View User's Profile View All Posts By User U2U Member
pod
Newbie

Posts: 1
Registered: 5/28/2004
Member Is Offline
posted on 6/11/2004 at 02:31 PM Reply With Quote
expand collapse


...just wanted to mention that there was a little typo in the last posted code:

the var i was missing from the following line

var o_item = trees[0].a_index[var];


...for some reason, the i between brackets doesn't show on the posting ???

I'm sure opus27 tryied posting it and didn't notice it got removed.

Just thought I would mentionned that.


By the way , Thank you opus27, I needed that code as well

:-D
View User's Profile View All Posts By User U2U Member
doonee
Member

Posts: 10
Registered: 3/6/2005
Member Is Offline
posted on 3/6/2005 at 12:53 AM Reply With Quote

could someone post that code again, working around the typo, say, by using [*i*] or something ?
thanks
d
View User's Profile View All Posts By User U2U Member
youradds
Newbie

Posts: 1
Registered: 4/13/2005
Location: UK
Member Is Offline
posted on 4/13/2005 at 11:32 AM Reply With Quote
Cant get it to work either :(


Hi,

I'm trying to get all my options to be "auto closed". Is this possible? I've tried this, but it won't work :(

Code:
<script language="JavaScript">
<!--

new tree (TREE_ITEMS, tree_tpl);
collapse_all();

//-->

function expand_all () {
for (var i = 1; i < tree[0].a_index.length; i++) {
var o_item = tree[0].a_index[var];
if (!o_item.b_opened) o_item.open(o_item.b_opened);
}
}

function collapse_all () {
for (var i = 1; i < tree[0].a_index.length; i++) {
var o_item = tree[0].a_index[var];
if (o_item.b_opened) o_item.open(o_item.b_opened);
}
}

</script>


TIA
View User's Profile View All Posts By User U2U Member
rock
Moderator

Posts: 687
Registered: 4/15/2003
Member Is Offline
posted on 4/14/2005 at 07:04 AM Reply With Quote

Do not use reserved words as variable names: var o_item = tree[0].a_index[var];

Example of expand/collapse all function:
Code:

function expand_or_collapse_all (o_tree, b_collapse) {
for (var i = 1; i < tree[0].a_index.length; i++) {
var o_item = tree[0].a_index[ i];
o_item.open(b_collapse);
}
}


Usage:
Code:

o_my_lemon_tree = new tree (TREE_ITEMS, tree_tpl);
expand_or_collapse_all (o_my_lemon_tree, true);
View User's Profile View All Posts By User U2U Member
billgates
Junior Member

Posts: 3
Registered: 5/5/2005
Member Is Offline
posted on 5/5/2005 at 12:33 PM Reply With Quote
THe code was wrong


This is the correct code to use:

Code:

function expand_or_collapse_all (o_tree, b_collapse) {
for (var i = 1; i < o_tree.a_index.length; i++) {
var o_item = o_tree.a_index;
o_item.open(b_collapse);
}
}


Usage:
Code:

my_tree = new tree (TREE_ITEMS, tree_tpl);
expand_or_collapse_all (my_tree, true);
View User's Profile View All Posts By User U2U Member
rock
Moderator

Posts: 687
Registered: 4/15/2003
Member Is Offline
posted on 5/5/2005 at 01:27 PM Reply With Quote

To billgates : Ok, thanks for your attention and assistance.

Example of expand/collapse all function:

Code:

function expand_or_collapse_all (o_tree, b_collapse) {
for (var i = 1; i < o_tree.a_index.length; i++) {
var o_item = o_tree.a_index[ i];
o_item.open(b_collapse);
}
}


Usage:
Code:

o_my_lemon_tree = new tree (TREE_ITEMS, tree_tpl);
expand_or_collapse_all (o_my_lemon_tree, true);
View User's Profile View All Posts By User U2U Member
billgates
Junior Member

Posts: 3
Registered: 5/5/2005
Member Is Offline
posted on 5/9/2005 at 08:16 AM Reply With Quote
Optimized tigra-tree


Hi, I added some features to the tigra tree code, you can find them in attachment.

// Improvements:
// - Root folder cannot be collapsed or selected (controlled by "norootclose" variable)
// - Only one folder may be open on the same level (if variable "onefolder" is true)
// - Removed caret if a link is focused (with onFocus=this.blur())
// - When closing a folder, all subfolders are closed recursively ("closesubs" variable)
// - Removed doubleclick to open subfolders
// - Added expand all and collapse all function
// - Activate selection on clicking '+'

Attachment: tigra111.txt (7.26kb)
This file has been downloaded 2770 times
View User's Profile View All Posts By User U2U Member
billgates
Junior Member

Posts: 3
Registered: 5/5/2005
Member Is Offline
posted on 5/9/2005 at 10:35 AM Reply With Quote
Simple ASP code to read structure from a DB


Attached to this message there's a sample of the ASP code needed to render a Tigra tree whose structure is stored in an Access database. Data is read from the DB and the necessary JavaScript code is automatically inserted into the ASP page.

Maybe it's useful to you ;)

Attachment: TigraASP.txt (1.78kb)
This file has been downloaded 2359 times
View User's Profile View All Posts By User U2U Member
hadeelb
Newbie

Posts: 1
Registered: 9/25/2005
Location: Jordan
Member Is Offline
posted on 9/25/2005 at 10:18 AM Reply With Quote

hi;
is there any method that can speed up expanding all items of the tree?
my tree have 6 levels and the tree items loaded dynamically from a database table.
i implemented two methods to expand the tree quickly, but it still slow to expand it using these methods.
i attached my file in this message to see my code.
any help will be appreciated.

Attachment: tree.js (10.51kb)
This file has been downloaded 2005 times
View User's Profile View All Posts By User U2U Member
mrpoge
Newbie

Posts: 1
Registered: 10/13/2005
Location: Florida
Member Is Offline
posted on 10/13/2005 at 06:51 PM Reply With Quote

Quote:
Originally posted by billgates
Hi, I added some features to the tigra tree code, you can find them in attachment.


I ran into a bug with your 1.11 version. When selecting an already open subfolder by clicking on the node node name, the subfolder is collapsed.

I've attached a fix.

Attachment: tree112.js.txt (8.65kb)
This file has been downloaded 2139 times
View User's Profile View All Posts By User U2U Member
Grommit
Newbie

Posts: 1
Registered: 10/22/2005
Member Is Offline
posted on 10/22/2005 at 02:58 PM Reply With Quote

Could someone please give a "for dummies" explanation of how to add this function to the demo files...?

Experimenting with the files for "demo2" and the code posted by Rock, I added this to the end of tree.js:

Code:

function expand_or_collapse_all (o_tree, b_collapse) {
for (var i = 1; i < o_tree.a_index.length; i++) {
var o_item = o_tree.a_index[ i];
o_item.open(b_collapse);
}
}


Then removed this from Index.html...

new tree (TREE_ITEMS, TREE_TPL);

...and replaced it with this:

Code:

o_my_lemon_tree = new tree (TREE_ITEMS, tree_tpl);
expand_or_collapse_all (o_my_lemon_tree, true);


Am I even close to being on the right track?
View User's Profile View All Posts By User U2U Member
bostondevin
Junior Member

Posts: 3
Registered: 10/31/2005
Member Is Offline
posted on 11/1/2005 at 06:16 PM Reply With Quote
OK - all of these examples suck


But this one works just fine!

Here is the HTML to call the function (be sure "hcomp_tree" matches the name of the tree you are creating:

<p><a href="#" onclick="expand_all('hcomp_tree');">Open</a> | <a href="#" onclick="expand_all('hcomp_tree', true);">Collapse</a></p>

Here is the code to call the tree:

<script language="JavaScript">
hcomp_tree = new tree (TREE_ITEMS, TREE_TPL);
</script>

Here is the javascript to do the work (put it in tree.js):

function expand_all(theTree, theDirective) {
for (var i = 1; i < eval(theTree + '.a_index.length'); i++) {
var o_item = eval(theTree + '.a_index[ i]');
o_item.open(theDirective);
}}
View User's Profile View All Posts By User U2U Member
idlock
Newbie

Posts: 1
Registered: 5/24/2006
Location: Korea, Seoul
Member Is Offline
posted on 5/24/2006 at 06:53 AM Reply With Quote

Code:

function collapse_all() {
var o_item;
for (var i = 1; i < trees[0].tm5.length; i++) {
o_item = trees[0].tm5;

o_item.tmE(true); // if u check opend, use o_item.tmF
}
}
function expand_all() {
for (var i = 1; i < trees[0].tm5.length; i++) {
var o_item = trees[0].tm5;
o_item.tmE(false);
}
}
View User's Profile View All Posts By User U2U Member
rhxk
Newbie

Posts: 1
Registered: 8/16/2006
Member Is Offline
posted on 8/16/2006 at 12:42 PM Reply With Quote

OK,

So I downloaded the tree.js version 1.11 modified by TFI available on this forum....thanx for this...

I'm still unable to get the expand_all or collapse_all to work.
Here's my .html portion of the code:
Code:

<script language="JavaScript" src="tree.js"></script>
<script language="JavaScript" src="tree_items.js"></script>
<script language="JavaScript" src="tree_tpl.js"></script>

<!-- Body -->
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#4682B4">
<tr><td class="intd" bgcolor="#faebd7">
<p><a href="#" onclick="expand_or_collapse_all('hello_tree', false);">Open</a> | <a href="#" onclick="expand_or_collapse_all('hello_tree', true);">Collapse</a></p>
</td></tr>
<tr><td class="intd" bgcolor="#faebd7">
<script language="JavaScript">
<!--

hello_tree = new tree (TREE_ITEMS, tree_tpl);
expand_or_collapse_all (hello_tree, true);

//-->
</script>
</td></tr>
</table>
<!-- /Body -->


And when I click on it, the IE javascript error window says "Error: 'a_index.length' is null or not an object"

Sorry as I'm new to this....how can I get this to work?

Thanx for any reply...




UPDATE: I got it to work.....apparently the call from onclick="expand_or_collapse_all('hello_tree', false);" .....the hello_tree is not supposed to be in quotes. just have onclick="expand_or_collapse_all(hello_tree, false);"
View User's Profile View All Posts By User U2U Member
lubosdz
Newbie

Posts: 1
Registered: 5/1/2007
Member Is Offline
posted on 5/6/2007 at 08:14 PM Reply With Quote
dont use functions using *a_index* array anymore...


hi guyzz,

it looks like the code for TREE MENU has been rewritten from scratch, I tried to use almost all function in this thread, however always ended up with error msg like "object index_a has no properties" or similar. Then I found out, that the code uses completely new function and names and object arrays, and for current version of free TIGRA TREE MENU you cannot use previous routines from here.

This is function for expanding - collapsing all branches of tree menu (new re-written code):

function expand_or_collapse_all (o_tree) {
for (var i = 1; i < o_tree.tm5.length; i++) {
o_tree.tmB(i);
}
}


USAGE:
act_tree = new tree (TREE_ITEMS, TREE_TPL);
<a href="#" onclick="expand_or_collapse_all(act_tree);">&raquo; Open - Collapse all items &laquo;</a>

Regards & thanx for great code!
XL:-)
View User's Profile View All Posts By User U2U Member
tigra
Administrator

Posts: 2049
Registered: 6/17/2002
Location: US, CO
Member Is Offline
posted on 5/7/2007 at 02:01 AM Reply With Quote

The difference is in the tree.js that you use. We supply formatted version and compressed version. All the samples in this forum were for the formatted version, yours looks like it's for compressed script.
View User's Profile View All Posts By User U2U Member
JaRo
Newbie

Posts: 1
Registered: 8/9/2010
Location: Poland
Member Is Offline
posted on 8/9/2010 at 12:17 PM Reply With Quote

Hi there, I use following code and I don't know how to implement your functions : /

Could you help me?

Code:

// Title: Tigra Tree with my change (Medreces)
// URL: http://www.softcomplex.com/products/tigra_menu_tree/
function tree (a_items, a_template, cur_cat_url) {
this.a_tpl = a_template;
this.a_config = a_items;
this.o_root = this;
this.a_index = [];
this.o_selected = null;
this.n_depth = -1;

var o_icone = new Image(),
o_iconl = new Image();
o_icone.src = a_template['icon_e'];
o_iconl.src = a_template['icon_l'];
a_template['im_e'] = o_icone;
a_template['im_l'] = o_iconl;
for (var i = 0; i < 220; i++)
if (a_template['icon_' + i]) {
var o_icon = new Image();
a_template['im_' + i] = o_icon;z
o_icon.src = a_template['icon_' + i];
}
this.toggle = function (n_id) { var o_item = this.a_index[n_id]; o_item.open(o_item.b_opened); };
this.select = function (n_id) { return this.a_index[n_id].select(); };
this.mout = function (n_id) { this.a_index[n_id].upstatus(true); this.a_index[n_id].mover_out(true);};
this.mover = function (n_id) { this.a_index[n_id].upstatus(); this.a_index[n_id].mover_out()};
this.find_path_to_item = find_path_to_item;

this.a_children = [];
for (var i = 0; i < a_items.length; i++)
new tree_item(this, i);

this.n_id = trees.length;
trees[this.n_id] = this;

for (var i = 0; i < this.a_children.length; i++) {
document.write(this.a_children.init());
this.a_children.open();
}

if(cur_cat_url != 'null') {
if (this.find_path_to_item(cur_cat_url)) {
path_to_item[path_to_item.length] = this;
for (var i = path_to_item.length-1; i >= 0; --i) {
if(path_to_item.a_children.length) {
trees[path_to_item.o_root.n_id].toggle(path_to_item.n_id);
trees[path_to_item.o_root.n_id].a_index[path_to_item.n_id].mover_out(true);
} else {
trees[path_to_item.o_root.n_id].select(path_to_item.n_id);
}
}
}
}
}

function find_path_to_item (cat_url, array_path) {
if(this.a_children) {
for (var i = 0; i < this.a_children.length; i++) {
if ( ( this.a_children.a_config[1] && this.a_children.a_config[1] == cat_url ) || this.a_children.find_path_to_item (cat_url)){ path_to_item[path_to_item.length] = this.a_children;
return true;
} else {
}
}
}
return false;
}

function tree_item (o_parent, n_order) {
this.n_depth = o_parent.n_depth + 1;
this.a_config = o_parent.a_config[n_order + (this.n_depth ? 3 : 0)];
if (!this.a_config) return;

this.o_root = o_parent.o_root;
this.o_parent = o_parent;
this.n_order = n_order;
this.b_opened = !this.n_depth;

this.n_id = this.o_root.a_index.length;
this.o_root.a_index[this.n_id] = this;
o_parent.a_children[n_order] = this;

this.a_children = [];
for (var i = 0; i < this.a_config.length - 2; i++)
new tree_item(this, i);

this.get_icon = item_get_icon;
this.open = item_open;
this.select = item_select;
this.init = item_init;
this.upstatus = item_upstatus;
this.find_path_to_item = find_path_to_item;
this.mover_out = item_mover_out;
this.is_last = function () { return this.n_order == this.o_parent.a_children.length - 1 };
}

function item_open (b_close) {
var o_idiv = get_element('i_div' + this.o_root.n_id + '_' + this.n_id);
if (!o_idiv) return;

if (!o_idiv.innerHTML) {
var a_children = [];
for (var i = 0; i < this.a_children.length; i++)
a_children= this.a_children.init();
o_idiv.innerHTML = a_children.join('');
}
if(o_idiv.style) o_idiv.style.display = (b_close ? 'none' : 'block');

this.b_opened = !b_close;
var o_jicon = document.images['j_img' + this.o_root.n_id + '_' + this.n_id],
o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_jicon) o_jicon.src = this.get_icon(true);
if (o_iicon) o_iicon.src = this.get_icon();
this.upstatus();
}

function item_select (b_deselect) {
if (!b_deselect) {
var o_olditem = this.o_root.o_selected;
this.o_root.o_selected = this;
if (o_olditem) o_olditem.select(true);
}
var o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_iicon) o_iicon.src = this.get_icon();
get_element('i_txt' + this.o_root.n_id + '_' + this.n_id).style.fontWeight = b_deselect ? 'normal' : '600';

this.upstatus();
return Boolean(this.a_config[1]);
}

function item_upstatus (b_clear) {
window.setTimeout('window.status="' + (b_clear ? '' : this.a_config[0] + (this.a_config[1] ? ' ('+ this.a_config[1] + ')' : '')) + '"', 10);
}

function item_mover_out (b_clear) {
var o_jicon = document.images['j_img' + this.o_root.n_id + '_' + this.n_id];
if( o_jicon ) {
o_jicon.src = this.o_root.a_tpl['icon_' + ((b_clear ? 0 : 128) + (this.a_config[2] ? 64 : 0) + (this.n_depth ? 0 : 32) + (this.a_children.length? 16 : 0) + (this.a_children.length && this.b_opened ? 8 : 0) + 2 + (this.is_last() ? 1 : 0))];
}
}

function item_init () {
var a_offset = [],
o_current_item = this.o_parent;
for (var i = this.n_depth; i > 1; i--) {
a_offset = '<img src="' + this.o_root.a_tpl[o_current_item.is_last() ? 'icon_e' : 'icon_l'] + '" border="0" align="absmiddle">';
o_current_item = o_current_item.o_parent;
}
if(this.a_config[0]=='') {
return '<table cellpadding="0" cellspacing="0" border="0"></table>' + (this.a_children.length ? '<div id="i_div' + this.o_root.n_id + '_' + this.n_id + '" style="display:none"></div>' : '');
}
return '<table cellpadding="0" cellspacing="0" border="0"><tr><td>' + (this.n_depth ? a_offset.join('') + (this.a_children.length ? '<a href="javascript: trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')" onmouseover="trees[' +this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')"><img src="' + this.get_icon(true) + '" border="0" align="absmiddle" name="j_img' + this.o_root.n_id + '_' + this.n_id + '"></a>' : '<img src="' + this.get_icon(true) + '" id="j_img' + this.o_root.n_id + '_' + this.n_id + '" border="0" align="absmiddle">') : '') + '<a href="' + ( this.a_config[1]=='0' ? 'javascript: trees[' + this.o_root.n_id + '].toggle(' + this.n_id + ')' : this.a_config[1] ) +'" target="' + this.o_root.a_tpl['target'] + '" onclick="return ' + (this.a_children[0] ? 'true' : 'trees[' + this.o_root.n_id +'].select(' + this.n_id + ')' ) + '" onmouseover="trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' +this.o_root.n_id + '].mout(' + this.n_id + ')" class="' + style_el + '" id="i_txt' + this.o_root.n_id + '_' + this.n_id + '"><img src="' + this.get_icon() + '" border="0" align="absmiddle" name="i_img' + this.o_root.n_id + '_' + this.n_id + '" class="t' + this.o_root.n_id + 'im">' + this.a_config[0] + '</a></td></tr></table>' + (this.a_children.length ? '<div id="i_div' + this.o_root.n_id + '_' + this.n_id + '" style="display:none"></div>' : '');
}

function item_get_icon (b_junction) {
return this.o_root.a_tpl['icon_' + ((this.a_config[2] && b_junction ? 64 : 0) + (this.n_depth ? 0 : 32) + (this.a_children.length ? 16 : 0) + (this.a_children.length && this.b_opened ? 8 : 0) + (!b_junction && this.o_root.o_selected == this ? 4 : 0) + (b_junction ? 2 : 0) + (b_junction && this.is_last() ? 1 : 0))];
}

var path_to_item = [];
var trees = [];
get_element = document.all ?
function (s_id) { return document.all[s_id] } :
function (s_id) { return document.getElementById(s_id) };
load_tree_menu = 1;

View User's Profile View All Posts By User U2U Member
Post new thread

Related Links:
Product Page
Product Demonstrations Live Demos:
Frames targeting
Win help style
Free Download Free Download
Free Download Menu Builders
Online Builder
Product Documentation Documentation:
Documenation Page
Support Forum Technical Support
Support Forum
   

Go To Top


Powered by XMB 1.9.1 Nexus
Developed By Aventure Media & The XMB Group © 2002-2004