FAO: Ruth, Michael, or any experienced folk!

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:06

FAO: Ruth, Michael, or any experienced folk! - itemwidth % ?

Poster: ms8qt
Dated: Wednesday May 3 2006 - 11:56:56 BST

Hello all,

I'm so near (but yet so far) to completing the type of menu I need with Milonic v. 5.746. Basically I'm using a horizontal menu that spans 100% of the browser width - this works. However, I have 5 menu items and I want to set % widths for these which doesn't seem to work at all. In short, I want the first menu item (aI tag) to span 40% and the other 4 menu items to span 15%...totalling 100%.

My current code is copied below but first please have a look at the 2 screenshots at the links below...

http://www.my-weblinks.com/Incorrect.jpg ("I want to..." wraps onto 2 lines - incorrect!)

http://www.my-weblinks.com/Correct.jpg ("I want to..." takes up only 1 line after making browser wider - correct! However, I want the browser window narrow as in the above Incorrect.jpg)

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=0;

with(horizStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="arial, tahoma";
fontsize="14";
fontstyle="normal";
headerbgcolor="#AFD1B5";
headerborder=1;
headercolor="#000099";
offbgcolor="#CFE2D1";
offcolor="#000000";
onbgcolor="#FEFAD2";
onborder="1px solid #999999";
oncolor="#000000";
onsubimage="./Images/downboxed.gif";
overbgimage="backon_beige.gif";
padding=3;
pagebgcolor="#CFE2D1";
pagecolor="#000066";
pageimage="db_red.gif";
separatoralign="right";
separatorcolor="#999999";
separatorwidth="85%";
subimage="./Images/downboxed.gif";
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
followscroll="0";
menuwidth="100%";
orientation="horizontal";
style=horizStyle;
top=1;
margin=2;
aI("itemwidth=40%;showmenu=I want to...;text=I want to...;subimageposition=left;");
aI("itemwidth=15%;image=./Images/addweblink.gif;imagealign=center;onfunction=showtip('Add a weblink');");
aI("itemwidth=15%;image=./Images/addfolder.gif;imagealign=center;onfunction=showtip('Add a folder');");
aI("itemwidth=15%;image=./Images/fixsizepos.gif;url=javascript:fixSizePos();imagealign=center;onfunction=showtip('Fix window size and position');");
aI("itemwidth=15%;image=./Images/exit.gif;imagealign=center;onfunction=showtip('Exit');");
}

Many thanks in advance!
Mark.

Poster: vikenk
Dated: Wednesday May 3 2006 - 14:14:42 BST

MArk,

I theory, your setup should work. May I ask why you need to set custom widths for all the menu items? Not setting a width for the menu items would make the menu items stretch to the width they need to be to accomodate your text.

Basically, if you just set menuwidth and not itemwidth, the menu will make the first item long enough to accomodate "I want to..." on one line.

Try taking all item widths out and see what happens.

Poster: vikenk
Dated: Wednesday May 3 2006 - 14:16:11 BST

Also, seeing an example URL and some HTML would also be better. Screen shots are nice, but they only paint a partial picture.

Progress? but it's not quite right yet....!

Poster: ms8qt
Dated: Wednesday May 3 2006 - 14:46:01 BST

Hello,

Thanks for your reply. I've removed the itemwidth property from each menu item and now just use menuwidth="100%". The "I want to..." menu item now displays on a single line which is what I want. However, the other menu items are bunched up right next to it - I actually ideally want them spaced out depending on screen width which is why I wanted to set 40% for the first menu item ("I want to...") and 15% for the other 4 menu items.

You can view/use the menu at http://www.my-weblinks.com/mw/ (just click on the "Access my-weblinks!" link and a pop-up window should appear with my menu).

If there's anything else you need, just ask :-)

Many thanks!
Mark.

Poster: vikenk
Dated: Wednesday May 3 2006 - 18:10:43 BST

Mark,

I'm out of ideas. I downloaded what I could to simulate the site, including all the code. I removed all coding except the menu's js files. No style sheet, no other scripts. Just Doctype statement and body tags.

The menu seems to have a hard time doing math. I got it to behave a little but by changing the first item width to 53%, which is kind of strange. Anything below 50% and the menu collapses.

What's even wierder is that in firefox the menu gets *smaller* as I *increase* the size of the first item width. Here's all my code and the example.

http://www.vikenk.com/mark

View the page in IE, then in Firefox. Totally wierd. You can do a view source to see what I've done. You can also download the files and play with them yourself.

I'm almost ready to declare this a menu bug. Migru, John, Ruth, Andy - any ideas?

Working(ish) but in version 5.733 so must be a BUG in 5.746!

Poster: ms8qt
Dated: Wednesday May 3 2006 - 19:30:55 BST

Hello,

I've done lots of testing with previous versions of the menu. It appears that version 5.733 will span menu items quite nicely across a 100% width menu. However, it works without having to specify any itemwidth settings - very strange! You can see it at...

http://www.my-weblinks.com/mw/ (click on the second link from the top)

The ONLY difference is that version 5.733 'js' files are referenced. An extract of the menu code used for both links (5.746 and 5.733) is copied below for you info...

In conclusion, I have a solution of sorts but it means that I am stuck using version 5.733 (newer versions simply don't come close to doing this). The ideal scenario would be if I could continue to use the latest versions of the menu AND for a specification of 5 itemwidths (60%, 15%, 15%, 15%, 15%) in a 100% width horizontal menu to render properly :-)

It would be great to get this fixed and working in the next version. I'll assist in any way I can so that this can be achieved as quickly as poassible ;-)

Thanks for your continued help with this!
Mark.

Code:

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
followscroll="0";
menuwidth="100%";
orientation="horizontal";
style=horizStyle;
top=1;
margin=2;
aI("showmenu=I want to...;text=I want to...;subimageposition=left;");
aI("image=./Images/addweblink.gif;imagealign=center;onfunction=showtip('Add a weblink');");
aI("image=./Images/addfolder.gif;imagealign=center;onfunction=showtip('Add a folder');");
aI("image=./Images/fixsizepos.gif;url=javascript:fixSizePos();imagealign=center;onfunction=showtip('Fix window size and position');");
aI("image=./Images/exit.gif;imagealign=center;onfunction=showtip('Exit');");
}

Poster: Migru
Dated: Thursday May 4 2006 - 0:16:19 BST

Hi

this is interesting

Quote:

AND for a specification of 5 itemwidths (60%, 15%, 15%, 15%, 15%)

If I add 60+4times15 equals 120%.

though I´m really not an expert in percentages, related to itemwidths.
I would like to get explained the 1% setting of the itemwidth in menu sample 26
http://www.milonic.com/menusample26.php

in order to get 6 items equally distributed across the 100% width span menu.

Michael

Poster: vikenk
Dated: Thursday May 4 2006 - 0:58:52 BST

Hi Michael,

Originally, Mark had set item widths of 40, 15, 15, 15, 15 which equals 100%, but in his experience and my experience, that didn't work well. At first I though the other Javascript he was using was tricking the menu into thinking the window was small (it would open the new window to a small size), so I removed the JavaScipt. It didn't solve the problem.

Then, I thought it may have to do with his style sheet. So I removed that. Then, I removed all code and styles until I ended up with what you see at http://www.vikenk.com/mark

My entire test page consists of the menu files and a body tag. That's all. So, there seems to be something buggy about this version of the menu, but we can't be sure until Andy take a look.

Can you figure it out? In theory, setting menuwidth to 100% and item width to 40% / 15% / 15% / 15% / 15% should work.

Poster: Migru
Dated: Thursday May 4 2006 - 1:13:36 BST

Hi Viken

can you show me one sample menu, where the itemwidths are set to percentages ? (please, not sample26)
Question: percentage of what?If set to a percentage, is the itemwidth automatically a child property of the available screen width or of the menu width ?
Even the itemproperty page seems to indicate, that the settings of the itemwidth should be in pixels only. But - as I said already - the 1% setting of sample 26, I don´t understand.

Michael

Poster: vikenk
Dated: Thursday May 4 2006 - 1:43:32 BST

Hmmm....

I see your point. Since the "item" is a child of the menu, I would assume that the itemwidth percentage would be a percentage of the Menuwidth and not the available window size. So, if you had (for example only) a menu width of 500px and an item width of 30%, I would expect the itemwidth to be 30% of the 500px.

I wonder what would happen if the Menuwidth was removed and only item widths were used? Well, I just tried it and it makes no difference.

I don't know of any menu examples with itemwidth percentages being used. But seeing that the menu responds to CSS commands, I would think that "percent" would be a valid use of the menu sizing.

Also, a point of interest is that Mark says that this works with his previous version of the menu, but not the current version. When I have more time, I'll need to see if I have an older version that I can try to use.

Poster: Migru
Dated: Thursday May 4 2006 - 6:49:32 BST

Hi Viken,

I don´t like to "guess" and therefore - the question if and when the definition of itemwidth settings in percentages is valid should be documented by the relevant itemproperty - page.

Michael

Industrial Strength JavaScript and DHTML Menus

FAO: Ruth, Michael, or any experienced folk! - itemwidth % ?

Progress? but it's not quite right yet....!

Working(ish) but in version 5.733 so must be a BUG in 5.746!