Still can't resolve this problem - need your help, Please!

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
User avatar
rudy
Mega User
Mega User
Posts: 161
Joined: Thu Jan 15, 2004 11:39 pm
Location: Scottsdale, Arizona
Contact:

Still can't resolve this problem - need your help, Please!

Post by rudy »

The problem explained below, shows up in IE version 6.0 and maybe other browsers as well. Shows up on both of my home computers and I have also tried it on about a dozen computers at my local library and it does the same thing. I am using Milonic version 5.40. I have tried different images (small and larger) but same results and have tried different padding sizes but still have the same problem. The following is the problem as best I can explain it.

I have a separate image for the main items (the Milonic menu you see as the page opens and before you mouse over it) and a different image for the submenus. If you go to the link I provided below, and mouse over the first item on the menu (left side - named OSI Model) the submenus will open up. You will also see a black arrow image and next to it a small amount of background that shou NOT be there. If you mouse over another main item menu and then go back the the first main item, the extra background space is no longer there and the arrow is positioned all the way to the right at it should be. This only happens the very first time the page is opened. Kind of a hard thing to explain, hope you can understand what is happening here

Your suggestions will be appreciated!

Here is a link so you can check it out: http://www.networkdriven.com/qp/579bb62.html

Here is the code I'm using to get the image on the main item bar and the code for the subimage as the menu drops down.
Code:
with(windows98style=new mm_style()){
onbgcolor="#000000";
oncolor="#FFFFFF";
offbgcolor="#FFAD73";
offcolor="#000000";
bordercolor="#BFBFBF";
borderstyle="raised";
borderwidth=2;
subimage="/qp/black_round.gif";
subimagepadding="2";
overfilter="Fade (duration=0.2);Alpha (opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
separatorsize="2";
padding=4;
fontsize="75%";
fontfamily="tahoma, verdana";
headercolor="#FFAD73";
headerbgcolor="#000000";
high3dcolor="#eeeeee";
low3dcolor="#7F7F7F";
swap3d="1";
}



with(substyle=new mm_style()){
onbgcolor="#000000";
oncolor="#FFFFFF";
offbgcolor="#FFAD73";
offcolor="#000000";
bordercolor="#BFBFBF";
borderstyle="raised";
borderwidth=2;
subimage="/qp/black_7x7.gif";
subimagepadding="0";
overfilter="Fade (duration=0.2);Alpha (opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
separatorsize="2";
padding=4;
fontsize="75%";
fontfamily="tahoma, verdana";
headercolor="#FFAD73";
headerbgcolor="#000000";
high3dcolor="#eeeeee";
low3dcolor="#7F7F7F";
swap3d="1";
}
Rudy
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Hi Rudy,

Hmmmm... very strange. It's as if the submenu is being built before it knows how big the subimage (arrow.gif) is. If that's the case, then putting

Code: Select all

buildAllMenus=true;
at the top of your menuquizinetplusdemo_data.js file should cause all of the menus to be built before they're displayed, which should take care of the problem.

In having a look, I noticed a few issues with your style definitions. e.g., I don't think "raised" is a valid borderstyle. Of course, since you're using high3dcolor and low3dcolor to get the 3d border effect, borderstyle is ignored anyway (so you don't need it). You're also missing an opening single quote around the color definition in the Shadow() component of the overfilter in windows98style (seems to forgive you though). Also, since the main menu doesn't ever close, you don't really need an outfilter in it's style. A couple of other not-needed settings. Since your two styles are very similar, you can also copy the windows98style to the substyle and make only a few changes. I took the liberty of editing a little, and I think you'll find that the following will work:

Code: Select all

with(windows98style=new mm_style()){
onbgcolor="#000000";
oncolor="#FFFFFF";
offbgcolor="#FFAD73";
offcolor="#000000";
borderwidth=2;
separatorsize=2;
padding=4;
fontsize="75%";
fontstyle="normal";
fontfamily="Tahoma, Verdana";
headercolor="#FFAD73";
headerbgcolor="#000000";
subimage="/gu/black_round.gif";
subimagepadding=2;
high3dcolor="#EEEEEE";
low3dcolor="#7F7F7F";
swap3d=1;
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color='#777777', Direction=135, Strength=5)";
}

substyle=new copyOf(windows98style);
substyle.subimage="/gu/arrow.gif";
substyle.outfilter="randomdissolve(duration=0.3)";
Anyway, let us know if the buildAllMenus trick works.

Cheers,

Kevin
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

If the buildAllMenus doesn't work, you might try removing the overflow=scroll on that OSI submenu. It doesn't need it and perhaps the menu is leaving the space for it until you mouseover and it realizes it doesn't need the scroll bar? Just a thought.

And, I think somehow that 'raised' got out on the web for the
valid css 'outset'

Ruth
User avatar
rudy
Mega User
Mega User
Posts: 161
Joined: Thu Jan 15, 2004 11:39 pm
Location: Scottsdale, Arizona
Contact:

Post by rudy »

Kevin wrote:
It's as if the submenu is being built before it knows how big the subimage (arrow.gif) is. If that's the case, then putting

Code: Select all

buildAllMenus=true;
at the top of your menuquizinetplusdemo_data.js file should cause all of the menus to be built before they're displayed, which should take care of the problem.


Does the buildAllMenus=true; go as shown below? This is the very top of the menuquizinetplusdemo.data.js file (note no semi-colon)

Code: Select all

_buildAllMenus=true
_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=50                // Follow scrolling Rate
_subOffsetTop=5               // Sub menu top offset
_subOffsetLeft=-1             // Sub menu left offset
_scrollAmount=3               // Only needed for Netscape 4.x
_scrollDelay=20               // Only needed for Netcsape 4.x
or in this section of the code? (note semi-colon used)

Code: Select all

with(windows98style=new mm_style()){
buildAllMenus=true;
onbgcolor="#000000";
oncolor="#FFFFFF";
offbgcolor="#FFAD73";
offcolor="#000000";
bordercolor="#BFBFBF";
//borderstyle="raised";
borderwidth=2;
subimage="/qp/black_round.gif";
subimagepadding="2";
overfilter="Fade (duration=0.2);Alpha (opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
separatorsize="2";
padding=4;
fontstyle="normal";
fontsize="75%";
fontfamily="tahoma, verdana";
headercolor="#FFAD73";
headerbgcolor="#000000";
high3dcolor="#EEEEEE";
low3dcolor="#7F7F7F";
swap3d="1";
}
Rudy
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

As Kevin said, buildAllMenus=true goes at the top of your menu data file so your first choice is correct.

Ruth
User avatar
rudy
Mega User
Mega User
Posts: 161
Joined: Thu Jan 15, 2004 11:39 pm
Location: Scottsdale, Arizona
Contact:

Post by rudy »

I was confused by Kevin's code of: buildAllMenus=true; as items in the very top of the menuquizinetdemo_data.js. file have an underscore _ before it and do not have a semi-colon ; at the end of it, that's why I thought this would go in the to of the main_menu. Your pretty sure of this, right? :D
"Kevin wrote" buildAllMenus=true; goes at the top of your menuquizinetplusdemo_data.js file.


I also removed the overflow=scroll from the OSI submenu as you suggested. I thought that needed to be in there if the sub-menus got so long that a scrollbar was needed. I see the scrollbar is still there even though I removed the overflow=scroll - don't know where I got that from.

Also removed the "raised" thing as well.

My problem now is that I can't get it to reproduce the problem, so either these things fixed the problem or it still exists. I have emptied my cache and restarted my browser but it seems like it doesn't always show up. Maybe you could click the like and check it out on your computer?

http://www.networkdriven.com/qp/579bb62.html

This is the code I have if I've done it right? Sorry this is a little long:

Code: Select all

_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=50                // Follow scrolling Rate
_subOffsetTop=5               // Sub menu top offset
_subOffsetLeft=-1             // Sub menu left offset
_scrollAmount=3               // Only needed for Netscape 4.x
_scrollDelay=20               // Only needed for Netcsape 4.x
_buildAllMenus=true


with(windows98style=new mm_style()){
onbgcolor="#000000";
oncolor="#FFFFFF";
offbgcolor="#FFAD73";
offcolor="#000000";
bordercolor="#BFBFBF";
borderwidth=2;
subimage="/qp/black_round.gif";
subimagepadding="2";
overfilter="Fade (duration=0.2);Alpha (opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
separatorsize="2";
padding=4;
fontstyle="normal";
fontsize="75%";
fontfamily="tahoma, verdana";
headercolor="#FFAD73";
headerbgcolor="#000000";
high3dcolor="#EEEEEE";
low3dcolor="#7F7F7F";
swap3d="1";
}



with(substyle=new mm_style()){
onbgcolor="#000000";
oncolor="#FFFFFF";
offbgcolor="#FFAD73";
offcolor="#000000";
bordercolor="#BFBFBF";
borderwidth=2;
subimage="/qp/black_7x7.gif";
subimagepadding="2";
overfilter="Fade (duration=0.2);Alpha (opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
separatorsize="2";
fontsytle="normal";
padding=4;
fontsize="75%";
fontfamily="tahoma, verdana";
headercolor="#FFAD73";
headerbgcolor="#000000";
high3dcolor="#eeeeee";
low3dcolor="#7F7F7F";
swap3d="1";
}
Rudy
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Hi Rudy,

I'm still getting the problem in IE6... but only the very first time I visit your site. It's very odd... even if I clear the cache, then visit again, the problem doesn't show up. I have to actually reboot to see it again in IE6. With NS7.1 however, I see the problem every time I open the page in a new instance of the browser (so, testing with NS7.1 will probably be better).

Re: buildAllMenus... I think this is a fairly recent, and not widely known addition to the menu system. I'm pretty confident that it'll take care of the problem (it did in my lcal tests with your menu file). You use it just like I mentioned...

Code: Select all

buildAllMenus=true;
at the top of the ...data.js file, where the other global variables (with the _ at the front) are defined. The semicolon at the end is not really needed. js syntax follows C syntax pretty closely, and as a result I'm just used to putting a semicolon at the end of a line like that. js no longer requires the semicolon at the end, so it's optional... I just do it out of habit, but Andy typically doesn't (I guess because fewer characers in his code means faster downloads). Anyway, sorry for the confusion on that. Feel free to leave the semicolon out if you want.

Regarding the underscore... there should not be an underscore at the front of the variable name, like you see in the other "standard" global variables that are usually at the top of the ...data.js file (like _subOffsetTop). It should be

Code: Select all

buildAllMenus=true
It should NOT be

Code: Select all

_buildAllMenus=true
so you'll want to fix that in your current code. I'm betting that once you do that, the problem'll go away.

Let us know how it goes....

Kevin
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

I'm on IE5.5 and the problem is there all the time now, it never goes away even if I mouseover another menu item.

Ruth
User avatar
rudy
Mega User
Mega User
Posts: 161
Joined: Thu Jan 15, 2004 11:39 pm
Location: Scottsdale, Arizona
Contact:

Post by rudy »

Thanks for helpin Ruth!

I just made the change that Kevin thinks will resolve the problem - maybe you could check it again for me. Kevin states that just clearing out his cache doesn't work, that he actually has to reboot. Lot to ask, but I just have to fix this problem as this is an e-commerce site and something like this can drive my customers away.
Thanks again for your help and Kevin's as well.
Ruth wrote:I'm on IE5.5 and the problem is there all the time now, it never goes away even if I mouseover another menu item.

Ruth
Rudy
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Yes, that seems to have fixed it.


Ruth
User avatar
rudy
Mega User
Mega User
Posts: 161
Joined: Thu Jan 15, 2004 11:39 pm
Location: Scottsdale, Arizona
Contact:

Post by rudy »

I haven't rebooted and tried it myself yet, but WOW, I hope that does it, as I have really worked on trying to fix this as have you and Kevin - Thanks soooooo much :D
Ruth wrote:Yes, that seems to have fixed it.


Ruth
Rudy
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Just checked using NS7.1. No more problemo.

Cheers,

Kevin
User avatar
rudy
Mega User
Mega User
Posts: 161
Joined: Thu Jan 15, 2004 11:39 pm
Location: Scottsdale, Arizona
Contact:

Post by rudy »

Kevin:
I rebooted and went to the menu and it worked perfectly. Ruth said it works now in her IE 5.5 and I'm using IE 6.0, so hopefully that will fix it for good. I have the Milonic menu on several of my Web sites pages all with different data.js files. I guess I just need to add the

Code: Select all

buildAllMenus=true
code into each of those - correct?

Again thanks a bunch :D
kevin3442 wrote:Just checked using NS7.1. No more problemo.

Cheers,

Kevin
Rudy
Post Reply