Recent Questions
Q: I have a horizontal menu. The top-level has icons and text. I want the text to appear under the icon image, centered. Is there a way to do that?
A: You can try to write so: ["<img src='images/micon1.gif' width=32 height=32><br> Home","testlink.html", , ,"" , , , , , ],
Q: When using the Deluxe-Tabs, the second tab seems to be the first selected tab when displaying tabs in a page. Is there a way to set the default tab showing on a page load?
A: You should use the following parameter:
var bselectedItem = 3;
Where 3 is the number of your menu item from the var bmenuItemsparameter.
var bmenuItems =
[
["Mac Tab 1", "content1"],
["Mac Tab 2", "content2"],
["Mac Tab 3", "content3"],
["Mac Tab 4", "content4"], // selected tab
];
The ID of the item starts with 0.
Try that.
Q: The problem that I am still experiencing (Im sure I have missed something obvious!) - is that all the pages open when you click on the relevant links but they always open with the "About Us" tab showing and then as soon as you click on a different tab you see it highlight for a second and then it just reverts back to the About Us tab even though the page has changed. As the site opens I obviously want the first tab to be highlighted as opposed to the 2nd one and the each page highlights and holds as you go through the menu.
A: See, you set
var bselectedItem=2;
That is why "About us" tab is selected.
You should change the selected tab depending on the page you are now.
This Tabs menu can save pressed item automatically within1 page only. If you open another page, the menu can't remember presseditem. You should do that manually using Javascript and menu parameters( var bselectedItem) or using any server-side script (php, asp, etc.)
Deluxe Tabs doesn't support API functions which can return theselected tab.
If your site is written on PHP you can set "bselectedItem" parameter based on your link beforeyou call tabs-kasper.js file.
For example, move "bselectedItem" parameter from tabs-kasper.js file to yourcode.
<TD vAlign=top align=left>
/* Select Tab */
<script type="text/javascript" language="JavaScript1.2">
var bselectedItem=<?php echo $seltabs; ?>;
</script>
<SCRIPT src="tabs-kasper.js" type=text/javascript></SCRIPT>
</TD>
You should define seltabs using server side script.
You can also set on every page before you call tabs-kasper.js file(for example, for solution tab).
<TD vAlign=top align=left>
/* Select Tab */
<script type="text/javascript" language="JavaScript1.2">
var bselectedItem=4;
</script>
<SCRIPT src="tabs-kasper.js" type=text/javascript></SCRIPT>
</TD>
Try that.
Q: I'm trying out your menus, and I seem to have a problem with changing the title of a menu item. If the text is something like "Create a New Event" the entire menu spreads out and the rollover image starts replicating itself behind it, instead fo stretching with the text. So I see 1 /2 rollover images for that top level item, instead of just the one, width it's width spread out to accomodate the extra text.
I've tried the Styles bit, but that doesn't seem to fix the rollover image any...
Any pointers ?
A: You can try to set the exact width for each menu item using IndividualItem Styles.
You should use Individual Item Styles.
For example:
var itemStyles = [
["itemWidth=120","itemBorderWidth=1","itemBorderStyle=solid,solid"], //style0
["itemWidth=100","itemBorderWidth=1","itemBorderStyle=solid,solid"], //style1
["itemWidth=130","itemBorderWidth=1","itemBorderStyle=solid,solid"], //style2
["itemWidth=150","itemBorderWidth=1","itemBorderStyle=solid,solid"], //style3
];
["Home","testlink.htm"],
["Samples","testlink.htm"],
["|Group 1","", , , , , "0", , , ],
["|Group 2","", , , , , "1", , , ],
["|Group 3","", , , , , "2", , , ],
...
[" More Samples","testlink.htm"],
["|Group 1","", , , , , "3", , , ],
["|Group 2","", , , , , "1", , , ],
Where "0", "1", "2", "3" - style number in itemStyles.
You also should check the width of your rollover image. It should bethe same width as your items.
You can also use
tags in the item text, for example:
var menuItems = [
["line 1
line 2"],
];
Or you can set this parameter:
var noWrap=0;
Try that.