Recent Questions Javascript Tree Ajax Rich
Q: Is there a way we can add javascript behaviors to the sliding dhtml menu actions?
For example, is there a way we can add an onClick function to a menu item
(eg,onClick="return MyFunction( )" ) so that we can catch and process key events?
A: Unfortunately, you can't assign onmouseover/onClick/onContextMenu event to each item.
However, you can achieve this by using standard html objects within items, for example:
var menuitems = [
["item text
", ""]
];
You can use your own Javascript code instead standard links. For example:
var menuItems = [
["text", "javascript:your_code_here"]
];
Try that.Q: I'm having multiple problems with this now, I'm using this sight in the horizontal cross-frame style. And using the CSS-type layout.
Problems:
1. This appears to be working fine in Firefox but I can't see the Menu or frames in Internet Explorer.
2. I have changed the colors in the data.js and the css-mode.css files and still can't change the subMenu background colors. ( I have put everything back like it was, but for example if I want to change the submenu or drop down menu background color to grey and the mouseover color to red where do I change that at)? Do I edit the .css file or the data.js file
3. I can't get the links to open in the bottom frame ( I know you will see that it's set to _blank now, but I tried setting the var itemTarget="_bottommenu"; and the code in the menu section at the bottom of the data.js to the same but it still doesn't seem to work. Can you help me out here?
I have attached the sight so that you can see what I'm dealing with.
Once again, thanks for your help and any advice.
A: 1) Your menu works fine in all browsers.
2) Your should add the following line into the bottommenu.htm file.
<link href="data-samples/css-mode.css" type=text/css rel=stylesheet>
You should set the item color for the submenus in your css file initemNormal and itemOver styles.
3) You should use the following parameter to set a frame name:
var itemTarget="";
["Home","testlink.htm", "css/icon1.gif", "css/icon12.gif", "Home", "frm2", "0", "0", , ],
["Products","", "css/icon2.gif", "css/icon22.gif", "Products", , "0", , , ],
["|Hard Drives","testlink.htm"],
["|Servers",""],
["||Linux Compatible","testlink.htm", , , , "frm2",],
["||Windows Compatible","testlink.htm", , , , "frm2",],
...
Q: I have small problems with your javascript menu system.
#1. I am creating a multi-level menu, am I limited to a gird format or can every item have a variable column width?
#2. With submenus, I want to have the submenu be the same width as the parent cell, is there a simple command for this, or do I have to guess the column widths until it fits correctly?
#3. In those same submenus, I have items that are longer than the parent, is there a word wrap or a way to define a break, rather than having the scroll feature?
A: 1) You should use Individual Item Styles.
For example:
var itemStyles = [
["itemWidth=120","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#ACF88B,#ACF88B","itemBorderColor=#329309,#329309"], //style0
["itemWidth=100","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#FFFFFF,#FFFFFF","itemBorderColor=#1B92E9,#1B92E9"], //style1
["itemWidth=130","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#FF9684,#FF9684","itemBorderColor=#EC7575,#EC7575"], //style2
["itemWidth=150","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#84F9FF,#84F9FF","itemBorderColor=#00B8C1,#00B8C1"], //style3
];
var menuStyles = [
["smColumns=2"], //style0
];
["Home","testlink.htm"],
["Samples","testlink.htm"],
["|Group 1","", , , , , "0", , , ],
["|Group 2","", , , , , "1", , , ],
["|Group 3","", , , , , "2", , , ],
...
[" More Samples","testlink.htm"],
["|Group 1","", , , , , "3", "0", , ],
["|Group 2","", , , , , "1", , , ],
Where "0", "1", "2", "3" - style number in itemStyles.
2) You can also use Individual Item Styles.
var itemStyles = [
["itemWidth=120px"],
];
var menuStyles = [
["smWidth=120px"],
];
["Product Info","", "default.files/icon1.gif", "default.files/icon1o.gif", , , "0", , , ], // itemStyles
["|Features","testlink.html", "default.files/icon2.gif", "default.files/icon2o.gif", , , , "0", , ],
["|Installation","", "default.files/icon2.gif", "default.files/icon2o.gif", , , , , , ], // menuStyles
3) Try to set this parameter:
var noWrap=0;
Q: How I make sure, that long menu items in dhtml menu sample can wrap into two lines?
A: You should set the following parameter:
var noWrap=0;
Or use standard <br> tags inside item's text:
["International Music X Home<br>Decoration X Books","", "", "", "", "", "0", "0", "", "", "", ],
