Web Hosting Talk






PDA

View Full Version : Help with menu centralization!

beachcompcom
08-05-2004, 08:31 PM
Hi all,

Trying to come up with a new nav system for our site.
I have decided to use rollovers and ypSlideOutMenus.
Works like a charm and everything lines up... in full screen!
If a page is shrunk, moved, or not full screen, the menu doesnt show up in the right place.
The buttons are fine, but the menu that should roll off is not in the right place.

The test page is at http://www.beachcomp.com/menu_test.asp

The page builds an initial table, then calls on menu.asp

The code for menu.asp is as follows:


<html>

<head>
<!-------------------Menu head code--------------------->
<script language="javascript" src="http://www.beachcomp.com/Navigation/ypSlideOutMenus_subs.js"></script>
<!-------------------Menu head code--------------------->
<!-------------------Roll over head code--------------------->
<script language="javascript" src="http://www.beachcomp.com/Navigation/RollOver.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-------------------Roll over head code--------------------->
<link href="http://www.beachcomp.com/Navigation/Navigation_style.css" rel="stylesheet" type="text/css">
</head>

<body onload="MM_preloadImages('http://www.beachcomp.com/images/Menu/menu_hosting_solutions.gif','http://www.beachcomp.com/images/Menu/menu_company_information.gif')">

<tr>
<td bgcolor="#336699" width="712">
<p align="center">
<img alt="Beach Computers,web hosting,dedicated servers,dedicated hosting,web page hosting,dedicated web hosting,web design,ecommerce web hosting,web hosting provider,internet web hosting,domain hosting,domain name registration,domain names,cheap web hosting" src="../../../images/beachlogo.gif" border="0" alt="Logo"></p>
</td>
<td bgcolor="#336699" align="right" width="9">&nbsp;</td>
</tr>
<tr>
<td>
<!----------menu------------------>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="712" id="AutoNumber1" background="http://www.beachcomp.com/images/beachcomp_menu_bg.gif">
<tr width="100%">
<td height="32" background="http://www.beachcomp.com/images/beachcomp_menu_bg.gif" align="center">
<a href="http://www.beachcomp.com/secure_link.htm">
<img src="http://www.beachcomp.com/images/Menu/menu_sign_up.gif" alt="Sign Up For Web Hosting Services" border="0"></a></td>
<td height="32" background="http://www.beachcomp.com/images/beachcomp_menu_bg.gif" align="center">
<a href="http://www.beachcomp.com/">
<img src="http://www.beachcomp.com/images/Menu/menu_home.gif" alt="Go To The Beach Computers Home Page" border="0"></a></td>
<td height="32" background="http://www.beachcomp.com/images/beachcomp_menu_bg.gif" align="center">
<a href="javascript:;" onmouseout="MM_swapImgRestore();ypSlideOutMenu.hideMenu('menu1')" onmouseover="MM_swapImage('Hosting_Solutions','','http://www.beachcomp.com/images/Menu/menu_hosting_solutions.gif',1);ypSlideOutMenu.showMenu('menu1')">
<img src="http://www.beachcomp.com/images/Menu/menu_hosting_solutions.gif" name="Hosting_Solutions" border="0"></a></td>
<td height="32" background="http://www.beachcomp.com/images/beachcomp_menu_bg.gif" align="center">
<a href="javascript:;" onmouseout="MM_swapImgRestore();ypSlideOutMenu.hideMenu('menu2')" onmouseover="MM_swapImage('Company_Information','','http://www.beachcomp.com/images/Menu/menu_company_information.gif',1);ypSlideOutMenu.showMenu('menu2')">
<img src="http://www.beachcomp.com/images/Menu/menu_company_information.gif" name="Company_Information" border="0"></a></td>
<td height="32" background="http://www.beachcomp.com/images/beachcomp_menu_bg.gif" align="center">
<a href="javascript:;" onmouseout="MM_swapImgRestore();ypSlideOutMenu.hideMenu('menu3')" onmouseover="MM_swapImage('Network_Information','','http://www.beachcomp.com/images/Menu/menu_network_info.gif',1);ypSlideOutMenu.showMenu('menu3')">
<img src="http://www.beachcomp.com/images/Menu/menu_network_info.gif" name="Network_Information" border="0"></a></td>
<td height="32" background="http://www.beachcomp.com/images/beachcomp_menu_bg.gif" align="center">
<a href="javascript:;" onmouseout="MM_swapImgRestore();ypSlideOutMenu.hideMenu('menu4')" onmouseover="MM_swapImage('Value_Added_Services','','http://www.beachcomp.com/images/Menu/menu_var.gif',1);ypSlideOutMenu.showMenu('menu4')">
<img src="http://www.beachcomp.com/images/Menu/menu_var.gif" name="Value_Added_Services" border="0"></a></td>
<td height="32" background="http://www.beachcomp.com/images/beachcomp_menu_bg.gif" align="center">
<a href="javascript:;" onmouseout="MM_swapImgRestore();ypSlideOutMenu.hideMenu('menu5')" onmouseover="MM_swapImage('Technical_Support','','http://www.beachcomp.com/images/Menu/menu_tech_support.gif',1);ypSlideOutMenu.showMenu('menu5')">
<img src="http://www.beachcomp.com/images/Menu/menu_tech_support.gif" name="Technical_Support" border="0"></a></td>
<td height="32" background="http://www.beachcomp.com/images/beachcomp_menu_bg.gif" align="center">
<a href="http://www.beachcomp.com/contact.asp">
<img src="http://www.beachcomp.com/images/Menu/menu_contact_us.gif" alt="Contact Beach Computers Web Hosting" border="0"></a></td>
</tr>
</table>
</td>
<td bgcolor="#336699" align="right" width="9">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" width="712"></td>
<td bgcolor="#336699" align="right" width="9">&nbsp;</td>
</tr>
<!----------menu------------------>
<!-- M E N U I T E M S -->
<div id="menu1Container">
<div id="menu1Content" class="sub1">
<div class="options">
<a href="http://www.beachcomp.com/Plans.asp" class="whitelink">Hosting
Plans</a>
<a href="http://www.beachcomp.com/Promotions.asp" class="whitelink">
Current Promotions</a>
<a href="http://www.beachcomp.com/Referral.asp" class="whitelink">Referral
Program</a>
<a href="http://www.beachcomp.com/Reseller/Index.asp" class="whitelink">
Reseller Program </div>
</div>
</div>
<div id="menu2Container">
<div id="menu2Content" class="sub1">
<div class="options">
</a>
<a href="http://www.beachcomp.com/About/Default.asp" class="whitelink">
About Beach Computers</a>
<a href="http://www.beachcomp.com/About/Press_Releases.asp" class="whitelink">
Press Releases</a>
<a href="http://www.beachcomp.com/President_Message.asp" class="whitelink">
President's Message</a> </div>
</div>
</div>
<div id="menu3Container">
<div id="menu3Content" class="sub1">
<div class="options">
<a href="http://www.beachcomp.com/network.asp" class="whitelink">Network
and Datacenter</a>
<a href="http://www.beachcomp.com/networkstatus_main.asp" class="whitelink">
Current Network Status</a> </div>
</div>
</div>
<div id="menu4Container">
<div id="menu4Content" class="sub1">
<div class="options">
<a href="http://www.beachcomp.com/domainreg.asp" class="whitelink">Domain
Name Registrations</a>
<a href="http://www.beachcomp.com/merchant_accounts.htm" class="whitelink">
Merchant Accounts</a> </div>
</div>
</div>
<div id="menu5Container">
<div id="menu5Content" class="sub1">
<div class="options">
<a href="http://www.beachcomp.com/support/FAQ.asp" class="whitelink">
Frequently Asked Questions</a>
<a href="http://www.beachcomp.com/support/Email_Issues.asp" class="whitelink">
Common E-mail Issues</a>
<a href="http://helpdesk.beachcomp.com" class="whitelink">Support Helpdesk</a>
<a href="http://www.beachcomp.com/support/Users_Guide.asp" class="whitelink">
Online Users Guide</a>
<a href="javascript:;" class="whitelink" onmouseover="ypSlideOutMenu.showMenu('menu5a')" onmouseout="ypSlideOutMenu.hideMenu('menu5a')">
+ How To Topics</a>
<a href="javascript:;" class="whitelink" onmouseover="ypSlideOutMenu.showMenu('menu5b')" onmouseout="ypSlideOutMenu.hideMenu('menu5b')">
+ Account Management</a>
</div>
</div>
</div>
<div id="menu5aContainer">
<div id="menu5aContent" class="sub1">
<div class="options">
<a href="http://www.beachcomp.com/Support/ASP.asp" class="whitelink">ASP</a>
<a href="http://www.beachcomp.com/Support/Color_Chart.asp" class="whitelink">ASCII Color Chart</a>
<a href="http://www.beachcomp.com/Support/CGI-PERL.asp" class="whitelink">CGI & PERL</a>
<a href="http://www.beachcomp.com/Support/CHMOD.asp" class="whitelink">CHMOD and Permissions</a>
<a href="http://www.beachcomp.com/Support/DNS_Transfer.asp" class="whitelink">DNS
Transfer Information</a>
<a href="http://www.beachcomp.com/Support/DreamWeaver.asp" class="whitelink">Dream Weaver Setup</a>
<a href="http://www.beachcomp.com/Support/Email_Setup.asp" class="whitelink">How To Setup E-mail</a>
<a href="http://www.beachcomp.com/Support/Email_Basics.asp" class="whitelink">E-mail Basics</a>
<a href="http://www.beachcomp.com/Support/FromMail.asp" class="whitelink">Form Mail</a>
<a href="http://www.beachcomp.com/Support/FTP.asp" class="whitelink">FTP Setup Directions</a>
<a href="http://www.beachcomp.com/Support/FTP-Codes.asp" class="whitelink">FTP Response Codes</a>
<a href="http://www.beachcomp.com/Support/JavaScript.asp" class="whitelink">JavaScript</a>
<a href="http://www.beachcomp.com/Support/FrontPage.asp" class="whitelink">Microsoft FrontPage</a>
<a href="http://www.beachcomp.com/Support/PHP.asp" class="whitelink">PHP</a>
<a href="http://www.beachcomp.com/Support/POP-SMTP.asp" class="whitelink">POP & SMTP Response Codes</a>
<a href="http://www.beachcomp.com/Support/Spam_protection.asp" class="whitelink">Setting Up Advanced Spam Protection</a>
<a href="http://www.beachcomp.com/Support/SQL_Server.asp" class="whitelink">SQL Server Setup</a>
</div>
</div>
</div>
<div id="menu5bContainer">
<div id="menu5bContent" class="sub1">
<div class="options">
<a href="http://www.beachcomp.com/Account_Management/index.asp" class="whitelink">Account Management Home</a>
<a href="http://www.beachcomp.com/Account_Management/check%20email.htm" class="whitelink">Web Mail Login</a>
<a href="http://www.beachcomp.com/Account_Management/cpl.htm" class="whitelink">Control Panel Login</a>
<a href="http://www.beachcomp.com/Account_Management/stats.htm" class="whitelink">Statistics Server Login</a>
<a href="https://www.beachcomp.com/Secured/Change_Billing.asp" class="whitelink">Change Billing Information</a>
<a href="http://www.beachcomp.com/Account_Management/Cancel_Account.htm" class="whitelink">Cancel Account</a>
</div>
</div>
</div>
</div>

</body>


</html>



The code in Rollover.js is:

// JavaScript Document

<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

//MENU OPTIONS

// the number you pass to initLeft doesn't matter since it will get
// changed onactivate
//,x,how far from top 0-???, Width, Height
var myMenu1 = new ypSlideOutMenu("menu1", "down", -1000, 118, 134, 77)
var myMenu2 = new ypSlideOutMenu("menu2", "down", -1000, 118, 160, 61)
var myMenu3 = new ypSlideOutMenu("menu3", "down", -1000, 118, 162, 41)
var myMenu4 = new ypSlideOutMenu("menu4", "down", -1000, 118, 181, 41)
var myMenu5 = new ypSlideOutMenu("menu5", "down", -1000, 118, 183, 117.5, null)
var myMenu5a = new ypSlideOutMenu("menu5a", "left", -1000, 199, 240, 326, "menu5")
var myMenu5b = new ypSlideOutMenu("menu5b", "left", -1000, 219, 182, 117, "menu5")
// for each menu, we set up hte onactivate event to call repositionMenu with the amount offset from center, in pixels
myMenu1.onactivate = function() { repositionMenu(myMenu1, -547); }
myMenu2.onactivate = function() { repositionMenu(myMenu2, -445); }
myMenu3.onactivate = function() { repositionMenu(myMenu3, -327); }
myMenu4.onactivate = function() { repositionMenu(myMenu4, -213); }
myMenu5.onactivate = function() { repositionMenu(myMenu5, -88); }
myMenu5a.onactivate = function() { repositionMenu(myMenu5a, -328); }
myMenu5b.onactivate = function() { repositionMenu(myMenu5b, -270); }
// this function repositions a menu to the speicified offset from center
function repositionMenu(menu, offset)
{
// the new left position should be the center of the window + the offset
var newLeft = getWindowWidth() / 2 + offset;

// setting the left position in netscape is a little different than IE
menu.container.style ? menu.container.style.left = newLeft + "px" : menu.container.left = newLeft;
}

// this function calculates the window's width - different for IE and netscape
function getWindowWidth()
{
return window.innerWidth ? window.innerWidth : document.body.offsetWidth;
}

//-->


Any idea how I can get the sub menus to show up in lin no matter what the broswer position?

Thanks for your help!
the_pm
08-05-2004, 10:48 PM
It seems to me your problems are much bigger than you imagined! Here's a screenshot of what I'm seeing: http://www.plhmedia.com/ex/mush.gif

You may want to take a look at this article from Eric Meyer - http://meyerweb.com/eric/css/edge/menus/demo.html - it details a CSS-only approach to creating expandable menus. You'll also want to run your current code through a validator, and perhaps a CSS lint to make sure everything is squared away properly. By the looks of things, you're struggling a bit in the validation department :)

See if that doesn't clear things up for you a little!
beachcompcom
08-06-2004, 01:57 AM
Oh my god!
Is that in Netscape?!
As for the CSS.. now Im even more confused.
The only CSS the script uses is to determine the colors for the boxes.
What.. oh what am I doing wrong?!
bhanson
08-06-2004, 02:23 AM
He's using Opera. A very good web browser. Stay away from stuff that only works in one browser.
beachcompcom
08-06-2004, 02:26 AM
ah
tested IE, Firefox and netscape.. not opera
Christina
08-06-2004, 04:51 AM
Yeah, in Opera, I see some very funky things happening!! Maybe try something a little safer.

Try this:

http://www.acmebase.org/menu/AcmeMenu.htm#dropdown_menus
Weavil
08-06-2004, 01:01 PM
From my experience, drop down menus don't work very well in tables. I had a similar drop down menu like yours and when I took it out of a table it worked fine.
vglayouts
08-06-2004, 01:47 PM
It seems to be working fine for me...?