View Full Version : auto centering menubar

01-04-2004, 02:05 PM
Hi, I'm having a small problem with a menu bar I'm working on. It does not automatically centre itself when the browser window size is increased/decreased by dragging. The menu bar will only reposition itself automatically in the centre of the window if the browser is refreshed or another page is selected.
Not a major problem, but an annoying one!
Can anyone shed any light on this please?


PS, not sure how much code is needed, so I put it all in below.

color: white;
font: 8pt Verdana,sans-serif;
text-decoration: none;
.menu a:hover{
color: #ffffff;
.trigger th{
color: white;
font: 7pt Verdana,sans-serif;
font: 8pt Verdana, sans-serif;
color: bfbfbf;
background-color: #bfbfbf;
position: absolute;
padding: 2px;
height: 15;
z-index: 2;
cursor: pointer;
cursor: hand;
font: 7pt Verdana, sans-serif;
color: white;
background-color: #bfbfbf;
position: absolute;
top: 90;
padding: 2px;
visibility: hidden;
z-index: 4;
background-color: #bfbfbf;
position: absolute;
align: center;
top: 0;
left: 0;
width: 100%;
height: 15;
z-index: 1;
padding: 2px;

<SCRIPT language=JavaScript>

function menuItem(text, link){
this.text = text;
this.link = link;
function menuTrigger(name, text){
this.name = name;
this.text = text;
function menu(){
var itemArray = new Array();
var args = menu.arguments;
this.name = args[0];
this.trigger = args[1];
for(i=2; i<args.length; i++){
itemArray[i-2] = args[i];
this.menuItems = itemArray;
this.write = writeMenu;
this.position = positionMenu;
function writeMenu(){
var menuText = '<div id="';
menuText += this.trigger.name;
menuText += '" class="trigger" style="top: ';
menuText += this.top;
menuText += '; left: ';
menuText += this.left;
menuText += ';"';
menuText += 'onMouseOver="showMenu(\'';
menuText += this.name;
menuText += '\')" onMouseOut="showMenu(mnuSelected)">';
menuText += '<table border="0" width="' + this.width + '">';
menuText += '<tr><th align=\"left\">' + this.trigger.text + '</th></tr></table></div>';
menuText += '<div id="';
menuText += this.name;
menuText += '" class="menu" style="top: ';
menuText += (this.top+27); // (this.top+23);
menuText += ';left: ';
menuText += this.left;
menuText += ';" '
menuText += 'onMouseOver="showMenu(mnuSelected)" ';
menuText += 'onMouseOut="hideMenu(mnuSelected)">';
menuText += '<table border="0" width="' + this.width + '">';
for(i=0; i<this.menuItems.length; i++){
menuText += '<tr>';
menuText += '<td onMouseOver="this.style.backgroundColor = \'#43515E\'" onMouseOut="this.style.backgroundColor = \'\'">';
menuText += '<a href="' + this.menuItems[i].link + '">';
menuText += this.menuItems[i].text + '</a></td>';
menuText += '</tr>';
menuText += '</table></div>';
function positionMenu(top,left,width){
this.top = top;
this.left = left;
this.width = width;

var mnuSelected = '';
function showMenu(menu){
document.getElementById(menu).style.visibility = 'visible';
mnuSelected = menu;
function hideMenu(menu){
document.getElementById(menu).style.visibility = 'hidden';

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];}}

<TABLE cellSpacing=0 cellPadding=0 width=758 border=0>
<TD vAlign=top height=30>
<DIV class=menuBar id=menuBar
style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; LEFT: 0px; VISIBILITY: visible; OVERFLOW: visible; BORDER-LEFT: #000000 1px; WIDTH: 758x; BORDER-BOTTOM: #000000 1px; TOP: 85px; HEIGHT: 34px; layer-background-color: #cccccc"></DIV>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<DIV align=left>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TD width="49%">&nbsp;</TD>
<TD width="49%">&nbsp;</TD>
<TD width="2%">
<DIV align=right><a href="index.htm"><IMG
src="images/logo.jpg" width="267" height="70" border="0"></a></DIV></TD></TR></TBODY></TABLE></DIV></TD>
<DIV align=right></DIV></TD></TR></TBODY></TABLE>
<P align=right>
<SCRIPT language=JavaScript>

var startLeft;

aWidth = document.body.clientWidth;
document.getElementById('menuBar').style.left = (aWidth/2)-379;
startLeft = (aWidth/2)-379;
aWidth = innerWidth;
document.getElementById('menuBar').style.left = (aWidth/2)-200;
startLeft = (aWidth/2)-200;

var mnuAbout = new menu('mnuAbout',new menuTrigger('trgabout','HOMEPAGE'),new menuItem('- Home','index.htm'));
var mnuATPL = new menu('mnuATPL',new menuTrigger('trgATPL','THE ATPL COURSE'), new menuItem('- Course Structure','structure.htm'),new menuItem('- Integrated Learning System','learning.htm'),new menuItem('- Computer Based Training','cbt.htm'),new menuItem('- Animations','animations.htm'),new menuItem('- Progress Tests','progress.htm'),new menuItem('- Revision Courses','revision.htm'));
var mnuLicence = new menu('mnuLicence',new menuTrigger('trgLicence','LICENCE REQUIREMENTS'),new menuItem('- The JAA ATPL','atpl.htm'),new menuItem('- First Professional Licence','licence.htm'),new menuItem('- CPL Conversions','cplconversions.htm'),new menuItem('- ATPL Conversions','atplconversions.htm'),new menuItem('- Military Pilots','military.htm'));
var mnuPartners = new menu('mnuPartners',new menuTrigger('trgPartners','INTERNATIONAL PARTNERS'),new menuItem('- Information','partners.htm'),new menuItem('- Belgium','belgium.htm'),new menuItem('- Estonia','estonia.htm'),new menuItem('- Finland','finland.htm'),new menuItem('- Ireland','ireland.htm'),new menuItem('- Netherlands','netherlands.htm'));
var mnuHelicopters = new menu('mnuHelicopters',new menuTrigger('trgHelicopters','HELICOPTERS'),new menuItem('- Information','helicopters.htm'));
var mnuPrices = new menu('mnuPrices',new menuTrigger('trgPrices','PRICES AND COURSE DATES'),new menuItem('- Information','prices.htm'));
var mnuSupport = new menu('mnuSupport',new menuTrigger('trgSupport','SUPPORT'),new menuItem('- Contact Us','contact.htm'),new menuItem('- Forum','forum.htm'),new menuItem('- Accommodation','accommodation.htm'),new menuItem('- Links','links.htm'));