COOLjsTree Frequently Asked Questions
This document covers most of frequently asked questions regarding COOLjsTree and COOLjsTree Professional scripts. If you think we are missing something, please write your suggestions to the following address: jsinfo@cooldev.com. Spelling and grammar tips are also greatly welcome.
Contents
Questions and Answers
1. How can I add your tree to my page?
Step 1. Go to online builder and try to generate tree structure. Builder's output will be similar to the contents of the following file: tree_nodes.txt. Download this file and then rename it to "tree_nodes.js".
Step 2. Get or create some tree_format.js. Here is a good sample to start from: tree_format.txt. Download this file also and then rename it to "tree_format.js".
Also you need to get these image in order to get working tree: c.gif (
), e.gif (
), and b.gif (blank image). Please download them also.
Note: If you are using Standard edition, then you don't need options 14-22: just remove these lines.
Step 3. Put tree_nodes.js, tree_format.js, and cooltree.js (or cooltreepro.js if you are using Professional version) into some folder, probably into the same folder where your HTML code is. Then link these files into your HTML code:
<script type="text/javascript" src="cooltree.js"></script>
<script type="text/javascript" src="tree_format.js"></script>
<script type="text/javascript" src="tree_nodes.js"></script>
Also create subfolder "img" in the same folder where your HTML files are, and put images b.gif, c.gif, and e.gif there.
Step 4. Add initialization code to your HTML page. It should go right before </BODY> (this is not a rule, and under some circumstances code may go to other places, but in our sample we will put it right before the </BODY>).
Standard edition:
<script type="text/javascript">
var tree1 = new COOLjsTree("MyTree", TREE_NODES, TREE_FORMAT);
</script>
</body>
Professional edition:
<script type="text/javascript">
var tree1 = new COOLjsTreePRO("MyTree", TREE_NODES, TREE_FORMAT);
tree1.init();
RedrawAllTrees();
</script>
</body>
Step 5. Now you can add some CSS code (please look at the options 10 and 11 in the tree_format.js) to your page.
2. All nodes are drawn on top of each other!
There are two possible reasons: 1) non-Professional version was placed inside a table or some other container and 2) wrong initialization sequence of the Professional version. In the first case you have to move initialization code ("var tree1 = new COOLjsTree(...)") out of any containers, to the <BODY> level. In the second case your code does not have "RedrawAllTrees()" call (or it is misplaced). This function must be called just before the closing </BODY> tag:
<script type="text/javascript">
RedrawAllTrees();
</script>
</body>
</html>
Also you can put this call into the "onload" event handler:
<body onload="RedrawAllTrees();">
3. Differences between Standard and Professional.
Professional version has same features Standard edition has, but it also has some more features which can help people in building sites. Some customers try to achieve these features using non-Professional version: they are doing workarounds, making patches, etc, and this violates stability. That is the major reason why we consider COOLjsTree Professional more stable. We have galleries which demonstrate Standard and Professional features.
4. Some nodes in my tree have very long captions. How can I make text wrap?
There are two possibilities: dumber one and smarter one. Latter requires original script patching, and does wrapping automatically (you can contact technical support to get the patch). Former possibility - dumber one - implies using of tables inside nodes in the tree_nodes.js:
['<table width="70" cellspacing="0" cellpadding="0" border="0"><tr><td>My very long node caption'</td></tr></table>', 'my_page.html', null],
This will wrap text on 70 pixels boundary. If you have too many nodes which should wrap, you can use the following code (it also should go to tree_nodes.js):
function w(text, width) {
return '<table width="' + width + '" cellspacing="0" cellpadding="0" border="0"><tr><td>' + text + '</td></tr></table>';
}
var TREE1_NODES = [
[w('Long caption 1', 100), null, null,
[w('Long caption 2', 84), null, null],
...
Please note that second level ('Long caption 2') has width 84, while first level has width 100 px. Specifying these width we assuming that level identation is 16 px (other identation value will result in other difference between first and second levels' widths).
5. Highlighting current node.
Standard edition (i.e. non-Professional) does not support highlighting of the current node, I should use Professional instead (in the Professional solution is obvious: option #21 turns this feature on, and option #22 specifies visual appearance like the following: "['unselected_background_color', 'selected_background_color', 'selected_node_CSS_class']").
But if you want to highlight some node once per page load (e.g. when user loads page "Contact" then node "Contact" must be highlighted, and when user goes to "Product" then corresponding node "Product" get's highlighted), then you can do some trick with Standard edition:
function f(node) {
if (location.href.indexOf(node[1]) > -1) node[0] = '<b>' + node[0] + '</b>';
return node;
}
var TREE_NODES = [
f(['Contact', 'contact.html', null]),
f(['Product', 'product.html', null])
];
This code should be placed into tree_nodes.js.
6. Resizable background (format option #20).
What is it? It is feature of COOLjsTree Professional which causes tree to behave like resizable box: when nodes expand or collapse box will grow or shrink. If the tree will be inside some caontainer like TD or DIV, then this container will also be resized to fit the tree.
Under what circumstances does this feature work? First, you have to enable it: option #20 must be set to "true". Next, tree must be positioned relatively (option #18). Finally, browser must support DOM: IE4+, Mozilla, NN6+, Opera 7+.
7. Redirecting link to other frame.
Don't use <BASE target="something"> tag for this purpose because it will cause unexpected behavior. Instead use third parameter in the node definition (tree_nodes.js file):
['Node caption', 'some_file.html', 'someFrame'],
8. Download size calculations.
Script itself is 14Kb (21Kb for the Professional). Average tree_format.js is 1Kb (1.5Kb for the Professional), and average tree_nodes.js is about 2Kb for couple of dozens of nodes. Additional initialization code and CSS style specification usually does not exceed 0.5Kb. Thus, full download size for the tree is 17.5Kb (25Kb for the Professional) - 3 to 6 seconds on 56K modem for the very first page visit, and almost nothing during consequent visits because of browser cache.
9. Unnecessary page reloading under Opera.
Yes, this is bug. But it was fixed ages ago, and you are expiriencing it because your version of the tree is outdated. You can contact technical support to get the latest version of the script.
10. Offline version of the tree builder.
Yes, we have offline version of the tree builder. Customers who had bought Standard or Professional edition can get it for free by sending query to technical support team (don't forget to include your Ref.No.).
11. How does tree understand sizes specified for button and folder images?
If you are using your tree in the "explorer-like" mode (Professional version), then effective image sizes are specified by option #16. In all other cases option #4 is in effect, and #7 is ignored. This means that all images in your tree - buttons, folders, documents, lines - must have same size.
12. Having only "+" and "-" icons and captions - no other images.
Sure, this is possible. Take a closer look at tree_format.js: options #2, #3, and #4 control appearance of the "+' and "-" icons, and options #5, #6, and #7 control appearance of the folder/document images. These two sets of images can be controlled separately (i.e. you can turn folder images by setting option #5 to "false", and leave plus/minus icons y setting option #2 to "true"), but please read previous question to find out how to specify image sizes correctly.
13. Setting up initial tree state.
After creation all tree nodes are collapsed by default. You can expand some or all branches during initialization, and there are several methods to do this. All of them apply to both Standard and Professional editions, unless different applience specified.
Expand all nodes. You can call "expandAll()" method.
tree1.expandAll();
Expand specific node(s).There is method called "expandNode()". It toggles state of the individual node identified by node's ID. It does not alter state of the parent nodes.
// expand the very first node
tree1.expandNode(0);
// helper function; expands node and all parent nodes
function exp(node) {
while (node) {
if (!node.expanded) node.treeView.expandNode(node.index);
node = node.parentNode;
}
}
// expand node with caption "My node",
// i.e. definition was: ['My node', 'some_file.html', ...]
var node1 = tree1.nodeByName('My node');
exp(node1);
// expand node with URL "my_page.html",
// i.e. definition was: ['Some caption', 'my_page.html', ...]
var node2 = tree1.nodeByURL('my_page.html');
exp(node2);
// expand node with ID 123,
// i.e. definition was: [{id:123}, 'Some other caption', 'some_page.html', ...]
var node3 = tree1.nodeByID(123);
exp(node3);
In the structure definition file. This can be done only for the Professional version:
['Node caption', 'node_url.html', null, {format:{expanded:true}}],
From cookies. This is special case: Professional version can store it's state like a cookie, and then restore it during tree's creation. This functionality is controlled by option #17 in tree_format.js:
//17. if true state will be saved in cookies
true,
14. How to assign different images to particular node in the database environment?
Our ASP-based database sample included into the Professional package does not support individual image set assigning. But it is not very hard to modify this sample and add images support. Generally, you have to create some table with two fields integer ID and text IMAGESET, and then fill in couple of imagesets (just like they should appear in the tree_nodes.js). Then you have to add integer column IMAGESET to the TREEMENU table, and fill this field with ID value from IMAGESET table (only couple of nodes, for testing purposes). Then you have to modify ASP file: subroutine DrawNode should also query corresponding IMAGESET field from imagesets table, and if this field is not null then print it out as fourth parameter. That's it. If you don't to deal with all this stuff by yourself then you can ask technical support to give you ready code (it is not yet included into COOLjsTree Professional package, but eventually will be).
15. How can I expand or collapse all nodes?
There are two special functions: collapseAll() and expandAll(). Here is the way they can be called (applies both to Professional and Standard editions):
<script type="text/javascript">
var tree1 = new COOLjsTree...
...
tree1.expandAll();
tree1.draw();
...
tree1.collapseAll();
tree1.draw();
</script>
These functions also can be called from event handlers, but don't forget to call "draw()" to redraw the tree.
16. We have a lot of nodes, and tree works very slowly!
Performance will degrade if your tree has 500 or more nodes. This happens because each node is DHTML layer + table + couple of images + couple of links. Multiply this by several hundreds and you'll understand how hard it is for browser to render all this stuff.
Naturally, performance will increase if not all nodes will be created during initialization, but rather only visible ones. And then script can create other nodes as user expands the tree. We are currently developing this feature, but it will work only under modern browsers which follow W3C DOM specification, i.e. Mozilla, IE4+, NN6+, Opera 7+.
17. Is it possible to add and remove tree nodes on the fly via JavaScript?
Not yet. This feature is under development now.
18. How fast do tree and menu evolve? How active is the development process?
Please, refer to our news to see detailed version history.
This document covers most of frequently asked questions regarding COOLjsTree
and COOLjsTree Professional scripts. If you think we are missing something,
please write your suggestions to the following address: javascript@cooldev.com. Spelling and
grammar tips are also greatly welcome.
Contents
Questions and Answers
1. How can I add your tree to my page?
Step 1. Go to online builder and try to generate
tree structure. Builder's output will be similar to the contents of the
following file: tree_nodes.txt. Download
this file and then rename it to "tree_nodes.js".
Step 2. Get or create some tree_format.js. Here is a
good sample to start from: tree_format.txt.
Download this file also and then rename it to "tree_format.js".
Also you need to get these image in order to get working
tree: c.gif (), e.gif (), and b.gif (blank image). Please download them
also.
Note: If you are using Standard edition, then you don't need
options 14-22: just remove these lines.
Step 3. Put tree_nodes.js, tree_format.js, and
cooltree.js (or cooltreepro.js if you are using Professional version) into some
folder, probably into the same folder where your HTML code is. Then link these
files into your HTML code:
<script type="text/javascript" src="cooltree.js"></script>
<script type="text/javascript" src="tree_format.js"></script>
<script type="text/javascript" src="tree_nodes.js"></script>
Also create subfolder "img" in the same folder where your
HTML files are, and put images b.gif, c.gif, and e.gif there.
Step 4. Add initialization code to your HTML page.
It should go right before </BODY> (this is not a rule, and under some
circumstances code may go to other places, but in our sample we will put it
right before the </BODY>).
Standard edition:
<script type="text/javascript">
var tree1 = new COOLjsTree("MyTree", TREE_NODES, TREE_FORMAT);
</script>
</body>
Professional edition:
<script type="text/javascript">
var tree1 = new COOLjsTreePRO("MyTree", TREE_NODES, TREE_FORMAT);
tree1.init();
RedrawAllTrees();
</script>
</body>
Step 5. Now you can add some CSS code (please look
at the options 10 and 11 in the tree_format.js) to your page.
2. All nodes are drawn on top of each other!
There are two possible reasons: 1) non-Professional version
was placed inside a table or some other container and 2) wrong initialization
sequence of the Professional version. In the first case you have to move
initialization code ("var tree1 = new COOLjsTree(...)") out of any containers,
to the <BODY> level. In the second case your code does not have
"RedrawAllTrees()" call (or it is misplaced). This function must be called just
before the closing </BODY> tag:
<script type="text/javascript">
RedrawAllTrees();
</script>
</body>
</html>
Also you can put this call into the "onload" event
handler:
<body onload="RedrawAllTrees();">
3. Differences between Standard and Professional.
Professional version has same features Standard edition has,
but it also has some more features which can help people in building sites.
Some customers try to achieve these features using non-Professional version:
they are doing workarounds, making patches, etc, and this violates stability.
That is the major reason why we consider COOLjsTree Professional more stable.
We have galleries which demonstrate Standard
and Professional
features.
4. Some nodes in my tree have very long captions. How can I
make text wrap?
Professional version of the tree includes text wrapping
feature (option #24 of tree_format.js denotes wrapping margin, in pixels; zero
means "no wrapping"). With Free/Standard version one can use tables inside
nodes in the tree_nodes.js:
['<table width="70" cellspacing="0" cellpadding="0" border="0"><tr><td>My very long node caption'</td></tr></table>', 'my_page.html', null],
This will wrap text on 70 pixels boundary. If you have too
many nodes which should wrap, you can use the following code (it also should go
to tree_nodes.js):
function w(text, width) {
return '<table width="' + width + '" cellspacing="0" cellpadding="0" border="0"><tr><td>' + text + '</td></tr></table>';
}
var TREE1_NODES = [
[w('Long caption 1', 100), null, null,
[w('Long caption 2', 84), null, null],
...
Please note that second level ('Long caption 2') has width
84, while first level has width 100 px. Specifying these width we assuming that
level identation is 16 px (other identation value will result in other
difference between first and second levels' widths).
Also, as a quicker solution for simple cases, you can insert <br />
into node's caption — this will insert a line break as expected.
It is recommended to use Professional edition because it is much easier to
enable wrapping, and it is implemented in much more robust way (no manual width
calculations for every level, no problems with anchors).
5. Highlighting current node.
Standard/Free version does not support highlighting of the
current node, you should use Professional instead (in the Professional solution
is obvious: option #21 turns this feature on, and option #22 controls visual
appearance like the following: "['unselected_background_color',
'selected_background_color', 'selected_node_CSS_class']"). Please, note that
there are much more control over appearance; to find out more on this topic,
please use the manual
reference.
But if you want to highlight some node once per page load
(e.g. when user loads page "Contact" then node "Contact" must be highlighted,
and when user goes to "Product" then corresponding node "Product" get's
highlighted), then you can do some trick with Standard edition:
function f(node) {
if (location.href.indexOf(node[1]) > -1) node[0] = '<b>' + node[0] + '</b>';
return node;
}
var TREE_NODES = [
f(['Contact', 'contact.html', null]),
f(['Product', 'product.html', null])
];
This code should be placed into tree_nodes.js.
6. Resizable background (format option #20).
What is it? It is feature of COOLjsTree Professional which
causes tree to behave like resizable box: when nodes expand or collapse box
will grow or shrink. If the tree will be inside some caontainer like TD or DIV,
then this container will also be resized to fit the tree.
Under what circumstances does this feature work? First, you
have to enable it: option #20 must be set to "true". Next, tree must be
positioned relatively (option #18). Finally, browser must support DOM: IE4+,
Mozilla, NN6+, Opera 7+.
7. Redirecting link to other frame.
Don't use <BASE target="something"> tag for this
purpose because it will cause unexpected behavior. Instead use third parameter
in the node definition (tree_nodes.js file):
['Node caption', 'some_file.html', 'someFrame'],
8. Download size calculations, or How much traffic will be
caused by tree?
Script itself is 14Kb (21Kb for the Professional). Average
tree_format.js is 1Kb (1.5Kb for the Professional), and average tree_nodes.js
is about 2Kb for couple of dozens of nodes. Additional initialization code and
CSS style specification usually does not exceed 0.5Kb. Thus, full download size
for the tree is 17.5Kb (25Kb for the Professional) - 3 to 6 seconds on 56K
modem for the very first page visit, and almost nothing during consequent
visits because of browser cache.
9. Unnecessary page reloading under Opera.
Yes, this is bug. But it was fixed ages ago, and you are
expiriencing it because your version of the tree is outdated. Please, go to our
update section to get the
latest version of the script.
10. Offline tree builder.
Please, visit the following page to find
out about the builder.
11. How does tree understand sizes specified for button and
folder images?
If you are using your tree in the "explorer-like" mode
(Professional version), then effective image sizes are specified by option #16.
In all other cases option #4 is in effect, and #7 is ignored. This means that
all images in your tree - buttons, folders, documents, lines - must have same
size.
12. Having only "+" and "-" icons and captions - no other images.
Sure, this is possible. Take a closer look at tree_format.js:
options #2, #3, and #4 control appearance of the "+' and "-" icons, and options
#5, #6, and #7 control appearance of the folder/document images. These two sets
of images can be controlled separately (i.e. you can turn folder images by
setting option #5 to "false", and leave plus/minus icons y setting option #2 to
"true"), but please read previous question to find out how to specify image
sizes correctly.
13. Setting up initial tree state.
After creation all tree nodes are collapsed by default. You
can expand some or all branches during initialization, and there are several
methods to do this. All of them apply to both Standard and Professional
editions, unless different applience specified.
Expand all nodes. You can call "expandAll()" method.
tree1.expandAll();
Expand specific node(s).There is method
called "expandNode()". It toggles state of the individual node identified by
node's ID. It does not alter state of the parent nodes.
// expand the very first node
tree1.expandNode(0);
// helper function; expands node and all parent nodes
function exp(node) {
while (node) {
if (!node.expanded) node.treeView.expandNode(node.index);
node = node.parentNode;
}
}
// expand node with caption "My node",
// i.e. definition was: ['My node', 'some_file.html', ...]
var node1 = tree1.nodeByName('My node');
exp(node1);
// expand node with URL "my_page.html",
// i.e. definition was: ['Some caption', 'my_page.html', ...]
var node2 = tree1.nodeByURL('my_page.html');
exp(node2);
// expand node with ID 123,
// i.e. definition was: [{id:123}, 'Some other caption', 'some_page.html', ...]
var node3 = tree1.nodeByID(123);
exp(node3);
In the structure definition file. This can
be done only for the Professional version:
['Node caption', 'node_url.html', null, {format:{expanded:true}}],
From cookies. This is special case:
Professional version can store it's state like a cookie, and then restore it
during tree's creation. This functionality is controlled by option #17 in
tree_format.js:
//17. if true state will be saved in cookies
true,
14. How to assign different images to particular node in the
database environment?
Our ASP-based database sample included into the Professional
package does not support individual image set assigning. But it is not very
hard to modify this sample and add images support. Generally, you have to
create some table with two fields integer ID and text IMAGESET, and then fill
in couple of imagesets (just like they should appear in the tree_nodes.js).
Then you have to add integer column IMAGESET to the TREEMENU table, and fill
this field with ID value from IMAGESET table (only couple of nodes, for testing
purposes). Then you have to modify ASP file: subroutine DrawNode should also
query corresponding IMAGESET field from imagesets table, and if this field is
not null then print it out as fourth parameter. That's it. If you don't to deal
with all this stuff by yourself then you can ask technical support to give you ready
code (it is not yet included into COOLjsTree Professional package, but
eventually will be).
15. How can I expand or collapse all nodes?
There are two special functions: collapseAll() and
expandAll(). Here is the way they can be called (applies both to Professional
and Standard editions):
<script type="text/javascript">
var tree1 = new COOLjsTree...
...
tree1.expandAll();
tree1.draw();
...
tree1.collapseAll();
tree1.draw();
</script>
These functions also can be called from event handlers, but
don't forget to call "draw()" to redraw the tree.
16. We have a lot of nodes, and tree works very slowly!
Performance will degrade if your tree has 500 or more nodes.
This happens because each node is DHTML layer + table + couple of images +
couple of links. Multiply this by several hundreds and you'll understand how
hard it is for browser to render all this stuff.
Naturally, performance will increase if not all nodes will be
created during initialization, but rather only visible ones. And then script
can create other nodes as user expands the tree. We are currently developing
this feature, but it will work only under modern browsers which follow W3C DOM
specification, i.e. Mozilla, IE4+, NN6+, Opera 7+.
17. Is it possible to add and remove tree nodes on the fly via
JavaScript?
Not yet. This feature is under development now.
18. How fast do tree and menu evolve? How active is the
development process?
Please, refer to our news to see
detailed version history.
19. Every mouse click on any node gives me a JavaScript error!
Remove any <BASE> tags, and the problem will be gone
almost for sure.
