Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:09
Slight Problem Implementing Right Click Context Menu
Poster: darkcircuituk
Dated: Friday September 17 2004 - 11:43:45 BST
I have sucessfully implemented your right click context menu on all my pages except one.
On the left hand side of my pages I am using a CoolTree javascript tree menu and what I wish to be able to do is to implement the right click menu on this so that the whole of my site becomes standard. The tree menu we are currently using resides in a webpage that we have used as a frame in the page and this webpage calls an external javascript file which then draws the menu on the page. I followed the standard way of implementing the right click menu on the html page and the menu did appear when I right clicked on the menu page, brilliant. The real problem occured when I tried to expand some of the options on the cooltree menu.
If I tried to open an entry with only two levels it worked perfectly (first level is the level that the person sees when the menu is unexpanded, the second level is the level that the person sees when the first level expanded, and the other levels carry on like this), but when I tried to open a first level menu entry that contained three levels, rather than moving the other menu entries down and drawing the second level entries, it appears to just draw them straight over the top of the other first level entries.
I understand that you feel that this is nothing to do with the milonic right click menu, but the cooltree menu was functioning brilliantly until I tried to implement your menu on it. I am not saying that there is an error with the milonic menu, just an incompatibility with the cooltree menu that I am desperate to fix, any help you can offer would be welcome and I have also placed a forum question on the cooltree site just incase they might be able to help too.
I enclose the code for the tree webpages that are causing the problem. The first is the page that holds the menu:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menu Tree</title>
<link rel="stylesheet" type="text/css" href="../css/intranet.css">
<link rel="stylesheet" type="text/css" href="../css/menuprint.css" media="print">
<script language="JavaScript" src="../js/cooltreepro.js"></script>
<script language="JavaScript" src="tree1_nodes.js"></script>
<script language="JavaScript" src="tree1_format.js"></script>
<script language="JavaScript" src="../js/right_click_menu/milonic_src.js"></script>
<script language=JavaScript src=../js/right_click_menu/mmenudom.js></script>
<script language="JavaScript" src="../js/right_click_menu/menu_data.js"></script>
</head>
<body>
<table class="newpanel" cellpadding="0" cellspacing="0" width="100%" height="98%">
<tr><th height="20" class="newpanel">Tree Menu
</th></tr>
<tr><td class="newpanel" height="100%">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" style="font-size: x-small">
<tr width="100%" height="100%" valign="top"><td>
<script language="JavaScript">
var tree1 = new COOLjsTreePRO("tree1", TREE1_NODES, TREE1_FORMAT);
tree1.init();
</script>
</td></tr>
</table></td>
</tr>
</table>
<script language="JavaScript">
RedrawAllTrees()
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Menu Tree</title>
<link rel="stylesheet" type="text/css" href="../css/intranet.css">
<link rel="stylesheet" type="text/css" href="../css/menuprint.css" media="print">
<script language="JavaScript" src="../js/cooltreepro.js"></script>
<script language="JavaScript" src="tree1_nodes.js"></script>
<script language="JavaScript" src="tree1_format.js"></script>
<script language="JavaScript" src="../js/right_click_menu/milonic_src.js"></script>
<script language=JavaScript src=../js/right_click_menu/mmenudom.js></script>
<script language="JavaScript" src="../js/right_click_menu/menu_data.js"></script>
</head>
<body>
<table class="newpanel" cellpadding="0" cellspacing="0" width="100%" height="98%">
<tr><th height="20" class="newpanel">Tree Menu
</th></tr>
<tr><td class="newpanel" height="100%">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" style="font-size: x-small">
<tr width="100%" height="100%" valign="top"><td>
<script language="JavaScript">
var tree1 = new COOLjsTreePRO("tree1", TREE1_NODES, TREE1_FORMAT);
tree1.init();
</script>
</td></tr>
</table></td>
</tr>
</table>
<script language="JavaScript">
RedrawAllTrees()
</script>
</body>
</html>
and the second, which although is not causing the problem (I don't believe), you still need it to implement the third file because it sets the format used in the menu:
Code:
var TREE1_FORMAT =
[
//0. left position
5,
//1. top position
5,
//2. show +/- buttons
true,
//3. couple of button images (collapsed/expanded/blank)
["img/c.gif", "img/e.gif", "img/b.gif"],
//4. size of images (width, height,ident for nodes w/o children)
[16,16,16],
//5. show folder image
true,
//6. folder images (closed/opened/document)
["img/fc.gif", "img/fe.gif", "img/d.gif"],
//7. size of images (width, height)
[16,16],
//8. identation for each level [0/*first level*/, 16/*second*/, 32/*third*/,...]
[0,16,32,48,64,80,96,112,124],
//9. tree background color ("" - transparent)
"",
//10. default style for all nodes
"clsNode",
//11. styles for each level of menu (default style will be used for undefined levels)
//[],
["clsNodeL0","clsNodeL1","clsNodeL2","clsNodeL3","clsNodeL4"],
//12. true if only one branch can be opened at same time
false,
//13. item pagging and spacing
[0,0],
/************** PRO EXTENSIONS ********************/
//14. draw explorer like tree ( identation will be ignored )
true,
//15. Set of explorer images (folder, openfolder, page, minus, minusbottom, plus, plusbottom, line, join, joinbottom)
["img/folder.gif","img/folderopen.gif","img/page.gif","img/minus.gif","img/minusbottom.gif","img/plus.gif","img/plusbottom.gif","img/line.gif","img/join.gif","img/joinbottom.gif"],
//16. Explorer images width/height
[19,16],
//17. if true state will be saved in cookies
false,
//18. if true - relative position will be used. (tree will be opened in place where init() was called)
true,
//19. width and height of initial rectangle for relative positioning
[180,150],
//20. resize background //works only under IE4+, NS6+ for relatiive positioning
true,
//21. support bgcolor changing for selected node
true,
//22. background color for non-selected and selected node
["white","#EEEEEE"]
];
[
//0. left position
5,
//1. top position
5,
//2. show +/- buttons
true,
//3. couple of button images (collapsed/expanded/blank)
["img/c.gif", "img/e.gif", "img/b.gif"],
//4. size of images (width, height,ident for nodes w/o children)
[16,16,16],
//5. show folder image
true,
//6. folder images (closed/opened/document)
["img/fc.gif", "img/fe.gif", "img/d.gif"],
//7. size of images (width, height)
[16,16],
//8. identation for each level [0/*first level*/, 16/*second*/, 32/*third*/,...]
[0,16,32,48,64,80,96,112,124],
//9. tree background color ("" - transparent)
"",
//10. default style for all nodes
"clsNode",
//11. styles for each level of menu (default style will be used for undefined levels)
//[],
["clsNodeL0","clsNodeL1","clsNodeL2","clsNodeL3","clsNodeL4"],
//12. true if only one branch can be opened at same time
false,
//13. item pagging and spacing
[0,0],
/************** PRO EXTENSIONS ********************/
//14. draw explorer like tree ( identation will be ignored )
true,
//15. Set of explorer images (folder, openfolder, page, minus, minusbottom, plus, plusbottom, line, join, joinbottom)
["img/folder.gif","img/folderopen.gif","img/page.gif","img/minus.gif","img/minusbottom.gif","img/plus.gif","img/plusbottom.gif","img/line.gif","img/join.gif","img/joinbottom.gif"],
//16. Explorer images width/height
[19,16],
//17. if true state will be saved in cookies
false,
//18. if true - relative position will be used. (tree will be opened in place where init() was called)
true,
//19. width and height of initial rectangle for relative positioning
[180,150],
//20. resize background //works only under IE4+, NS6+ for relatiive positioning
true,
//21. support bgcolor changing for selected node
true,
//22. background color for non-selected and selected node
["white","#EEEEEE"]
];
The third and final file is the file that actually draws the menu and is actually massive, so what I will do is give u a short example of a menu option with two levels and a menu option with three levels so that you can at least see what error occurs:
Code:
var type_Overview = {"format":{"eimages":["img/house.gif", "img/house.gif", "img/house.gif", "img/minus.gif","img/minusbottom.gif","img/plus.gif","img/plusbottom.gif","img/line.gif","img/join.gif","img/joinbottom.gif"]}};
var type_Cycle = {"format":{"eimages":["img/it_wf.gif", "img/it_wf.gif", "img/it_wf.gif", "img/minus.gif","img/minusbottom.gif","img/plus.gif","img/plusbottom.gif","img/line.gif","img/join.gif","img/joinbottom.gif"]}};
var type_info = {"format":{"eimages":["img/tstfact.gif","img/tstfact.gif","img/tstfact.gif","img/minus.gif","img/minusbottom.gif","img/plus.gif","img/plusbottom.gif","img/line.gif","img/join.gif","img/joinbottom.gif"]}};
var type_new = {"format":{"eimages":["img/new.gif","img/new.gif","img/new.gif","img/minus.gif","img/minusbottom.gif","img/plus.gif","img/plusbottom.gif","img/line.gif","img/join.gif","img/joinbottom.gif"]}};
var TREE1_NODES = [
['Overview', '../main/home_page.htm', 'main', type_Overview,
['Introduction', '../main/intro.htm', 'main', type_info],
['Latest News', '../updates/fb_updates.htm', 'main', type_new],
],
['Phases and Iterations', '../cpi_overview.htm', 'main', type_Cycle,
['Inception', '../inception/cpi_inception.htm', 'main', type_Cycle,
['Iteration 1', '../inception/cpi_iteration1.htm', 'main', type_Cycle],
],
['Elaboration', '../elaboration/cpi_elaboration.htm', 'main', type_Cycle,
['Iteration 2', '../elaboration/cpi_iteration2.htm', 'main', type_Cycle],
['Iteration 3', '../elaboration/cpi_iteration3.htm', 'main', type_Cycle],
],
['Construction', '../construction/cpi_construc.htm', 'main', type_Cycle,
['Iteration 4', '../construction/cpi_iteration4.htm', 'main', type_Cycle],
['Iteration 5', '../construction/cpi_iteration5.htm', 'main', type_Cycle],
],
['Transition', '../transition/cpi_transition.htm', 'main', type_Cycle,
['Iteration 7', '../transition/cpi_iteration7.htm', 'main', type_Cycle],
['Iteration 8', '../transition/cpi_iteration8.htm', 'main', type_Cycle],
['Iteration 9', '../transition/cpi_iteration9.htm', 'main', type_Cycle],
],
],
var type_Cycle = {"format":{"eimages":["img/it_wf.gif", "img/it_wf.gif", "img/it_wf.gif", "img/minus.gif","img/minusbottom.gif","img/plus.gif","img/plusbottom.gif","img/line.gif","img/join.gif","img/joinbottom.gif"]}};
var type_info = {"format":{"eimages":["img/tstfact.gif","img/tstfact.gif","img/tstfact.gif","img/minus.gif","img/minusbottom.gif","img/plus.gif","img/plusbottom.gif","img/line.gif","img/join.gif","img/joinbottom.gif"]}};
var type_new = {"format":{"eimages":["img/new.gif","img/new.gif","img/new.gif","img/minus.gif","img/minusbottom.gif","img/plus.gif","img/plusbottom.gif","img/line.gif","img/join.gif","img/joinbottom.gif"]}};
var TREE1_NODES = [
['Overview', '../main/home_page.htm', 'main', type_Overview,
['Introduction', '../main/intro.htm', 'main', type_info],
['Latest News', '../updates/fb_updates.htm', 'main', type_new],
],
['Phases and Iterations', '../cpi_overview.htm', 'main', type_Cycle,
['Inception', '../inception/cpi_inception.htm', 'main', type_Cycle,
['Iteration 1', '../inception/cpi_iteration1.htm', 'main', type_Cycle],
],
['Elaboration', '../elaboration/cpi_elaboration.htm', 'main', type_Cycle,
['Iteration 2', '../elaboration/cpi_iteration2.htm', 'main', type_Cycle],
['Iteration 3', '../elaboration/cpi_iteration3.htm', 'main', type_Cycle],
],
['Construction', '../construction/cpi_construc.htm', 'main', type_Cycle,
['Iteration 4', '../construction/cpi_iteration4.htm', 'main', type_Cycle],
['Iteration 5', '../construction/cpi_iteration5.htm', 'main', type_Cycle],
],
['Transition', '../transition/cpi_transition.htm', 'main', type_Cycle,
['Iteration 7', '../transition/cpi_iteration7.htm', 'main', type_Cycle],
['Iteration 8', '../transition/cpi_iteration8.htm', 'main', type_Cycle],
['Iteration 9', '../transition/cpi_iteration9.htm', 'main', type_Cycle],
],
],
If you don't fully understand what I am asking just email me at david.willis __at__ lchclearnet.com and I will endevour to explain in more depth.
I cannot provide access to the actual website because its on the company intranet and therefore cannot be accessed by the outside world.
Thank you for any help you can offer and if you fix it I am forever indepted to you
Dave
Poster: kevin3442
Dated: Tuesday September 28 2004 - 0:28:51 BST
Hi Dave,
It's a little difficult to understand your setup even with the code you've provided (e.g., many files referenced that we don't have, not being familiar with CoolTree). Do you have this running at a url that we can get to? If so, it'd be best if you can post it.
Cheers,
Kevin
Arrggghhhh
Poster: darkcircuituk
Dated: Monday October 4 2004 - 10:22:10 BST
Thats my major problem, as its an intranet site I am unable to give access to it, but if you give me a direct email address I can send u the files that you need. If you can get this working guys, I will forever be in your debt as it has been perplexing me for weeks
Poster: darkcircuituk
Dated: Monday October 18 2004 - 10:47:19 BST
hi guys, its been nearly a month and I haven't heard back from you, is everything okay?
Poster: kevin3442
Dated: Monday October 18 2004 - 17:50:53 BST
Hi Dave,
darkcircuituk wrote:
hi guys, its been nearly a month and I haven't heard back from you, is everything okay?
A month? Man... you're like my wife... it'll be 10:30 and she'll say, "it's almost 11:00..."
I guess I sort of forgot about this one... sorry 'bout that. Probably because it's not directly related to Milonic Menus. If you want, you can email me the necessary files in a zip. I'll need all of the involved .js code, .css code, and .html for a page or pages that show the problem. Please arrange any paths in the code so that I can run it directly from my hard disk. You can email me by clicking the "email" button at the bottom of any of my posts. I can't guarantee a speedy resonse, because this will be a fairly busy week for me. But I'll do my best to have a look.
(Hope you don't mind the ribbing.
)
Cheers,
Kevin