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:17
single separator image in a menu
Poster: dbonneville
Dated: Wednesday July 28 2004 - 21:00:23 BST
Hi:
Is there a more elegant or scalable way to accomplish getting a single separator image in a dropdown or vertical menu? Right now, I have to custom design an image to fit the exact width (or height on verticals) of a menu. Is there some other way to programmatically do this, other than:
(sample)
Code:
...
aI("text=Set Up New Account;url=menu.htm;showmenu=incompleteAccounts");
aI("image=mySeparatorImage.gif");
aI("text=Account Statements;url=menu.htm;");
...
aI("text=Set Up New Account;url=menu.htm;showmenu=incompleteAccounts");
aI("image=mySeparatorImage.gif");
aI("text=Account Statements;url=menu.htm;");
...
Poster: Ruth
Dated: Wednesday July 28 2004 - 23:55:48 BST
You can use the separatorimage property: separatorimage=whatever.gif.
You might check the link for Quick Reference Guide under the DHTML Menu link on Milonic.com, or the links at the bottom of my posts for various properties, I believe they are also listed in one of the text files that come with the menu.
Ruth
Poster: dbonneville
Dated: Thursday July 29 2004 - 14:40:43 BST
That is for a global separator, though, right? I want to insert a single separator as needed in list like this, where "-------" is my separator:
Item A
Item B
Item C
---------
Item D
Item E
---------
Item F
How do you do that other than the way I mentioned?
Poster: Ruth
Dated: Thursday July 29 2004 - 17:19:00 BST
http://www.milonic.com/itemproperties.php It is also an item property and would be inserted as other item properties are inserted. i.e.
url=whateversite;image=whateverimage.gif[jpg etc]; and so on.
Ruth
Poster: dbonneville
Dated: Thursday July 29 2004 - 21:08:15 BST
Got it in there, but there seems to be a problem:
aI("separatorimage=images/divider_horizontal_double.gif;separatorheight=16;separatorwidth=2");
The "separatorwidth" parameter doesn't seem to work. The height works, but the width stays the same no matter what I do. Any ideas?
Doug
Poster: Ruth
Dated: Friday July 30 2004 - 4:07:23 BST
Is the menu vertical or horizontal about which you are asking? Is it possible to post a page, or give a screen shot of what you want the thing to look like. Or to post the menu_data.js code and the separator image so we can figure out what you're trying to do. Perhaps my brain is not functioning today or something, but it seems from your posts you are putting a blank item 16px high between two other text items. Normally you'd put the separator right after the item you want it to appear below i.e.
Code:
aI("text=Set Up New Account;url=menu.htm;showmenu=incompleteAccounts;separatorimage=whatever.gif, separatorheight=16;");
aI("text=Account Statements;url=menu.htm;");
aI("text=Account Statements;url=menu.htm;");
Ruth
Poster: dbonneville
Dated: Friday July 30 2004 - 15:31:40 BST
This is internal, so I can't post the page, but here is some more code:
Code:
with(milonic=new menuname("Main Menu Left")){
style=mainMenu;
screenposition="top; left"
top="offset=73";
left=2;
alwaysvisible=1;
orientation="horizontal";
aI("text=<u>H</u>ome;url=menu.htm");
aI("text=<u>S</u>earch;showmenu=search;");
aI("text=<u>A</u>ccounts;showmenu=accounts;");
aI("text=<u>P</u>olicies;showmenu=policies;");
aI("text=Pay<u>m</u>ents;showmenu=payments;");
aI("text=<u>R</u>eports;showmenu=reports;");
aI("separatorimage=images/divider_vertical_double.gif;separatorwidth=10;separatorheight=16;separatorpadding=2;");
aI("text=<u>T</u>asks;showmenu=tasks;");
}
style=mainMenu;
screenposition="top; left"
top="offset=73";
left=2;
alwaysvisible=1;
orientation="horizontal";
aI("text=<u>H</u>ome;url=menu.htm");
aI("text=<u>S</u>earch;showmenu=search;");
aI("text=<u>A</u>ccounts;showmenu=accounts;");
aI("text=<u>P</u>olicies;showmenu=policies;");
aI("text=Pay<u>m</u>ents;showmenu=payments;");
aI("text=<u>R</u>eports;showmenu=reports;");
aI("separatorimage=images/divider_vertical_double.gif;separatorwidth=10;separatorheight=16;separatorpadding=2;");
aI("text=<u>T</u>asks;showmenu=tasks;");
}
OK. This gives me very closely what I want. I'm missing some control over the spacing to the right of the separator image.
In this example, the gif I'm calling is 6px wide. The paramerter separatorwidth has no effect on it. 10 or 2, it's always 6px wide. However, I can "stretch" it to 100px high if I want. Therefore, from this example, the following is true:
- separatorwidth does not work
- separatorheight does work
I get perfect spacing when I do this:
...
Code:
aI("text=<u>R</u>eports;showmenu=reports;");
aI("image=images/divider_vertical_double.gif;");
aI("text=<u>T</u>asks;showmenu=tasks;");
aI("image=images/divider_vertical_double.gif;");
aI("text=<u>T</u>asks;showmenu=tasks;");
...
But the problem is that it now acts like a rollover. Another question would be; can you turn off rolloever functionality on an image item? Since the item is transparent (has some areas of transparency) you can see the rollover color happening behind it....
Doug[/code]
Poster: Ruth
Dated: Friday July 30 2004 - 16:09:51 BST
Code:
aI("text=<u>R</u>eports;showmenu=reports;");
aI("image=divider_vertical_double.gif;itemwidth=10;itemheight=16;padding=2;type=header;");
aI("text=<u>T</u>asks;showmenu=tasks;");
}
that's assuming all you are trying to do is put a spacer item between those two.
aI("image=divider_vertical_double.gif;itemwidth=10;itemheight=16;padding=2;type=header;");
aI("text=<u>T</u>asks;showmenu=tasks;");
}
Ruth
Poster: dbonneville
Dated: Friday July 30 2004 - 16:13:34 BST
Yes, yes...so the trick is calling it header to stop rollovers? That would solve it....
Doug
