JavaScript.CoolDev.Com Support Forums
Any questions related to JavaScript menu and JavaScript tree menu by Javascript.CoolDev.Com
| Author |
Message |
mdawson
Joined: 03 Jun 2007
Posts: 2
|
 Posted: Sun Jun 03, 2007 6:56 pm Post subject: Nothing but blank pages |
 |
|
I have been programing computers for better than 25 years and I have to admit, COOLjsTreePro has me stumped. When I go beyond the very basic parameter structure, all I get is a blank page.
Firstly, I have a Mac at home, so I needed to run COOLjsBuilder on my lab PC to build the basic tree structure and functionality of my navigation menu. As the full navigation tree consists of well over 100 nodes, I chose to first set up only a small portion of the tree including all of the possible node types. As the purpose of COOLjsBuilder is to build correct versions of the nodes, format and CSS code, one would hope that it works correctly. Well, when I attempted to preview the tree I built, two errors were reported in the script, but there was no indication as to whether the errors were in the node code, format code or the cooltreepro script.
I ignored the errors for the time being an brought the code COOLjsBuilder generated home to review in Dreamweaver. When I ran the code generated by the preview feature in COOLjsBuilder, I get a blank page. COOLjsBuilder generated the following files:
tree_nodes.js
| Code: |
var TREE_NODES = [
[{id:library}, 'LIBRARY', null, null],
[{id:welcome}, 'Home', 'welcome.html', 'mainFrame'],
[{id:music}, 'Music', 'music.html', 'mainFrame',
{format:
{folder:
['images/music_up.png', 'images/music_up.png', null],
['images/menuImages/playlistButtons/level1_closed_up.png', 'images/menuImages/playlistButtons/level1_open_up.png', null]
}
},
[{id:artistsAlbums}, 'Artists/Albums', 'alphalists/artistAlbum.html', 'mainFrame',
{format:
{folder:
['images/folder_up.png', 'images/folder_up.png', null],
['images/menuImages/playlistButtons/level2_closed_up.png', 'images/menuImages/playlistButtons/level2_open_up.png', null]
}
},
[{id:list0}, '#', 'alphalists/list0.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listA}, 'A', 'alphalists/listA.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listB}, 'B', 'alphalists/listB.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listC}, 'C', 'alphalists/listC.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listD}, 'D', 'alphalists/listD.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listE}, 'E', 'alphalists/listE.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listF}, 'F', 'alphalists/listF.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listG}, 'G', 'alphalists/listG.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listH}, 'H', 'alphalists/listH.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listI}, 'I', 'alphalists/listI.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listJ}, 'J', 'alphalists/listJ.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listK}, 'K', 'alphalists/listK.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listL}, 'L', 'alphalists/listL.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listM}, 'M', 'alphalists/listM.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listN}, 'N', 'alphalists/listN.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listO}, 'O', 'alphalists/listO.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listP}, 'P', 'alphalists/listP.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listQ}, 'Q', 'alphalists/listQ.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listR}, 'R', 'alphalists/listR.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listS}, 'S', 'alphalists/listS.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listT}, 'T', 'alphalists/listT.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listU}, 'U', 'alphalists/listU.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listV}, 'V', 'alphalists/listV.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listW}, 'W', 'alphalists/listW.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listX}, 'X', 'alphalists/listX.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listY}, 'Y', 'alphalists/listY.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:listZ}, 'Z', 'alphalists/listZ.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}]
],
[{id:variousArtists}, 'Various Artists', 'alphalists/variousArtists.html', 'mainFrame',
{format:
{folder:
['images/folder_up.png', 'images/folder_up.png', null],
['images/menuImages/playlistButtons/level2_closed_up.png', 'images/menuImages/playlistButtons/level2_open_up.png', null]
}
},
[{id:vaHipHop}, 'Hip Hop', 'alphalists/listVA_hiphop.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:vaHouse}, 'House', 'alphalists/listVA_house.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:vaJazz}, 'Jazz', 'alphalists/listVA_jazz.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:vaOldSchool}, 'Old School', 'alphalists/listVA_oldschool.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:vaRB}, 'R&B', 'alphalists/listVA_rb.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:vaRap}, 'Rap', 'alphalists/listVA_rap.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:vaReggae}, 'Reggae', 'alphalists/listVA_reggae.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:vaSlowJams}, 'Slow Jams', 'alphalists/listVA_slowjams.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}],
[{id:vaSoundtracks}, 'Soundtracks', 'alphalists/listVA_soundtrack.html', 'mainFrame', {format:{folder:[null, null, 'images/musiclist_up.png']}}]
]
],
[{id:playlists}, 'PLAYLISTS', null, null],
[{id:aboutPlaylists}, 'About Playlists', 'aboutPlaylists.html', 'mainFrame', {format:{folder:[null, null, 'images/aboutplaylists_up.png']}}],
[{id:usingPartyShuffle}, 'Using Party Shuffle', 'usingPartyShuffle', 'mainFrame', {format:{folder:[null, null, 'images/partyshuffle_up.png']}}],
[{id:dance}, 'Dance', 'playlists/dance.html', 'mainFrame',
{format:
{folder:
['images/folder_up.png', 'images/folder_up.png', null],
['images/menuImages/playlistButtons/level1_closed_up.png', 'images/menuImages/playlistButtons/level1_open_up.png', null]
}
},
[{id:danceGeneral}, 'Dance (General)', 'playlists/danceGeneral.html', 'mainFrame',
{format:
{folder:
['images/folder_up.png', 'images/folder_up.png', null],
['images/menuImages/playlistButtons/level2_closed_up.png', 'images/menuImages/playlistButtons/level2_open_up.png', null]
}
},
[{id:dance1980s}, 'Dance (1980s)', null, null, {format:{folder:[null, null, 'images/playlist_up.png']}}],
[{id:dance1990s}, 'Dance (1990s)', null, null, {format:{folder:[null, null, 'images/playlist_up.png']}}],
[{id:dance2000s}, 'Dance (2000s)', null, null, {format:{folder:[null, null, 'images/playlist_up.png']}}]
],
[{id:clubbin}, 'Clubbin\'', null, null, {format:{folder:[null, null, 'images/smartplaylist_up.png']}}],
[{id:club}, 'Club', null, null, {format:{folder:[null, null, 'images/playlist_up.png']}}],
[{id:disco}, 'Disco', null, null, {format:{folder:[null, null, 'images/playlist_up.png']}}],
[{id:house}, 'House', null, null, {format:{folder:[null, null, 'images/playlist_up.png']}}]
]
];
|
tree_format.js
| Code: | var TREE_FORMAT = [
0, // 0. left position
0, // 1. top position
false, // 2. show buttons ("+" and "-" images)
["", "", ""], // 3. button images [collpased, expanded, blank]
[20, 20, 0], // 4. size of buttons [width, height, indent of childless nodes]
true, // 5. show icons ("folder" and "document")
["", "", ""], // 6. icon images: closed folder, opened folder, document
[20, 20], // 7. size of icons: width, height
[0, 20, 40], // 8. indent amount for each level of the tree
"", // 9. background color for the tree
'clsNode', // 10. default CSS class for nodes
[], // 11. individual CSS classes for levels of the tree
false, // 12. "single branch" mode
[0, 0], // 13. padding and spacing values for all nodes
false, // 14. "explorer-like" mode
[], // 15. images for "explorer-like" mode
[], // 16. size of images for "explorer-like" mode: width, height
false, // 17. store tree state into cookies
false, // 18. relative positioning mode
[0, 0], // 19. initial space for the relatively positioned tree: width, height
false, // 20. resize container of the relatively positioned tree
true, // 21. change background-color and style for selected node
["white", "#EEEEEE"] // 22. background color for unselected node, background color for selected node, class for selected node
];
|
tree_styles.css
| Code: |
.clsNode {
font-family: tahoma;
font-size: 8pt;
text-decoration: none;
cursor: hand;
color: black;
}
|
testMenu.html (was originally named index.html)
| Code: |
<html>
<head>
<link href="tree_styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="cooltreepro.js"></script>
<script type="text/javascript" src="tree_nodes.js"></script>
<script type="text/javascript" src="tree_format.js"></script>
</head>
<body>
<script type="text/javascript">
var tree1 = new COOLjsTreePRO("tree1", TREE_NODES, TREE_FORMAT);
tree1.init();
</script>
<script type="text/javascript">
RedrawAllTrees();
</script>
</body>
</html>
|
As a long-time coder I opted to break down the code to debug the situation. First I reviewed a number of the samples included in the COOLjsTreePro download, all of which work correctly, and I noticed a few differences in the code. So I restarted coding in Dreamweaver starting at a very basic level.
| Code: |
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="cooltreepro.js"></script>
</head>
<body>
<script type="text/javascript">
var TREE_NODES = [
['LIBRARY', null, null],
['Home', 'welcome.html', 'mainFrame']
];
var TREE_FORMAT = [
0, // 0. left position
0, // 1. top position
false, // 2. show buttons ("+" and "-" images)
["", "", ""], // 3. button images [collpased, expanded, blank]
[20, 20, 0], // 4. size of buttons [width, height, indent of childless nodes]
true, // 5. show icons ("folder" and "document")
["", "", ""], // 6. icon images: closed folder, opened folder, document
[20, 20], // 7. size of icons: width, height
[0, 20, 40], // 8. indent amount for each level of the tree
"", // 9. background color for the tree
'clsNode', // 10. default CSS class for nodes
[], // 11. individual CSS classes for levels of the tree
false, // 12. "single branch" mode
[0, 0], // 13. padding and spacing values for all nodes
false, // 14. "explorer-like" mode
[], // 15. images for "explorer-like" mode
[], // 16. size of images for "explorer-like" mode: width, height
false, // 17. store tree state into cookies
false, // 18. relative positioning mode
[0, 0], // 19. initial space for the relatively positioned tree: width, height
false, // 20. resize container of the relatively positioned tree
true, // 21. change background-color and style for selected node
["white", "#EEEEEE"] // 22. background color for unselected node, background color for selected node, class for selected node
];
var tree1 = new COOLjsTreePRO("tree1", TREE_NODES, TREE_FORMAT);
tree1.init();
RedrawAllTrees();
</script>
</body>
|
This code works properly displaying the unlinked 'LIBRARY' header and 'Home' link. The only reason the code above seemed to work was because- All of the code was placed into a single file. Using a separate file to define the nodes and format and linking to them does not work.
- All of the {id} tags that were generated by COOLjsBuilder had to be removed.
Now, when I attempted to add the ‘Music’ node, which will have children and associated graphics, things quickly fall apart:
| Code: |
['Music', 'music.html', 'mainFrame',
{format:
{folder:
['images/music_up.png', 'images/music_up.png', null],
['images/menuImages/playlistButtons/level1_closed_up.png', 'images/menuImages/playlistButtons/level1_open_up.png', null]
}
}
]
|
Adding the defined node above after the ‘Home’ node in the original code results in a completely blank page. If the options between the {} are omitted, the page will display the three nodes, but when it is included, the code breaks. So it would seem that adding any node definitions causes the code to break. The problem is so persistent that in some cases I still get a blank page even after the node definitions are removed.
I find it beyond perplexing that what works in the sample trees refuses to work when I use COOLjsBuilder or write my own code. I even attempted to separate out the node definitions using variables to no avail:
| Code: |
<html>
<head>
<style>
.clsNode {
font-family: tahoma;
font-size: 8pt;
text-decoration: none;
cursor: hand;
color: black;
}
</style>
<script type="text/javascript" src="cooltreepro.js"></script>
</head>
<body>
<script type="text/javascript">
var musicFolderGroup = {
"format":{
"folder":[
"images/music_up.png",
"images/music_up.png",
null
],
[
"images/menuImages/playlistButtons/level1_closed_up.png",
"images/menuImages/playlistButtons/level1_open_up.png",
null
]
}
};
var TREE_NODES = [
['LIBRARY', null, null],
['Home', 'welcome.html', 'mainFrame'],
['Music', 'music.html', 'mainFrame', musicFolderGroup]
];
var TREE_FORMAT = [
0, // 0. left position
0, // 1. top position
false, // 2. show buttons ("+" and "-" images)
["", "", ""], // 3. button images [collpased, expanded, blank]
[20, 20, 0], // 4. size of buttons [width, height, indent of childless nodes]
true, // 5. show icons ("folder" and "document")
["", "", ""], // 6. icon images: closed folder, opened folder, document
[20, 20], // 7. size of icons: width, height
[0, 20, 40], // 8. indent amount for each level of the tree
"", // 9. background color for the tree
'clsNode', // 10. default CSS class for nodes
[], // 11. individual CSS classes for levels of the tree
false, // 12. "single branch" mode
[0, 0], // 13. padding and spacing values for all nodes
false, // 14. "explorer-like" mode
[], // 15. images for "explorer-like" mode
[], // 16. size of images for "explorer-like" mode: width, height
false, // 17. store tree state into cookies
false, // 18. relative positioning mode
[0, 0], // 19. initial space for the relatively positioned tree: width, height
false, // 20. resize container of the relatively positioned tree
true, // 21. change background-color and style for selected node
["white", "#EEEEEE"] // 22. background color for unselected node, background color for selected node, class for selected node
];
var tree1 = new COOLjsTreePRO("tree1", TREE_NODES, TREE_FORMAT);
tree1.init();
RedrawAllTrees();
</script>
</body>
</html>
|
|
|
| Back to top |
|
 |
AlexKunin
Developer
Joined: 03 Jan 2003
Posts: 1191
|
| Posted: Tue Jun 05, 2007 10:31 am Post subject: |
|
|
My general advices are:
1. Quote error messages. "Two errors were reported" is somewhat incompatible with great experiece, sorry.
2. When working with code directly, use right tool to run and debug it. Internet Explorer usually gives very cryptic error messages like "``null'' is null or not an object" (and our builder uses IE's ActiveX control). But Firefox (especially with FireBug installed) and Opera return very verbose error messages. In your particular case more robust browser would show you that constructions like this one
| Code: | | "format":{ "folder":[...], [...] } |
is syntactically incorrect because second array needs a key.
3. Don't use code generators. Our builder's purpose is to help novices to build their first tree/menu/bar. For coder with great experience it is much easier to take some ready sample and modify it.
---
It seems like a bug in builder's code generation routine - it omits some key in format (I think it is "buttons"). Can you send your project file to javascript@cooldev.com, please? |
|
| Back to top |
|
|
mdawson
Joined: 03 Jun 2007
Posts: 2
|
| Posted: Tue Jun 12, 2007 8:41 pm Post subject: It works now. |
|
|
| Quote: | | 1. Quote error messages. "Two errors were reported" is somewhat incompatible with great experiece, sorry. |
As I mentioned in my original post, I cannot run COOLjsBuilder at home, as I do not use Windows. My Web project is personal, so I do most of my development during spare time on weekends. I ran COOLjsBuilder at work the Friday evening before I posted and as I was already frustrated after a long week, I pretty much gave up and went home after getting errors in code that was generated by your utility and not me. So, I did not record the messages at the time and did not have access to a Windoze PC at the time I was able to post. I had a chance to run COOLjsBuilder again today and the errors were as follows:
An error has occurred in the script on this page.
Line: 5
Char: 171
Error: Expected identifier, string or number
Code: 0
URL: file://C:/Program%20Files/COOLBuilder/Preview/tree/index.html
An error has occurred in the script on this page.
Line: 10
Char: 5
Error: 'TREE_NODES' is undefined
Code: 0
URL: file://C:/Program%20Files/COOLBuilder/Preview/tree/index.html
As there is no character 171 in line 5 of the target file, index.html (see testMenu.html above), I assume that the error is in the 5th line of the treenodes.js file. The second error makes no sense as COOLjsBuilder did generate a file with the TREE_NODES variable.
| Quote: | 2. When working with code directly, use right tool to run and debug it. Internet Explorer usually gives very cryptic error messages like "``null'' is null or not an object" (and our builder uses IE's ActiveX control). But Firefox (especially with FireBug installed) and Opera return very verbose error messages. In your particular case more robust browser would show you that constructions like this one
| Code: | | "format":{ "folder":[...], [...] } |
is syntactically incorrect because second array needs a key. |
Now that I have the code working, this is correct, so it begs the question, why did COOLjsBuilder generate incorrect code? That is not the only incorrect syntax that COOLjsBuilder generated. If you look at the tree_nodes.js code above, code such as,
| Code: |
{format:
{folder:
['images/music_up.png', 'images/music_up.png', null],
['images/menuImages/playlistButtons/level1_closed_up.png', 'images/menuImages/playlistButtons/level1_open_up.png', null]
}
},
|
should have been,
| Code: |
{"format":
{"folders":
['images/music_up.png', 'images/music_up.png', null],
"buttons":
['images/menuImages/playlistButtons/level1_closed_up.png', 'images/menuImages/playlistButtons/level1_open_up.png', null]
}
},
|
COOLjsBuilder did not place quotes around the keys and it coded the key 'folder' instead of the correct 'folders' on top of omitting the key for the second set of files.
| Quote: | | 3. Don't use code generators. Our builder's purpose is to help novices to build their first tree/menu/bar. For coder with great experience it is much easier to take some ready sample and modify it. |
For an experienced programmer it is actually easier to also use your code builder to get a sense of how to write code to work with your script. Experience in programming does not equate to experience with every language or your product. My programming experience does not include JavaScript, so I hoped to use COOLjsBuilder to get sense of how to properly build the node and format variables in order to build the large tree that I wanted for my site, which has a little more than basic functionality. In all, I should have been able to generate code using COOLjsBuilder to examine then expand upon on my own just as I do when I need to do something I am unsure of in VBA Excel and record a macro to get an idea of the code, methods and properties I need to utilize. Once I was able to determine the problems in the code, like those described above, I was finally able to do just that with COOLjsTreePRO.
My navigation tree is now working after I spent the entire day coding and testing this past Saturday. It now includes all of the functionality I wanted except highlighting of the selected node and has been added it to my site this past weekend. So now my initial buyer's remorse has become a satisfied customer's glee. So although your replay started out unnecessarily harsh  , some of the advice you provided did help.
Now once I figure out how to get the selected node highlighting to work so that the entire row in the navigation frame is highlighted COOLjsTreePRO will have served its purpose for now. If you view personal music database site you will see that I modeled the navigation tree after iTunes' source menu. I figured familiarity given the site's content was the best way to go and just about everyone on the planet know how to use iTunes. So now I need to figure out how to get COOLjsTreePRO to change the graphics for the spacer, button, folder and full length of the remainder of the node within the menu frame to have the correct background image (aqua button highlight) when a node is selected. But that will be a project for this coming weekend if I have the time. Any advice that you can offer to that end would be greatly appreciated.
Here is the working code for those that wish to peruse it:
jsMainMenu.html
| Code: |
<HEAD>
<style type="text/css">
body {background-color: #D4DBE3;}
.clsNode {
font-family: verdana;
font-size: 8pt;
padding-left: 1px;
color: #000000;
}
.clsNodeOver {
font-family: verdana;
font-size: 8pt;
padding-left: 1px;
color: #0000FF;
font-weight: bold;
}
</style>
<script type="text/javascript" src="cooltreepro.js"></script>
<script type="text/javascript" src="treeFormat1.js"></script>
<script type="text/javascript" src="treeNodes1.js"></script>
<script type="text/javascript" src="treeFormat2.js"></script>
<script type="text/javascript" src="treeNodes2.js"></script>
<HEAD>
<BODY>
<script type="text/javascript">
var tree1 = new COOLjsTreePRO("tree1", TREE_NODES1, TREE_FORMAT1);
var tree2 = new COOLjsTreePRO("tree2", TREE_NODES2, TREE_FORMAT2);
</script>
<table width="192" cellpadding="0" cellspacing="0">
<tr>
<td class="clsNode">
<img src="images/menuImages/libraryHeader.png" width="192" height="20">
</td>
</tr>
<tr>
<td>
<script type="text/javascript">
tree1.init();
</script>
</td>
</tr>
<tr>
<td class="clsNode">
<img src="images/menuImages/playlistsHeader.png" width="192" height="24">
</td>
</tr>
<tr>
<td>
<script type="text/javascript">
tree2.init();
</script>
</td>
</tr>
</table>
<script type="text/javascript">
RedrawAllTrees();
</script>
</BODY>
|
treeFormat1.js
| Code: |
var TREE_FORMAT1 = [
0, // 0. left position
0, // 1. top position
true, // 2. show buttons ("+" and "-" images)
[ // 3. button images [collpased, expanded, blank]
"images/menuImages/playlistButtons/level1_closed_up.png",
"images/menuImages/playlistButtons/level1_open_up.png",
"images/blank20.png"
],
[20, 20, 20], // 4. size of buttons [width, height, indent of childless nodes]
true, // 5. show icons ("folder" and "document")
[ // 6. icon images: closed folder, opened folder, document
"images/folder_up.png",
"images/folder_up.png",
"images/home_up.png"
],
[20, 20], // 7. size of icons: width, height
[0, 14, 30], // 8. indent amount for each level of the tree
"", // 9. background color for the tree
"clsNode", // 10. default CSS class for nodes
[], // 11. individual CSS classes for levels of the tree
false, // 12. "single branch" mode
[0, 0], // 13. padding and spacing values for all nodes
false, // 14. "explorer-like" mode
[], // 15. images for "explorer-like" mode
[], // 16. size of images for "explorer-like" mode: width, height
true, // 17. store tree state into cookies
true, // 18. relative positioning mode
[192, 40], // 19. initial space for the relatively positioned tree: width, height
true, // 20. resize container of the relatively positioned tree
false, // 21. change background-color and style for selected node
["", "", "clsNodeOver"] // 22. background color for unselected node, background color for selected node, class for selected node
];
|
treeFormat2.js
| Code: |
var TREE_FORMAT2 = [
0, // 0. left position
0, // 1. top position
true, // 2. show buttons ("+" and "-" images)
[ // 3. button images [collpased, expanded, blank]
"images/menuImages/playlistButtons/level1_closed_up.png",
"images/menuImages/playlistButtons/level1_open_up.png",
"images/blank20.png"
],
[20, 20, 20], // 4. size of buttons [width, height, indent of childless nodes]
true, // 5. show icons ("folder" and "document")
[ // 6. icon images: closed folder, opened folder, document
"images/folder_up.png",
"images/folder_up.png",
"images/home_up.png"
],
[20, 20], // 7. size of icons: width, height
[0, 14, 30], // 8. indent amount for each level of the tree
"", // 9. background color for the tree
"clsNode", // 10. default CSS class for nodes
[], // 11. individual CSS classes for levels of the tree
false, // 12. "single branch" mode
[0, 0], // 13. padding and spacing values for all nodes
false, // 14. "explorer-like" mode
[], // 15. images for "explorer-like" mode
[], // 16. size of images for "explorer-like" mode: width, height
true, // 17. store tree state into cookies
true, // 18. relative positioning mode
[192, 240], // 19. initial space for the relatively positioned tree: width, height
true, // 20. resize container of the relatively positioned tree
false, // 21. change background-color and style for selected node
["", "", "clsNodeOver"] // 22. background color for unselected node, background color for selected node, class for selected node
];
|
treeNodes1.js
| Code: |
var homeGroup = {
"format":{
"buttons":[
"images/home_up.png",
"images/home_up.png",
"images/home_up.png"
]
}
};
var musicGroup = {
"format":{
"folders":[
"images/music_up.png",
"images/music_up.png",
"images/music_up.png"
]
}
};
var musicListGroup = {
"format":{
"folders":[
"images/musiclist_up.png",
"images/musiclist_up.png",
"images/musiclist_up.png"
]
}
};
var TREE_NODES1 = [
['Home', 'welcome.html', 'mainFrame', homeGroup],
['Music', 'music.html', 'mainFrame', musicGroup,
['Artists/Albums', 'alphalists/artistAlbum.html', 'mainFrame',
['#', 'alphalists/list0.html', 'mainFrame', musicListGroup],
['A', 'alphalists/listA.html', 'mainFrame', musicListGroup],
['B', 'alphalists/listB.html', 'mainFrame', musicListGroup],
['C', 'alphalists/listC.html', 'mainFrame', musicListGroup],
['D', 'alphalists/listD.html', 'mainFrame', musicListGroup],
['E', 'alphalists/listE.html', 'mainFrame', musicListGroup],
['F', 'alphalists/listF.html', 'mainFrame', musicListGroup],
['G', 'alphalists/listG.html', 'mainFrame', musicListGroup],
['H', 'alphalists/listH.html', 'mainFrame', musicListGroup],
['I', 'alphalists/listI.html', 'mainFrame', musicListGroup],
['J', 'alphalists/listJ.html', 'mainFrame', musicListGroup],
['K', 'alphalists/listK.html', 'mainFrame', musicListGroup],
['L', 'alphalists/listL.html', 'mainFrame', musicListGroup],
['M', 'alphalists/listM.html', 'mainFrame', musicListGroup],
['N', 'alphalists/listN.html', 'mainFrame', musicListGroup],
['O', 'alphalists/listO.html', 'mainFrame', musicListGroup],
['P', 'alphalists/listP.html', 'mainFrame', musicListGroup],
['Q', 'alphalists/listQ.html', 'mainFrame', musicListGroup],
['R', 'alphalists/listR.html', 'mainFrame', musicListGroup],
['S', 'alphalists/listS.html', 'mainFrame', musicListGroup],
['T', 'alphalists/listT.html', 'mainFrame', musicListGroup],
['U', 'alphalists/listU.html', 'mainFrame', musicListGroup],
['V', 'alphalists/listV.html', 'mainFrame', musicListGroup],
['W', 'alphalists/listW.html', 'mainFrame', musicListGroup],
['X', 'alphalists/listX.html', 'mainFrame', musicListGroup],
['Y', 'alphalists/listY.html', 'mainFrame', musicListGroup],
['Z', 'alphalists/listZ.html', 'mainFrame', musicListGroup]
],
['Various Artists', 'alphalists/variousArtists.html', 'mainFrame',
['Hip Hop', 'alphalists/listVA_hiphop.html', 'mainFrame', musicListGroup],
['House', 'alphalists/listVA_house.html', 'mainFrame', musicListGroup],
['Jazz', 'alphalists/listVA_jazz.html', 'mainFrame', musicListGroup],
['Old School', 'alphalists/listVA_oldschool.html', 'mainFrame', musicListGroup],
['R&B', 'alphalists/listVA_rb.html', 'mainFrame', musicListGroup],
['Rap', 'alphalists/listVA_rap.html', 'mainFrame', musicListGroup],
['Reggae', 'alphalists/listVA_reggae.html', 'mainFrame', musicListGroup],
['Slow Jams', 'alphalists/listVA_slowjams.html', 'mainFrame', musicListGroup],
['Soundtracks', 'alphalists/listVA_soundtrack.html', 'mainFrame', musicListGroup]
]
]
];
|
treeNodes2.js
| Code: |
var aboutPlaylistsGroup = {
"format":{
"folders":[
"images/aboutplaylists_up.png",
"images/aboutplaylists_up.png",
"images/aboutplaylists_up.png"
]
}
};
var partyShuffleGroup = {
"format":{
"folders":[
"images/partyshuffle_up.png",
"images/partyshuffle_up.png",
"images/partyshuffle_up.png"
]
}
};
var playlistGroup = {
"format":{
"folders":[
"images/playlist_up.png",
"images/playlist_up.png",
"images/playlist_up.png"
]
}
};
var smartPlaylistGroup = {
"format":{
"folders":[
"images/smartplaylist_up.png",
"images/smartplaylist_up.png",
"images/smartplaylist_up.png"
]
}
};
var TREE_NODES2 = [
['About Playlists', 'aboutPlaylists.html', 'mainFrame', aboutPlaylistsGroup],
['Using Party Shuffle', 'usingPartyShuffle.html', 'mainFrame', partyShuffleGroup],
['Dance', 'playlists/dance.html', 'mainFrame',
['Dance (General)', 'playlists/danceGeneral.html', 'mainFrame',
['Dance (1980s)', null, null, playlistGroup],
['Dance (1990s)', null, null, playlistGroup],
['Dance (2000s)', null, null, playlistGroup]
],
['Clubbin\'', null, null, smartPlaylistGroup],
['Club', null, null, playlistGroup],
['Disco', null, null, playlistGroup],
['House', null, null, playlistGroup]
],
['Hip Hop', 'playlists/hiphop.html', 'mainFrame',
['Electro', 'playlists/electro.html', 'mainFrame',
['Electro (1979 - 1981)', null, null, playlistGroup],
['Electro (1982)', null, null, playlistGroup],
['Electro (1983)', null, null, playlistGroup],
['Electro (1984)', null, null, playlistGroup],
['Electro (1985)', null, null, playlistGroup],
['Electro (1986)', null, null, playlistGroup]
],
['Hip Hop (1980s)', null, null, smartPlaylistGroup],
['Hip Hop (1990s)', null, null, smartPlaylistGroup],
['Hip Hop (2000s)', null, null, smartPlaylistGroup],
['Old School Hip Hop', null, null, smartPlaylistGroup]
],
['Jazz', 'playlists/jazz.html', 'mainFrame',
['Jazz', null, null, playlistGroup]
],
['Pop', 'playlists/pop.html', 'mainFrame',
['Pop (1980s)', null, null, playlistGroup],
['Pop (1990s)', null, null, playlistGroup],
['Pop (2000s)', null, null, playlistGroup]
],
['R&B', 'playlists/rb.html', 'mainFrame',
['Funk', 'playlists/funk.html', 'mainFrame',
['Funk (1970s)', null, null, playlistGroup],
['Funk (1980s)', null, null, playlistGroup]
],
['R&B (General)', 'playlists/rbGeneral.html', 'mainFrame',
['R&B (1970s)', null, null, playlistGroup],
['R&B (1980s)', null, null, playlistGroup],
['R&B (1990s)', null, null, playlistGroup],
['R&B (2000s)', null, null, playlistGroup]
],
['Soul', null, null, playlistGroup]
],
['Rap', 'playlists/rap.html', 'mainFrame',
['Rap (1980s)', 'playlists/rap1980s.html', 'mainFrame',
['Rap (1979 - 1981)', null, null, playlistGroup],
['Rap (1982)', null, null, playlistGroup],
['Rap (1983)', null, null, playlistGroup],
['Rap (1984)', null, null, playlistGroup],
['Rap (1985)', null, null, playlistGroup],
['Rap (1986)', null, null, playlistGroup],
['Rap (1987)', null, null, playlistGroup],
['Rap (1988)', null, null, playlistGroup],
['Rap (1989)', null, null, playlistGroup]
],
['Rap (1990s)', 'playlists/rap1990s.html', 'mainFrame',
['Rap (1990)', null, null, playlistGroup],
['Rap (1991)', null, null, playlistGroup],
['Rap (1992)', null, null, playlistGroup],
['Rap (1993)', null, null, playlistGroup],
['Rap (1994)', null, null, playlistGroup],
['Rap (1995)', null, null, playlistGroup],
['Rap (1996)', null, null, playlistGroup],
['Rap (1997)', null, null, playlistGroup],
['Rap (1998)', null, null, playlistGroup],
['Rap (1999)', null, null, playlistGroup]
],
['Rap (2000s)', 'playlists/rap2000s.html', 'mainFrame',
['Rap (2000)', null, null, playlistGroup],
['Rap (2001)', null, null, playlistGroup],
['Rap (2002)', null, null, playlistGroup],
['Rap (2003)', null, null, playlistGroup],
['Rap (2004)', null, null, playlistGroup],
['Rap (2005)', null, null, playlistGroup],
['Rap (2006)', null, null, playlistGroup],
['Rap (2007)', null, null, playlistGroup]
],
['Rap By Era', 'playlists/rapByEra.html', 'mainFrame',
['G-Funk Era', null, null, smartPlaylistGroup],
['Golden Age', null, null, smartPlaylistGroup],
['New Jack Era', null, null, smartPlaylistGroup],
['Old School Era', null, null, smartPlaylistGroup],
['Souled-Out Era', null, null, smartPlaylistGroup]
]
],
['Reggae', 'playlists/reggae.html', 'mainFrame',
['Dancehall/Reggae', null, null, smartPlaylistGroup],
['Dancehall (1990s)', null, null, playlistGroup],
['Dancehall (2000s)', null, null, playlistGroup]
],
['Rock', 'playlists/rock.html', 'mainFrame',
['New Wave', null, null, playlistGroup],
['Rock (1970s)', null, null, playlistGroup],
['Rock (1980s)', null, null, playlistGroup],
['Rock (1990s)', null, null, playlistGroup],
],
['Slow Jams', 'playlists/slowjams.html', 'mainFrame',
['Slow Jams (1970s)', null, null, playlistGroup],
['Slow Jams (1980s)', null, null, playlistGroup],
['Slow Jams (1990s)', null, null, playlistGroup],
['Slow Jams (2000s)', null, null, playlistGroup]
],
['Urban Radio', 'playlists/urbanradio.html', 'mainFrame',
['Urban Radio (1970s)', null, null, smartPlaylistGroup],
['Urban Radio (1980s)', null, null, smartPlaylistGroup],
['Urban Radio (1990s)', null, null, smartPlaylistGroup],
['Urban Radio (2000s)', null, null, smartPlaylistGroup]
]
];
|
|
|
| Back to top |
|
|
AlexKunin
Developer
Joined: 03 Jan 2003
Posts: 1191
|
| Posted: Wed Jun 13, 2007 11:59 am Post subject: |
|
|
| Quote: | | As there is no character 171 in line 5 of the target file, index.html (see testMenu.html above), I assume that the error is in the 5th line of the treenodes.js file. The second error makes no sense as COOLjsBuilder did generate a file with the TREE_NODES variable. |
As I've said before, please, blame Microsoft for this. Or just use the right tool. BTW, in my opinion the builder is not the right tool.
| Quote: | | COOLjsBuilder did not place quotes around the key |
And it should not do this because all keys in tree config files consist of [a-zA-Z_], no interference with reserved words.
| Quote: | | For an experienced programmer it is actually easier to also use your code builder to get a sense of how to write code to work with your script. |
It seems there are at least two types of experienced programmers: those who learn by studing generated code, and those who learn by studing dedicated code samples with explanations, comments, tips.
| Quote: | | My navigation tree is now working after I spent the entire day coding and testing this past Saturday. |
Another great way to save time and efforts in complex cases is to ask somebody for help. E.g. me. Actually, it's my job.
| Quote: | | started out unnecessarily harsh |
It's really painful to read several KB of foreign language text just to find out that there is no actuall (or full) question. The best way is to ask "here is my site [url], and it does not work as expected in ie7 (or fx2, or whatever)" or "here is my project file, but generated code does not work as expected". I will examine the problem, explain it, resolve it.
| Quote: | | So now I need to figure out how to get COOLjsTreePRO to change the graphics for the spacer, button, folder and full length of the remainder of the node within the menu frame to have the correct background image (aqua button highlight) when a node is selected. But that will be a project for this coming weekend if I have the time. Any advice that you can offer to that end would be greatly appreciated. |
Please, send your request to javascript@cooldev.com (I will answer it). New version of the tree has much more flexible CSS-class assignment code, and it should fit your case good (if not perfectly). |
|
| Back to top |
|
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
