Item width and height problems

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

Item width and height problems

Poster: dux
Dated: Tuesday November 11 2003 - 11:22:16 GMT

Hi all,

I'm working on a site with two Milonic menus on each page (a 'top' horizontal menu, and a 'left' vertical menu).

Although the menus are both working as such, I'm having different problems with both. Firstly, with the top menu I would like each item to have the same width (122 pixels), regardless of the text length or if the item has a sub-menu. I've set the 'itemwidth' property to 122, but only those items with a sub-menu image appear at the right width (the others are too long). I should probably say that I've got a left padding of 10. If I get rid of this padding, then the problem is reversed (the items with sub menus appear too short). Therefore, it seems as if the itemwidth is not inclusive of the padding on items with a sub-menu image, but the opposite for those without.

Strangely, however, in Mozilla Firebird the padding setting doesn't seem to work at all, but all the items are the desired width. Should this be the case (i.e., that padding works in different ways depending on whether an item as a sub-menu?).

As for problem two, with the left hand menu: I've set the height for each item to be quite small (12 pixels). This works fine... but not for any sub menu items, which always appear much bigger. I've set the padding, border widths, etc, to zero, but no luck.

Below is the settings from the menuarray files (I've got 2: menuarray_top and _left). If any of you could guide me on these matters I'd be very grateful!

From the top menu:

Code:

_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150            // The time delay before menus open on mouse over
_followSpeed=5                // Follow scrolling speed
_followRate=40                // Follow scrolling Rate
_subOffsetTop=0               // Sub menu top offset
_subOffsetLeft=-3             // Sub menu left offset
_scrollAmount=3               // Only needed for Netscape 4.x
_scrollDelay=20               // Only needed for Netcsape 4.x



with(mainStyle=new mm_style()){
     onbgcolor = "#666699";
       oncolor = "#FF9900";
    offbgcolor = "#666699";
      offcolor = "#FFFFFF";
   bordercolor = "#000066";
   borderstyle = "solid";
   borderwidth = 1;
separatorcolor = "#000066";
 separatorsize = 2;
       padding = "4px 1px 4px 10px"; // top,right,bottom,left
      fontsize = "7pt";
     fontstyle = "normal";
    fontweight = "normal";
    fontfamily = "Tahoma, Arial, Helvetica";
   high3dcolor = null; // Not sure if this will be included in final release
    low3dcolor = null; // Not sure if this will be included in final release
     pagecolor = "";
   pagebgcolor = "";
   topbarimage = "";
      subimage = "/images/chev_bottom.gif";
   onsubimage = "/images/chev_bottom.gif";
subimageposition = "right;middle";
         align = "left";
}

with(subStyle=new mm_style()){
     onbgcolor = "#CCCCCC";
       oncolor = "#666699";
    offbgcolor = "#666699";
      offcolor = "#FFFFFF";
   bordercolor = "#000066";
   borderstyle = "solid";
   borderwidth = 1;
separatorcolor = "#000066";
 separatorsize = 1;
       padding = "4px 4px 4px 10px"; // top,right,bottom,left
      fontsize = "7pt";
     fontstyle = "normal";
    fontweight = "normal";
    fontfamily = "Tahoma, Arial, Helvetica";
     pagecolor = "";
   pagebgcolor = "";
   topbarimage = "";
topbarimageloc = "left;middle";
      subimage = "/images/chev.gif";
   onsubimage = "/images/chev_grey.gif";
         align = "left";
  //ondecoration = "underline";
  //onbold = true;
  //onitalic = true;
}


with(milonic=new menuname("mainmenu2")){_c=1
//screenposition="top;left"
style = mainStyle;
alwaysvisible = 1;
orientation="horizontal";
//itemheight=18;
//left="offset=130";
//top="offset=45";
left=130;
top=45;

menu items would follow...

From the left menu:

Code:

_scrollAmount=3;     // Used for Netscape 4 scrolling
_scrollDelay=20;        // Used for Netscape 4 scrolling

_menuCloseDelay=500;  // The delay for menus to remain visible on mouse off
_menuOpenDelay=150;   // The delay for opening menus on mouse over
_subOffsetTop=0;     // Sub menu offset Top position
_subOffsetLeft=0;    // Sub menu offset Left position



with(mainStyle=new mm_style()){
     onbgcolor = "#666699";
       oncolor = "#FF9900";
    offbgcolor = "#666699";
      offcolor = "#FFFFFF";
   bordercolor = "#000066";
   borderstyle = "solid";
   borderwidth = 0;
separatorcolor = "#000066";
 separatorsize = 2;
       padding = "2px 0px 3px 6px"; // top,right,bottom,left
      fontsize = "7pt";
     fontstyle = "normal";
    fontweight = "normal";
    fontfamily = "Tahoma, Arial, Helvetica";
   high3dcolor = null; // Not sure if this will be included in final release
    low3dcolor = null; // Not sure if this will be included in final release
     pagecolor = "";
   pagebgcolor = "";
   topbarimage = "";
      subimage = "/images/chev.gif";
   onsubimage = "/images/chev.gif";
subimageposition = "right;middle";
         align = "left";
}

with(subStyle=new mm_style()){
     onbgcolor = "#CCCCCC";
       oncolor = "#666699";
    offbgcolor = "#666699";
      offcolor = "#FFFFFF";
   bordercolor = "#000066";
   borderstyle = "solid";
   borderwidth = 1;
separatorcolor = "#000066";
 separatorsize = 1;
       padding = "0px 6px 0px 6px"; // top,right,bottom,left
      fontsize = "7pt";
     fontstyle = "normal";
    fontweight = "normal";
    fontfamily = "Tahoma, Arial, Helvetica";
     pagecolor = "";
   pagebgcolor = "";
   topbarimage = "";
topbarimageloc = "left;middle";
      subimage = "/images/chev.gif";
   onsubimage = "/images/chev_grey.gif";
         align = "left";
}


with(milonic=new menuname("mainmenu2")){_c=1
borderwidth = 0;
screenposition="top;left"
style = mainStyle;
alwaysvisible = 1;
orientation="vertical";
itemheight=12;
left="offset=2";
top="offset=103";

menu items would follow...

Thanks again for any help

- Dux -

Poster: dux
Dated: Tuesday November 11 2003 - 17:03:58 GMT

Ok, I've solved the first problem by moving the 'itemwidth' property from within the aI tag, to where the main menu is created.

However, I've still got the problem with adjusting the height on the sub-menu items on the vertical menu. Any ideas?

Also, I'm having problems getting the sub-menu offsest working... where are _subOffsetTop and subOffsetLeft supposed to go?

Thanks again,

- Dux -

Poster: John
Dated: Tuesday November 11 2003 - 17:14:15 GMT

dux wrote:

Also, I'm having problems getting the sub-menu offsest working... where are _subOffsetTop and subOffsetLeft supposed to go?

They stay at the top of the code, right where they are in the download.

Poster: dux
Dated: Tuesday November 11 2003 - 17:29:38 GMT

Well, that's what I thought... but I've just got them working by NOT having them there. They only seem to have any effect when I put them in:

Code:

with(milonic=new menuname("mainmenu2")){_c=1
style = mainStyle;
screenposition="top;left"
alwaysvisible = 1;
orientation="vertical";
itemwidth=111;
itemheight=12;
left="offset=2";
top="offset=103";
_subOffsetLeft=-3;
_subOffsetTop=0;
.
.
.

Still no luck with the itemheight though

- Dux -

Poster: kevin3442
Dated: Tuesday November 11 2003 - 22:12:11 GMT

Dux,

I can't seem to reproduce the behavior you describe for the itemwidth and itemheight properties. They seem to work no matter what I do; subimage or not, per item or not, IE6 and NS7 (haven't tried others yet). I've used as much of your code as I can: your styles along with the menu definitions from the downloadable horizontal menu sample. I was able to confirm the padding problem using NS7/Win2k. The definition for the padding style property specifies that padding is measured in pixels, so try dropping the px from your padding values (I sometimes find that I also have to do this with some css settings for NS to accept it... although there's probably a better way... I'm certainly no css expert!).

In general, you might try updating some of your code to see if that has eny effect. For example, the _c=1 is no longer part of the menu definition (that's a left over from older RCs). And I have found that any property that is currently set to propertyName=""; or propertyName=null; should be deleted or, if you want to retain it for experimentation, commented out. See if that gets you anywhere on the itemheight.

Hope that helps,

Kevin

Poster: John
Dated: Tuesday November 11 2003 - 22:43:06 GMT

[quote="dux"]

Code:

with(milonic=new menuname("mainmenu2")){_c=1
style = mainStyle;
screenposition="top;left"
alwaysvisible = 1;
orientation="vertical";
itemwidth=111;
itemheight=12;
left="offset=2";
top="offset=103";
_subOffsetLeft=-3;
_subOffsetTop=0;
.
.
.

Wrong place. At the top of the code...

Code:

_menuCloseDelay=500
_menuOpenDelay=150
_followSpeed=5
_followRate=40
_subOffsetTop=10  <===
_subOffsetLeft=-10  <===
_scrollAmount=3
_scrollDelay=20

with(menuStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#DCE9F0";
etc.

Poster: kevin3442
Dated: Tuesday November 11 2003 - 23:00:21 GMT

jgillett wrote:

...Wrong place. At the top of the code...

Yeah.... forgot about that issue John's right (of course!). Just thought I'd mention that I also am able to get your offsets to work, in the correct location, using the code you provided. Don't know what the overall problem might be... If you had a test url we could get to, to see the whole page in action...

Kevin

Poster: Maz
Dated: Wednesday November 12 2003 - 0:35:09 GMT

One thought is that if the height is less than required by the menu settings its going to get bigger than the amount given.

The only problem I have is that on the old mac ie5.1.7 if I don't specify height in menu item then the background color repeats down the page.

Hmmm, just been playing with it, it appears that I have to put itemwidth before itemheight. But followscroll menu doesn't play nice with itemheight it still goes down the page on first load. I'm going to play some more with it.

Also the Milonic site color runs down the page in my browser, I know sometimes I've said it didn't off and on but its doing it again.

That's all I have to add,
maz

Poster: Maz
Dated: Wednesday November 12 2003 - 1:10:04 GMT

After playing around with itemwidth and itemheight I must say that so far it appears to be working beutifully now.

What I did was take out itemwidth=33; per se, and itemheight=33; from menuitem and placed it above as itemwidth="33px"; same for height.
So then I thought, well Andy was saying put objects "" in Style. So I put those up into Style instead, and it works fine there too. So far no background problems.

Regards
maz

Poster: John
Dated: Wednesday November 12 2003 - 4:40:04 GMT

Good grief, Maz - you're finally starting to beat back all the bugs Andy has been throwing at you :?:

Poster: Andy
Dated: Wednesday November 12 2003 - 11:10:41 GMT

See, you should trust me

Cheers
Andy

Poster: dux
Dated: Wednesday November 12 2003 - 12:18:22 GMT

Ok, thanks everyone... particularly kevin3442

All my strange behaviour has now stopped. The reason? The 'c_' naming convention. I don't know why, but as soon as I changed the way the menu names were generated (the menus are created on-the-fly, you see), everything just magically worked.

Things like '_subOffsetLeft' are now back at the top where they belong, and working fine!

Thanks again,

- Dux -

Poster: kevin3442
Dated: Wednesday November 12 2003 - 19:23:02 GMT

You're welcome!

Poster: John
Dated: Wednesday November 12 2003 - 19:37:53 GMT

Glad you got it working!

Poster: Maz
Dated: Wednesday November 12 2003 - 21:26:02 GMT

I trust you Andy

Great people in Birmingham, went there once in an old band van, those were the days... ooh hate that song though.

Trying to second guess Andy is another thing though, he doesn't give much away.

I used to test every position for styles to see if it would work, maybe I'm getting lazy, or scared of messing up the menu and losing my saved copy.

Its grand how smooth and simple the menu is now. I'm wondering how my new volunteers will take to it, and how else we can push the limits on the backend.

Cheers
maz

Industrial Strength JavaScript and DHTML Menus

Item width and height problems