Image menu in table expands the page when its clicked

Surfergirl · Post by **Surfergirl** » Mon Apr 23, 2007 1:43 am

http://adventur.server283.com/index1.htm

Its an image menu inside a table. The problem is the menu expands horizontaly when you
click on it.
every menu click moves expands the table, then it shrinks back to what it should be.

I see this on IE7 on a PC WindowsXP, Milonic 5.772

MAIN MENU

Code: Select all

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle1;
position="relative";


aI("image=/Milonic/menu/pc2home-off.gif;overimage=/Milonic/menu/pc2home-on.gif;
url=/index1.htm;title=Meridian Club Home;");
aI("image=/Milonic/menu/pc2about_off.gif;
overimage=/Milonic/menu/pc2about_on.gif;
url=/pine-cay/private-island/small-hotel/club.htm;showmenu=about;
title=About the Meridian Club on Pine Cay;");
aI("image=/Milonic/menu/pc2accommodation_off.gif;
overimage=/Milonic/menu/pc2accommodation_on.gif;
url=/pine-cay/private-island/small-hotel/rooms.htm;showmenu=accommodation;
title=Meridian Club Accomomdation;");
aI("image=/Milonic/menu/pc2activities_off.gif;
overimage=/Milonic/menu/pc2activities_on.gif;
url=/pine-cay/private-island/activities.htm;
showmenu=activities;title=Meridian Club Accomomdation;");
aI("image=/Milonic/menu/pc2dining_off.gif;
overimage=/Milonic/menu/pc2dining_on.gif;
url=/pine-cay/private-island/small-hotel/dining.htm;
title=Dining on Pine Cay;");
aI("image=/Milonic/menu/pc2wedding_off.gif;
overimage=/Milonic/menu/pc2wedding_on.gif;
url=/pine-cay/private-island/small-hotel/weddings.htm;
title=Weddings and Honeymoons on Pine Cay;");
aI("image=/Milonic/menu/pc2inquiries_off.gif;
overimage=/Milonic/menu/pc2inquiries_on.gif;
url=/forms/inquiries.htm;showmenu=inquiries;
title=Inquire to the Meridian Club on Pine Cay;");
}
drawMenus();

SUBMENU

Code: Select all

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=2;
_subOffsetLeft=-2;

with(menuStyle1=new mm_style()){
borderwidth=0;
headerbgcolor="#ffffff";
headercolor="#000000";
padding=0;
pagebgcolor="#82B6D7";
pagecolor="black";
}

with(menuStyle=new mm_style()){
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#eeeeee";
offcolor="#000000";
onbgcolor="#ddffdd";
oncolor="#000099";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, 
Strength=3)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#999999";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}



with(milonic=new menuname("about")){
overflow="scroll";
style=menuStyle;
aI("text=Meridian Club;url=/pine-cay/private-island/small-hotel/club.htm;")
aI("text=Pine Cay;url=/pine-cay/private-island/pinecay.htm;")
aI("text=Location;url=/pine-cay/private-island/small-hotel/map.htm;")
aI("text=Travel To;url=/pine-cay/private-island/small-hotel/traveltopinecay.htm;")
aI("text=FAQ;url=/pine-cay/private-island/small-hotel/details.htm;")
aI("text=Staff;url=/pine-cay/private-island/small-hotel/staff.htm;")
}

with(milonic=new menuname("accommodation")){
style=menuStyle;
aI("text=Beachfront Club Rooms;url=/pine-cay/private-island/small-hotel/rooms.htm;")
aI("text=Sand Dollar Cottage;url=/pine-cay/private-island/small-hotel/sanddollar.htm;")
aI("text=Family Cottages;url=/pine-cay/private-island/small-hotel/cottages.htm;")
aI("text=Rates & Reservations;url=/pine-cay/private-island/small-hotel/rates.htm;")
aI("text=Special Offers;url=/pine-cay/private-island/small-hotel/specials.htm;")
}

with(milonic=new menuname("activities")){
style=menuStyle;
aI("text=Activities;url=/pine-cay/private-island/activities.htm;")
aI("text=Diving & Snorkeling;url=/pine-cay/private-island/diving.htm;")
aI("text=Bonefishing;url=/pine-cay/private-island/bonefishing.htm;")
aI("text=Eco-Tours;url=/pine-cay/private-island/ecotours.htm;")
aI("text=Middle Caicos;url=/pine-cay/private-island/middlecaicos.htm;")
}

with(milonic=new menuname("inquiries")){
style=menuStyle;
aI("text=Inquire;url=/forms/inquiries.htm;")
aI("text=Newsletter;url=/forms/newsletter.htm;")
aI("text=Acclaims;url=/pine-cay/private-island/small-hotel/acclaims.htm;")
aI("text=What Guests Say;url=/pine-cay/private-island/small-hotel/guests-say.htm;")
}


drawMenus();

[/url]

Post by **Ruth** » Mon Apr 23, 2007 2:55 am

Hi,

When you click what? The items are set to go to a different url when clicked so I'm
not understanding what you mean by it expands, if you click a main menu item you
go to a different page.

Ruth

Surfergirl · Post by **Surfergirl** » Mon Apr 23, 2007 12:15 pm

Thanks Ruth, I will try to explain better.

From the browser view (IE7), any menu item clicked on, the table (760px) that holds the design,
expands while the menu images download. If the screen is set to 1280px
wide, the table looks like it expands to 1000 pixels and then when the
menu images finish downloading the table collapes back to the normal
760 px.

Beside the expansion, its seems strange that once the menu has
downloaded it's having to download for every page, like its
not in the cache.

I'm not sure what you mean by going to a different URL -
http://adventur.server283.com/index1.htm is the home
page and the other pages are several folders down.

Thank you for your help.

Surfergirl · Post by **Surfergirl** » Mon Apr 23, 2007 12:22 pm

Does it have to do with declaring the item width of each image in the main menu?

Surfergirl · Post by **Surfergirl** » Mon Apr 23, 2007 12:44 pm

this is what I tried but it doesn't stop the movement

Code: Select all

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle1;
position="relative";
overallwidth=760; 

aI("image=/Milonic/menu/pc2home-off.gif;
overimage=/Milonic/menu/pc2home-on.gif;itemwidth=190;
url=/index1.htm;title=Meridian Club Home;");
aI("image=/Milonic/menu/pc2about_off.gif;
overimage=/Milonic/menu/pc2about_on.gif;itemwidth=80;
url=/pine-cay/private-island/small-hotel/club.htm;
showmenu=about;
title=About the Meridian Club on Pine Cay;");
aI("image=/Milonic/menu/pc2accommodation_off.gif;
overimage=/Milonic/menu/pc2accommodation_on.gif;itemwidth=132;
url=/pine-cay/private-island/small-hotel/rooms.htm;showmenu=accommodation;
title=Meridian Club Accomomdation;");
aI("image=/Milonic/menu/pc2activities_off.gif;
overimage=/Milonic/menu/pc2activities_on.gif;itemwidth=95;
url=/pine-cay/private-island/activities.htm;showmenu=activities;
title=Meridian Club Accomomdation;");
aI("image=/Milonic/menu/pc2dining_off.gif;
overimage=/Milonic/menu/pc2dining_on.gif;itemwidth=72;
url=/pine-cay/private-island/small-hotel/dining.htm;
title=Dining on Pine Cay;");
aI("image=/Milonic/menu/pc2wedding_off.gif;
overimage=/Milonic/menu/pc2wedding_on.gif;itemwidth=94;
url=/pine-cay/private-island/small-hotel/weddings.htm;
title=Weddings and Honeymoons on Pine Cay;");
aI("image=/Milonic/menu/pc2inquiries_off.gif;
overimage=/Milonic/menu/pc2inquiries_on.gif;itemwidth=97;
url=/forms/inquiries.htm;showmenu=inquiries;
title=Inquire to the Meridian Club on Pine Cay;");
}
drawMenus();

am I getting close?

Post by **Ruth** » Mon Apr 23, 2007 5:15 pm

Hi,

OK, I tried on my other computer which is on dial-up and I see what's happening. Try using the preloadimages.js module for the menu images. What's happening, I think, is that there are so many images loading on the page that not all the menu images are getting loading while other images are being loaded so when you click one of the main menu items, since the overimage is not loaded yet the browser 'blank' space where the image should be shows and that space seems wider than the images.

http://milonic.com/menumodules.php

Another thing you can try is using the newest method to put the menu in a table.

1. put the main menu back in the menu_data.js file, just the menu not the drawMenus(); at the end of that main file.

2 add buildAfterLoad=true; at the top

Code: Select all

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=2;
_subOffsetLeft=-2;
buildAfterLoad=true;

3. on the page call all the menu files in that table cell instead of the others after the body tag and the main in the cell, put all of them in the cell. Of course you no longer would have a main file since the menu is back in the menu_data.js file

See if that helps. I'd still use the preloadimages.js file though since you have images.

Ruth

Surfergirl · Post by **Surfergirl** » Sun Apr 29, 2007 9:27 pm

Thank you very kindly Ruth. Both the upgrades you recommended have been instituted with no adverse effect. I am away from the "slow" DSL for a few weeks but am anxious to check it when I return. Thank you again.