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:28
NEWBIE Needs Help! - Autofill / dynamic 'separator' width?
Poster: ms8qt
Dated: Friday October 21 2005 - 14:19:18 BST
PLEASE READ MY FOLLOW-UP MESSAGE BELOW - NOT THIS ONE because I've found answers/solutions to all but one issue and the outstanding issue is much better explained/illustrated in my follow-up message!
Hello,
I'm currently evaluating this 'tool' and so far it looks very good. I have a couple of things I need to achieve before I decide to get a license - I've sorted out most things by reading other threads but still need some help with the following...
My current menu displays as...
I need it to display like...
In order to do this I need to 'fix' the following things...
1) Despite setting the item width and alignment parameters appropriately the 'Sign Out' item is taking up the entire horizontal space available. I need to be able to fix the size of this to 90 pixels, and aligned on the right (next to the Home icon). As a result the other icons will (I hope) also move to the right as illustrated in the second image.
2) I've created a menu entry called 'www' (will change to an icon once I create one!) which opens a form. I don't want the down arrow icon on this menu displayed - how can I disable this JUST for this menu (I ideally still want it for the 'I want to...' menu.
3) Can you tell me where I can find out details of all available parameter syntaxes for the tooltip bolt-on module? I want to be able to change the font style/name/colour.
To help me fix the above I've copied the relevant code below...
Code:
with(milonic=new menuname("Sample mainmenu")){
alwaysvisible=1;
left=1;
margin=2;
orientation="horizontal";
style=horizStyle;
menuwidth="100%";
top=1;
aI("showmenu=I want to...;text=I want to...;itemwidth=91;align=left;");
aI("image=addweblink.gif;onfunction=showtip('Add a weblink');url=javascript:openHome('http://www.my-mates.com/dev');itemwidth=25;imagealign=center;itemalign=right;");
aI("image=addfolder.gif;onfunction=showtip('Add a folder');url=javascript:openHome('http://www.my-mates.com/dev');itemwidth=25;imagealign=center;itemalign=right;");
aI("showmenu=freeTextURL;text=www;onfunction=showtip('Enter a free-text website address');itemwidth=20;itemalign=right;");
aI("text=Sign Out;title=Sign Out;url=./testtarget.htm;align=right;textsize=90;");
aI("image=Home.gif;onfunction=showtip('Visit the my-weblinks.com website!');url=javascript:openHome('http://www.my-mates.com/dev');itemwidth=25;imagealign=center;itemalign=right;");
}
alwaysvisible=1;
left=1;
margin=2;
orientation="horizontal";
style=horizStyle;
menuwidth="100%";
top=1;
aI("showmenu=I want to...;text=I want to...;itemwidth=91;align=left;");
aI("image=addweblink.gif;onfunction=showtip('Add a weblink');url=javascript:openHome('http://www.my-mates.com/dev');itemwidth=25;imagealign=center;itemalign=right;");
aI("image=addfolder.gif;onfunction=showtip('Add a folder');url=javascript:openHome('http://www.my-mates.com/dev');itemwidth=25;imagealign=center;itemalign=right;");
aI("showmenu=freeTextURL;text=www;onfunction=showtip('Enter a free-text website address');itemwidth=20;itemalign=right;");
aI("text=Sign Out;title=Sign Out;url=./testtarget.htm;align=right;textsize=90;");
aI("image=Home.gif;onfunction=showtip('Visit the my-weblinks.com website!');url=javascript:openHome('http://www.my-mates.com/dev');itemwidth=25;imagealign=center;itemalign=right;");
}
MANY thanks in advance for any help you can give me.
Mark.
I've solved some but NOT ALL questions - please help!
Poster: ms8qt
Dated: Friday October 21 2005 - 22:08:32 BST
Hi all,
I've solved questions 2 and 3 that I posted in my original message but I still have an outstanding question/issue which is detailed after the answers below...
Answer to Q2) If you use the 'subimage' with no value then no image gets displayed for that particular menu in the menubar, e.g.
Code:
aI("showmenu=freeTextURL;image=globe2.gif;subimage=;");
Answer to Q3) If you open the tooltips.js file you will see that the appearance of tooltips is relatively easy to modify
However, I still need help with one important design concept.
Maybe it's best if I explain my requirement differently to last time as I think it was a bit confusing...
I've created the following menu (a 'separator' is used and highlighted in grey)...
As you can see below the size and spacing of menu items is wrong when I make the browser window bigger...
My requirement - To have the size and spacing of menu items look the same (like that shown in the first menu picture) no matter how big or small the browser window. In order to do this I think I need to somehow make the 'separator' width dynamic so that it fills whatever the gap is between 'I want to...' and the icon menu items on the right. Is this possible? If not, is there another solution or workaround to achieve the look I want?
In this example the menu would then look like the following (edited in Photoshop!) Once this works I'll make the 'separator' background colour the same as the menubar background so that it appears invisible
FYI: I've used the following code...
Code:
with(milonic=new menuname("Sample mainmenuR")){
alwaysvisible=1;
top=1;
margin=2;
orientation="horizontal";
style=horizStyle;
position="absolute";
menuwidth="100%";
menualign="center";
screenposition="center";
align="center";
aI("showmenu=I want to...;text=I want to...;itemwidth=90;align=center;separatorwidth=110;");
aI("showmenu=freeTextURL;image=globe2.gif;subimage=;imagealign=center;");
aI("image=addweblink.gif;imagealign=center;");
aI("image=addfolder.gif;imagealign=center;");
aI("image=home.gif;imagealign=center;");
}
alwaysvisible=1;
top=1;
margin=2;
orientation="horizontal";
style=horizStyle;
position="absolute";
menuwidth="100%";
menualign="center";
screenposition="center";
align="center";
aI("showmenu=I want to...;text=I want to...;itemwidth=90;align=center;separatorwidth=110;");
aI("showmenu=freeTextURL;image=globe2.gif;subimage=;imagealign=center;");
aI("image=addweblink.gif;imagealign=center;");
aI("image=addfolder.gif;imagealign=center;");
aI("image=home.gif;imagealign=center;");
}
Many thanks in advance for any help you can give.
Mark.
Poster: Andy
Dated: Monday October 24 2005 - 11:56:26 BST
Hi,
Looks like a small bug we introduced into version 5.733.
I've now done an emergency release of 5.734 to help fix this problem.
Please let me know if this helps or not
Thanks - some things are fixed BUT NOT dynamic separators...
Poster: ms8qt
Dated: Monday October 24 2005 - 12:24:40 BST
Hello Andy,
Thanks for the response and the quick fix you've posted. This fix appears to fix the issue of the itemwidth property not working properly.
However, if you look at the screenshots in my previous message you'll see that I want/need to left-align a drop-down menu and right-align other menu items. I've tried using itemalign=left and itemalign=right but all items appear left-aligned. The other way of achieving the same effect would be to have a dynamic separator that takes up as much width as possible in between the 'I want to...' drop down menu and the other items on the right. I heard it was possible to do a dynamic separator (so that when the browser window is resized the width will automatically change and the left and right-aligned items will appear as such) but can't work out how.
Any info/advice/workarounds/suggestions would really really help.
Many thanks,
Mark.