Trouble using menu in HTML Table

getalab · Post by **getalab** » Thu Oct 19, 2006 4:28 pm

I want to have a table at the top of my web page. The table will have an image in the left cell and the menu in the right cell. After I have all files published, the menu always appears in the upper left corner of the web page (when browsing with IE 6). Where can I change the position of the menu?

My page HTML is below:

Code: Select all

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home Page</title>
</head>
<body>
<script language=JavaScript src="milonic_src.js" type=text/javascript></script>
<script language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js></scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js></scr"+"ipt>");
</script>
<script language=JavaScript src="menu_data.js" type=text/javascript></script> 
<table border="1" width="100%">
<td width="230">The image goes here.</td>
<td align="center">XYZ-I want the menu to display in this cell.
<script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Home;url=http://milonic.com/;status=Back To Home Page;");
aI("text=Menu Samples;showmenu=Samples;");
aI("text=Milonic;showmenu=Milonic;");
aI("text=Partners;showmenu=Partners;");
aI("text=Links;showmenu=Links;");
aI("text=My Milonic;showmenu=My Milonic;");
}
drawMenus();
</script>
</td>
</table>
</body>
</html>

The menu_data.js file:

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

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

with(vertStyle=new mm_style()){
styleid=1;
bordercolor="#999999";
borderstyle="solid";
borderwidth=1;
fontfamily="arial, tahoma";
fontsize="72%";
fontstyle="normal";
headerbgcolor="#AFD1B5";
headerborder=1;
headercolor="#000099";
image="18_blank.gif";
imagepadding=3;
menubgimage="backoff_green.gif";
offbgcolor="transparent";
offcolor="#000000";
onbgcolor="#FEFAD2";
onborder="1px solid #999999";
oncolor="#000000";
onsubimage="on_13x13_greyboxed.gif";
outfilter="randomdissolve(duration=0.2)";
overfilter="Fade(duration=0.1);Alpha(opacity=95);Shadow(color=#777777', Direction=135, Strength=3)";
padding=3;
pagebgcolor="#CFE2D1";
pagecolor="#000066";
pageimage="db_red.gif";
separatoralign="right";
separatorcolor="#999999";
separatorpadding=1;
separatorwidth="85%";
subimage="black_13x13_greyboxed.gif";
menubgcolor="#F5F5F5";
}

with(milonic=new menuname("Sample mainmenu")){
alwaysvisible=1;
left=10;
margin=2;
orientation="horizontal";
style=horizStyle;
top=10;
aI("text=Home;title=Back to Home Page;url=/;");
aI("showmenu=Sample about;text=About Milonic;");
aI("showmenu=Sample dhtml menu;text=DHTML Menu;");
aI("showmenu=Sample products;text=Products;");
aI("showmenu=Sample support menu;text=Support;");
aI("showmenu=Sample my milonic;text=My Milonic;url=mymilonic.php;");
aI("showmenu=Sample search;text=Search;url=/search.php;");
}

with(milonic=new menuname("Sample about")){
margin=3;
style=vertStyle;
top="offset=2";
aI("image=18_about.gif;text=About Us;url=/aboutus.php;");
aI("image=18_testimonial.gif;text=Testimonials;url=/testimonials.php;");
aI("image=18_corporate.gif;text=Distinguished Clients;url=/corp_customers.php;");
aI("image=18_nonprofit.gif;text=Investing in Non-Profits;url=/nonprofits.php;");
aI("image=18_where.gif;text=Where Are We;url=/location.php;");
aI("image=18_contact.gif;text=Contact Us;url=/contactus.php;");
aI("image=18_privacy.gif;text=Privacy Policy;url=/privacy.php;");
aI("image=18_license.gif;text=Software Licensing Agreement;url=/license.php;");
}

with(milonic=new menuname("Sample dhtml menu")){
margin=3;
style=vertStyle;
top="offset=2";
aI("image=18_purchase.gif;text=Software Purchasing Pages;url=/cbuy.php;");
aI("image=18_lic.gif;text=Licensing;url=/licensing.php;");
aI("image=18_freelic.gif;separatorsize=1;text=Free Licenses;url=/freelicreq.php;");
aI("showmenu=Sample menusamples;text=DHTML Menu Samples;url=/menu.php;");
aI("image=18_product.gif;text=Product Information;url=/productinfo.php;");
aI("image=18_integration.gif;text=Page Integration;url=/integration.php;");
aI("image=18_quick.gif;showmenu=Sample quickref;text=Menu Quick Reference Guides;");
aI("image=18_version.gif;separatorsize=1;text=Menu Version Information;url=/menuvinfo.php;");
aI("text=Frames Based Menu (version 3);url=/menu/frames/;");
aI("image=18_converter.gif;text=Version 3 to Version 5.0 Converter;url=/converter.php;");
aI("text=Menu Logos;url=/logos.php;");
aI("image=18_user.gif;text=List of DHTML Menu users;url=/list/;");
}

with(milonic=new menuname("Sample quickref")){
margin=3;
style=vertStyle;
aI("text=Methods and Functions;url=/menu_methods.php;");
aI("text=Global Variables;url=/menu_variables.php;");
aI("text=Global Properties;url=/global_properties;");
aI("text=Style Properties;url=/styleproperties.php;");
aI("text=Menu Properties;url=/menuproperties.php;");
aI("text=Menu Item Properties;url=/itemproperties.php;");
}

with(milonic=new menuname("Sample support menu")){
margin=3;
style=vertStyle;
top="offset=2";
aI("image=18_testimonial.gif;text=Menu Discussion Forum;url=/forum/;");
aI("text=Customer Tech Support System;url=/support/;");
aI("image=18_news.gif;separatorsize=1;text=Newsletter Subscription;url=/newsletter.php;");
aI("text=Removing the Forced link to Milonic;url=/removelink.php;");
aI("image=18_googlemenu.gif;text=Search Engines and the Menu;url=/searchengines_milonic.php;");
aI("image=18_tablecell.gif;text=Embedding a Menu inside a Table Cell;url=/tablemenu.php;");
aI("text=Adding Multiple Menus to a Web Page;url=/multiplemenus.php;");
aI("image=18_css.gif;text=CSS Based Menus;url=/cssbasedmenus.php;");
aI("image=18_faq.gif;separatorsize=1;showmenu=Sample faq;text=FAQ;");
aI("text=Apache Web Server Installation;url=/apachesetup.php;");
aI("image=18_iis.gif;text=Internet Information Server Setup;url=/iissetup.php;");
}

with(milonic=new menuname("Sample faq")){
margin=3;
style=vertStyle;
aI("text=DHTML Menu;url=/menufaq.php;");
aI("text=Website & Loggin In;url=/websitefaq.php;");
aI("text=Licensing;url=/licfaq.php;");
aI("text=Purchasing;url=/purfaq.php;");
}

with(milonic=new menuname("Sample menusamples")){
margin=3;
overflow="scroll";
style=vertStyle;
aI("text=Plain Text Horizontal Style DHTML Menu Bar;url=http://milonic.com/menusample1.php;")
aI("text=Vertical Plain Text Menu;url=http://milonic.com/menusample2.php;")
aI("text=All Horizontal Menus;url=http://milonic.com/menusample25.php;")
aI("text=Using The Popup Menu Function Positioned by Images;url=http://milonic.com/menusample24.php;")
aI("text=Classic XP Style Menu;url=http://milonic.com/menusample82.php;")
aI("text=XP Style;url=http://milonic.com/menusample86.php;")
aI("text=XP Taskbar Style Menu;url=http://milonic.com/menusample83.php;")
aI("text=Office XP Style Menu;url=http://milonic.com/menusample47.php;")
aI("text=Office 2003 Style Menu;url=http://milonic.com/menusample46.php;")
aI("text=Apple Mac Style Menu;url=http://milonic.com/menusample72.php;")
aI("text=Amazon Style Tab Menu;url=http://milonic.com/menusample74.php;")
aI("text=Milonic Home Menu;url=http://milonic.com/menusample78.php;")
aI("text=Windows 98 Style Menu;url=http://milonic.com/menusample13.php;")
aI("text=Multiple Styles Menu;url=http://milonic.com/menusample5.php;")
aI("text=Multi Colored Menu Items;url=http://milonic.com/menusample80.php;")
aI("text=Multi Colored Menus Using Styles;url=http://milonic.com/menusample7.php;")
aI("text=Multi Tab;url=http://milonic.com/menusample50.php;")
aI("text=Tab Top;url=http://milonic.com/menusample52.php;")
aI("text=Multi Columns;url=http://milonic.com/menusample73.php;")
aI("text=100% Width Span Menu;url=http://milonic.com/menusample26.php;")
aI("text=Follow Scrolling Style Menu;url=http://milonic.com/menusample10.php;")
aI("text=Menu Positioning With Offsets;url=http://milonic.com/menusample23.php;")
aI("text=Table Based (Relative) Menus;url=http://milonic.com/menusample9.php;")
aI("text=Opening Windows and Frames with the Menu;url=http://milonic.com/menusample11.php;")
aI("text=Menus Over Form Selects, Flash and Java Applets;url=http://milonic.com/menusample14.php;")
aI("text=Activating Functions on Mouseover;url=http://milonic.com/menusample15.php;")
aI("text=Drag Drop Menus;url=http://milonic.com/menusample22.php;")
aI("text=Menus with Header Type Items;url=http://milonic.com/menusample8.php;")
aI("text=Right To Left Openstyle;url=http://milonic.com/menusample65.php;")
aI("text=Up Openstyle Featuring Headers;url=http://milonic.com/menusample33.php;")
aI("text=DHTML Menus and Tooltips;url=http://milonic.com/menusample6.php;")
aI("text=Unlimited Level Menus Example;url=http://milonic.com/menusample67.php;")
aI("text=Context Right Click Menu;url=http://milonic.com/menusample27.php;")
aI("text=Menus built entirely from images;url=http://milonic.com/menusample18.php;")
aI("text=Static Images Sample;url=http://milonic.com/menusample16.php;")
aI("text=Rollover Swap Images Sample;url=http://milonic.com/menusample17.php;")
aI("text=Background Item Images;url=http://milonic.com/menusample20.php;")
aI("text=Background Image Buttons;url=http://milonic.com/menusample89.php;")
aI("text=Menu Background Images;url=http://milonic.com/menusample76.php;")
aI("text=Creating Texture with Menu Background Images;url=http://milonic.com/menusample19.php;")
aI("text=Static Background Item Images;url=http://milonic.com/menusample71.php;")
aI("text=Vertical Static Background Item Images;url=http://milonic.com/menusample87.php;")
aI("text=World Map Sample;url=http://milonic.com/menusample92.php;")
aI("text=US Map Sample;url=http://milonic.com/menusample91.php;")
aI("text=Image Map Sample;url=http://milonic.com/menusample4.php;")
aI("text=Rounded Edges Imperial Style;url=http://milonic.com/menusample21.php;")
aI("text=Corporation;url=http://milonic.com/menusample40.php;")
aI("text=International;url=http://milonic.com/menusample70.php;")
aI("text=Clean;url=http://milonic.com/menusample32.php;")
aI("text=3D Gradient Block;url=http://milonic.com/menusample57.php;")
aI("text=Descreet;url=http://milonic.com/menusample42.php;")
aI("text=Agriculture;url=http://milonic.com/menusample41.php;")
aI("text=Breeze;url=http://milonic.com/menusample29.php;")
aI("text=Chart;url=http://milonic.com/menusample66.php;")
aI("text=Cartoon;url=http://milonic.com/menusample77.php;")
aI("text=Start Button Menu;url=http://milonic.com/menusample69.php;")
aI("text=Tramline;url=http://milonic.com/menusample54.php;")

}

with(milonic=new menuname("Sample my milonic")){
margin=3;
style=vertStyle;
top="offset=2";
aI("text=View/Edit My Details;url=/mydetails.php;");
aI("text=Change My Password;url=/changepw.php;");
aI("text=My Licenses;url=/mylicenses.php;");
aI("text=My Invoices;url=/myinvoices.php;");
aI("text=Pay My Invoices;url=/paymyinvoices.php;");
aI("text=My Discounts;url=/mydiscounts.php;");
aI("text=Purchase a new license;url=/purnewlicense.php;");
aI("text=My Orders;url=/myorders.php;");
}

with(milonic=new menuname("Sample search")){
margin=3;
style=vertStyle;
top="offset=2";
aI("text=SEARCH;");
}

with(milonic=new menuname("Sample products")){
margin=3;
style=vertStyle;
top="offset=2";
aI("image=18_purchase.gif;text=Product Pricing & Purchasing;url=/pricing.php;");
aI("text=SCombo;url=/scombo/index.php;");
aI("text=Tooltips (Coming Soon);url=/tooltips.php;");
aI("image=18_color.gif;text=Color Picker;url=/colorpicker.php;");
aI("image=calendar.gif;text=Date Picker/Calendar;url=/datepicker.php;");
aI("showmenu=Sample tools;text=Free Tools;");
}

with(milonic=new menuname("Sample tools")){
margin=3;
style=vertStyle;
aI("image=18_compress.gif;text=JavaScript Compressor;url=/jscompactor.php;");
aI("image=18_probe.gif;text=Web Server Probe;url=/probe.php;");
aI("image=18_whois.gif;text=Whois Domain Name Lookup;url=/whois.php;");
}

drawMenus();

Post by **Ruth** » Thu Oct 19, 2006 5:21 pm

Hi,

You have the original main menu which is in the downloaded file in the table set to position relative, but in your data file you have a 'Sample mainmenu' set to top and left position of 10.

Ruth

getalab · Post by **getalab** » Thu Oct 19, 2006 5:26 pm

So would I need to comment out the LEFT and RIGHT portion in the menu_data file, and I assume change the name of the file in the HTML to include the "sample" portion?

Post by **Ruth** » Thu Oct 19, 2006 6:21 pm

Hi,

You have both the one in the table and the Sample mainmenu set as alwaysvisible menus. In other words you have two main menus set up. If you are using the one in the table, just remove the Sample mainmenu from the data file. I'm not sure where that came from, it's not in the basic download.

Ruth

vikenk · Post by **vikenk** » Thu Oct 19, 2006 6:27 pm

getalab wrote:So would I need to comment out the LEFT and RIGHT portion in the menu_data file, and I assume change the name of the file in the HTML to include the "sample" portion?

Hi,

No, you would need to remove it all. When positioning the menu in a table, the Main Menu portion should be removed from the menu_data.js file and put in the table cell. The menu_data.js file should only contain the submenus.

You're on the right track, you just need to remove the referece to the Sample Menu completely. In this case, it seems to be superimposed over your table menu.

Hope this helps.

getalab · Post by **getalab** » Thu Oct 19, 2006 8:18 pm

Thanks for the replies. I appreciate the help (.NET child now living in a JS world, and a lot of catching up to do).

I've edited my menu_data.js file so that the following is removed:

with(milonic=new menuname("Sample mainmenu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Home;title=Back to Home Page;url=/;");
aI("showmenu=Sample about;text=About Us;");
aI("showmenu=Sample dhtml menu;text=Services;");
aI("showmenu=Sample products;text=Products;");
aI("showmenu=Sample support menu;text=Support;");
aI("showmenu=Sample my milonic;text=Forum;url=mymilonic.php;");
aI("showmenu=Sample search;text=Search;url=/search.php;");
}

I save that file, and place the main menu portion into a table:

<table border="1" width="100%" id="table1">
<tr>
<td width="230">
<img border="0" src="image1.png" width="229" height="223">
</td>
<td>
<script>
with(milonic=new menuname("Sample mainmenu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Home;title=Back to Home Page;url=/;");
aI("showmenu=Sample about;text=About Us;");
aI("showmenu=Sample dhtml menu;text=Services;");
aI("showmenu=Sample products;text=Products;");
aI("showmenu=Sample support menu;text=Support;");
aI("showmenu=Sample my milonic;text=Forum;url=mymilonic.php;");
aI("showmenu=Sample search;text=Search;url=/search.php;");
}
</script>
</td>
</tr>
</table>

Once this is performed, I browse my site in IE 6. I can see my image, the outside border of the table and the cell that the image is in, but I do not see the border for the cell the menu is in, nor do I see the menu itself.

Do you feel the "sample" portion is keeping this from working properly?

vikenk · Post by **vikenk** » Thu Oct 19, 2006 8:27 pm

At this point you need to supply us a link so we can se what's going on. But, I did detect that you're missing one thing. You need to add "drawMenus();" to the script in the table cell, so I should look like this:

Code: Select all

<script type="text/javascript">
with(milonic=new menuname("Sample mainmenu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Home;title=Back to Home Page;url=/;");
aI("showmenu=Sample about;text=About Us;");
aI("showmenu=Sample dhtml menu;text=Services;");
aI("showmenu=Sample products;text=Products;");
aI("showmenu=Sample support menu;text=Support;");
aI("showmenu=Sample my milonic;text=Forum;url=mymilonic.php;");
aI("showmenu=Sample search;text=Search;url=/search.php;");
}

drawMenus();
</script>

Give that a try.

getalab · Post by **getalab** » Thu Oct 19, 2006 9:24 pm

Thanks, I did put back the 'drawMenus' portion, but still to no luck displaying the menu. I've posted a test page with a joke image.

http://www.southernflighthrc.com/miloni ... t_page.asp

I noticed in the IE lower left corner, an error stating 'menuStyle' is undefined:

style=menuStyle;

which I can only assume is referenced to:

<script type="text/javascript">
with(milonic=new menuname("Sample mainmenu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Home;title=Back to Home Page;url=/;");
aI("showmenu=Sample about;text=About Us;");
aI("showmenu=Sample dhtml menu;text=Services;");
aI("showmenu=Sample products;text=Products;");
aI("showmenu=Sample support menu;text=Support;");
aI("showmenu=Sample my milonic;text=Forum;url=mymilonic.php;");
aI("showmenu=Sample search;text=Search;url=/search.php;");
}

drawMenus();
</script>

so it appears that I do not see the menu because of an undeclared variable maybe?

getalab · Post by **getalab** » Thu Oct 19, 2006 9:31 pm

wow, it has become painfully obvious to me WHY the menu does not display.... it is because 'menuStyle' is not a portion of the menu_data.js file. I have a 'horizStyle' portion, though. So, when i add a portion for 'menuStyle', the menu displays.... imagine that

Thanks for all the help everyone.

Milonic JavaScript Menu

Trouble using menu in HTML Table

Trouble using menu in HTML Table

menu

Re: menu

Menu

menu

menu