pls look at this menu

[rav4ski]

Hi,

I am very close to convince my second client to buy this menu.

The top menu is the one my client currently using. I am trying to make another one (the bottom one) to be as the same as possible. Once I can prove that it can provide the same beheavior, then my client will buy this menu.

I know I am almost there but I think I need some help now.

Please take a look at the following example.

http://www.yueyue.org/menutest/

Please resize the browser window and check on the sub menu of item6. Is there is any way to fix the sub menu position so it will act the same way as the top menu?

Thanks,

Jason

[Ruth]

I'm not sure why you have the menu laid out the way you do, why you have removed the submenus from the menu_data.js file? You might want to look at this information on how to put the menu into a table http://milonic.com/tablemenu.php

To get the submenu 6 to open the way the other does you need to use the overfilter/outfilter coding in that submenu definition.

Code: Select all

overfilter="GradientWipe(WipeStyle=1, size=1.00, motion='Forward', duration=0.7)";
outfilter="GradientWipe(WipeStyle=1, size=1.00, motion='Reverse', duration=0.2)";

Ruth

[John]

I note one very annoying behavior in your current menu - as you mouseOver submenu items the main menu items flicker. The Milonic system does not do that.

[rav4ski]

Ruth,

Thanks for the tip.

I tried that filter and it doesn't work. Also, I have an impression that the filters only work best for the IE but not the rest of the browsers. So it shouldn't be the answer. (That's why I remove filters from my style.)

Take a look at the screen shots in the following html.

http://www.yueyue.org/menutest/compare.html

Look at the offset of the submenu of item 6 and it is a showstopper:!:
Either there has to be a way to configure this or this is considered a huge BUG because the offset doesn’t make sense at all

John, I know the old menu is bad and that's why I am trying to convince my client to switch.

However, if I cannot make the menu like the old one (it's just like a regular menu with the submenu in-line with the main menu, right?), I have no case here.

And further more, the reason why I need to move the data out from menu_data.js is because we need to use JSP to create the menu from Java codes (out of XML configuration). We also need to generate the style element values on the fly based on user's category to provide a different look & feel. My client is a big health care company and they are trying to make their customer website as a portal for different users (from different clients) to get different color themes and even menu styles!! I helped my other client in Verizon before for their Intranet application using Milonic so I know this should be the best choice.

I haven’t seen much discussion regarding this kind of “dynamic” behavior usage here. I don't know any other better way to do so. We can certainly talk about my experience if people here also have the similar needs. As you can see, the menus are created from some kind of "loop logic" in JSP, not hand coded.

Any help will be much appreciated.

Best Regards,

Jason

[Ruth]

You have a property listed in your submenus: menualign="left"; there is no such property as far as I know. What are you trying to do with that? Align= is text alignment, screenposition= menu placement. Your menu is in a table so it is position relative and will be at the left of the table cell in which it's placed.

To fix the submenu position problem, get rid of the top=143. They are subemnus, they drop based on the offsets set in the menu_data.js file.
As to the overfilter: Yes, it is an IE transition and only works in IE 5.5 and up, though many static filters can be set and will work in IE4 and up. I believe that the way the old menu drops is from a function. I have no clue if such a function could be written for the Milonic menu.

I don't know why but it seems the overfilter property is not working using the copyOf method to specify the second menu style. It will work if you copy the menuStyle, paste it and change the name to subMenuStyle, changing the numbers to be what you have in the copyOf now and adding the overfilter code to it.

Code: Select all

overfilter="GradientWipe(WipeStyle=1, size=1.00, motion='Forward', duration=0.7)";

Then if you want it to be disabled for any submenu, you would put in the code overfilter=""; in the menu definition of any submenu with which you don't want it to appear. You really don't need the outfilter, though you can put that in also. There are a lot of different transitions that can be set. There is a demo to let you see all the different transitions you can use and how they will function on the menu, it is still a work ongoing, but you can get an idea. You can get some really fantastic looks with them. IE Transitions

I'm sorry but someone with knowledge on functions and programming and such will have to help you with what you want as to the jsp and such. I know things can be done because others have used jsp, asp, php to generate the menu, but that is beyond my knowledge of how. I'll pass on the request.

Ruth

[Ruth]

One additional item: You have the submenus inside of script tags, which is of course what you need, but you've got them inside the script tags for the other menu which has functions declared. I do not know if that will mess around with functions in the Milonic Menu or not, but I would suggest you move the menu to their own script tags. There may be no problem as it is in any browser, but better to be safe than frustrated

Ruth

[kevin3442]

Hi Jason,

I just had a look. I'm not seeing the offset problem for the submenu from item6 (as shown in your screen capture). Do I take it that you've solved that one? I'm using IE6/Win2k. What brower/OS were you using for your screen cap?

Kevin

[rav4ski]

Hi, Ruth,

The top=143 is not the problem. I have to specify that so I can see the "bottom border" provided by the table background when the drop down menu shows. That should affect the "vertical" offset for the subMenu but not the horizontal positions.

I think the problem is due to the way that Milonic menu handles the "edge of windows (browser)". When showing the sub menu in the table cell, (and outside of table, I think.) It will use the "edge of window" to calculate the position but not the parent menu "x position". Even the menu on Milonic has this "default" behavior.

(Check the screen shot in here again.)
http://www.yueyue.org/menutest/compare.html

The _subOffsetTop and _subOffsetLeft are also not doing anything here. Even if they do, how do I make them fixed with the main menu and not affect by reaching the edge of the browser window?

Here is the .zip file for the menu if any one is willing to play with this and helps to figure this out.

http://www.yueyue.org/menutest.zip

Thanks,

Jason

[rav4ski]

Kevin,

I am using Win2K/IE6, Win2K/FireFox 0.9, Win2K/Netscape 7.1.

The problem is still there. You need to resize your window to make the browser window small enough to see the result.

I don't think it's OS version/Browser version related issue...

Thanks,

Jason

[Ruth]

I have mentioned this post to others because I am not able to help given you are using jsp, functions and things and I know nothing about them so I can't suggest fixes, except for the one on the overfilter. Sorry.

Ruth

[rav4ski]

The problem now is in the JavaScript.

Please ignore the "JSP" key word. There is nothing to do with that.

For the other javascript, even if I remove it it's the same.

There is no "JSP" in my files. All pure HTML/CSS/Javascript.

Please take a look.

Thanks,

Jason

[Ruth]

Do you want the menu to look like the old one? This is a screenshot of what I see in IE5.5 having removed the milonic menu from the page. [sorry about how blurry, I resized it] I see no 'bottom border' of any kind on that horizontal menu, the lower black line is where I cropped it.



Next, do you want the menu to be 80px from the top and centered in the page? Is it always going to be in that position?

Finally, I'm pretty sure that someone set up menus based on cookies allowing the users to choose which they wanted, so that part should be possible, but I've no clue how it's done.

I posted for help on the offset.

Ruth

[rav4ski]

Hi Jason,

I just had a look. I'm not seeing the offset problem for the submenu from item6 (as shown in your screen capture). Do I take it that you've solved that one? I'm using IE6/Win2k. What brower/OS were you using for your screen cap?

Kevin

The offset problem is still troubling me.

Here is my question again,

Is there a way that I can have more control of the submenu offset in the table cell?

When mouse over on the main menu item, is there a way to find the x position of the main menu (not the mouse position, the menu position) and then pass that variable into the submenu item?

Can "popup" method be used for this purpose?

Or, I really need to get into the menu codes and dig this out by myself?

[kevin3442]

Hi Jason,

I had another look and was able to see the problem. I had initially resized the window, as you mentioned in your first post, and did not get the problem. I hadn't realized that to get the problem you have to resize the window so that item6 goes completely out of the browser window, then use the horizontal scrollbar to bring item6 back into view. The problem seems to happen when (1) you have to use the horizontal scrollbar to get to the right side of the menu and (2) once the right side of the menu is showing, there still isn't enough horizontal space to display the submenu under the parent item. I would conclude that there's an issue in the built-in anti-collision code that adjusts the position of the submenu when it intersects the edge of the browser window. On further testing, this does not appear to be related to putting the main menu in a table cell. I have reported this issue to Milonic.

When mouse over on the main menu item, is there a way to find the x position of the main menu (not the mouse position, the menu position) and then pass that variable into the submenu item?

Can "popup" method be used for this purpose?

Yes to both questions... there are built-in methods you could use for this, but it would be a big pain in the rear. I would suggest that you wait a bit, ad see if an upcoming release doesn't fix the problem. If you really want to go at it manually right away, holler and we can go over some of the methods.

Cheers,

Kevin

[Andy]

Hi,

This is about as close as I can get:

http://milonic.com/users/andy/

is this what you are looking for?

-- Andy

[rav4ski]

Andy, Kevin,

The zip file from your test page is not working on my environment.
(Win 2000 SP2/IE 6.0.2800.1106C0/Mozila Fire Fox 0.9/Netscape 7.1).
It loads very slow and doesn't show anything but an empty table.

I think the issue is about the submenu position.

I spent the whole day yesterday to make it works with spos and popup.
I keep a global reference var for the current main menu item.

The codes are like the following.

[code]
var currentMainMenuItemRef;

function getMenuItemXPos() {
var itemPos=gpos(gmobj("el"+_itemRef));
currentMainMenuItemRef=_itemRef;
var xPos = itemPos[1];
return xPos;
}

function showMenuAtXPos(menuItemName) {

var mainItemXpos = getMenuItemXPos();
var subMenuRef =
gmobj("menu"+getMenuByName(menuItemName)) ;
spos(subMenuRef, null, mainItemXpos , null, null);
popup(menuItemName);
}

.... (menu data)
aI("text=item6;onbgcolor=#4455cb;offbgcolor=#8c96d3;url=/item6.html;onfunction=showMenuAtXPos(\"item6\");offfunction=popdown(\"item6\");");
....

[/code]

Then I have no problem to pop up the submenu at the exact location and not it won't jump to unexpected position even if I resize the window to any size.

However, the problem comes because it's not a "submenu" any more. Then there is hightlight issue I need to figure out. (I tried to read your source codes but it's really beyond my experience... )

I know it shouldn't be a big effort for Andy to do that though.

There are three possible enhancements based on my experience,

1. Add another argument for the popup(..) method. So it can associate
with the main menu item and get the same behavior as the
"submenu=" inside the "aI".

2. Enhance the "submenu=" in the "aI" method. Make it take a javascript
method to allow the spos to be made in that method. The method nees
to return the submenu name.

3. Add another item property "alignWithParent", which can take "left",
"top", "right", "bottom" and offset values.

I think the first one should be the easiest short term fix, right, Andy?

Another extra suggestion regarding to Padding here:

Can the "padding" be enhanced with "horizontalPadding" and "verticalPadding"? In order to create some spaces
between the dividers and the text, I have to put "space.gif" images in
there but it should be really the functions provided via the padding.
Or it's even better to provide the properties with "leftPadding", "rightPadding", "topPadding" and "bottomPadding" if it's possible.

[Ruth]

There are references as to properties in style definitions for global, menu, item properties. In those you will find things like rawcss which will allow the setting of css for the menu i.e. padding could be set using this parameter

Code: Select all

rawcss="padding: 0px 8px 0px 8px";

http://milonic.com/styleproperties.php
http://milonic.com/menuproperties.php
http://milonic.com/itemproperties.php

Ruth

[rav4ski]

For some reason,

Code: Select all

rawcss="padding: 0px 8px 0px 8px";

does not work.

I can use the following though.

Code: Select all

rawcss="padding-top:0px;padding-right:4px;padding-bottom:0px;padding-left:4px";

However, the limitation is that I can't use align="center" or the padding won't work.

Therefore, I go back to the option to use the "spacer.gif".

Then I encounter anohter problem. I can assign the image with a spacer5px.gif in front of my text by using the
image="spacer5px.gif" but I can't insert an image after the text unless I use subimage="spacer5px.gif";.

But then it will only have the spacer appended at the end if there is a submenu. (i.e. I can't use popup() again. If there is no submenu, this spacer won't show either.)

I think I am in some kind of while loop.

[Ruth]

You can use html image coding to insert an image

Code: Select all

<img src=whateverimage border=0>

Just as a suggestion, when you get things fixed more or less as you want the layout and then are working on little things it would be real helpful to give help on your questions if the parties had at least your menu_data.js file, but having the page itself would be best so they can see the full layout and have the files with which to work.

Ruth

[kevin3442]

Hi Jason,

Andy, Kevin, The zip file from your test page is not working on my environment.

I don't want to speak for Andy, since he made the test, but I believe that he was loading menu source files from his development code. If you edit his index.htm file, replacing http://www.milonic.dev/upload_files/ with menutest_files/ it should work. I believe what Andy was doing was to turn collision detection in the menu system off. In your original menu, the position of the submenu was not adjusted to prevent it from being clipped by the edge of the browser window if there wasn't enough room to show the whole menu. The Milonic system, however, include anti-collision methds to re-position the submenu if it would otherwise be clipped by the browser window. You can turn this behavior off by setting the global variable ignoreCollisions = true; I would normally set this where the other menu globals (like _menuCloseDelay) are set. In Andy's demo, he set _W.ignoreCollisions=1 in index.htm (_W = window, from milonic_src.js). The result is the same... collision detection is disabled. The submenu will then open at the parent item's left location, regardless of any impending collisions (i.e., it won't move).

I spent the whole day yesterday to make it works with spos and popup.

The whole day... yep... that's what I meant earlier when I said "...there are built-in methods you could use for this, but it would be a big pain in the rear." spos, gpos, _itemRef, etc... these are the things I had in mind. It looks like you got a good start.

...However, the problem comes because it's not a "submenu" any more. Then there is hightlight issue I need to figure out.

Another of the "pain in the rear" aspects I had in mind. The approach you are taking essentially isolates the menu from the rest of the system, losing some of the automated aspects that come with leaving it associated. As you're finding, you can code around that, but it can be an effort.

Another approach you might want to try, if the above isn't working for you, is to insert a 1-px transparent gif in the main menu item, then use the popup() function to open the submenu at the gif's location (adjust with offsets passed to popup() if necessary). That way, you don't have to keep getting and setting positions, since the gif remains in the correct relative position even when the window is resized.

Regarding padding... I see you've been getting help from Ruth. She's good at that stuff.

For some reason, rawcss="padding: 0px 8px 0px 8px"; does not work.

Hmmmm.... I think there were some changes to the menu code recently regarding how css is processed. I see you're using 5.44. You might want to download 5.47 and see if rawcss works. It worked for me just now.

You might also refer to this thread for an alternative having to do with using the menu's padding property.

If nothing else... Ruth's suggestion about using a space in a plain ol' <img> tag is a tried-and-true method. You can place the tag right in the text= property in an aI() menu definition. When I've done this, I've used a 1-pixel transparent gif, and I just use the <img> tag's height and width attributes to control the space. like so:

Code: Select all

aI("text=<img src=1px.gif border=0 height=1 width=10>Item Text<img src=1px.gif border=0 height=1 width=10>;url=whatever.htm;");

By controlling the space with the tag's height and width attributes, you don't have to make different sized images for different sized spaces.

Hope some of that helps,

Kevin