/    Sign up×
Community /Pin to ProfileBookmark

Center JS Dropdowns?

Hello, newbie here (apologies in advance, please be nice to me 😮 ).

I have a js menu I’m trying to center on the page relative to the width of the browser window. I’m able to move the menu, no problem, but I want it to center in the page, not have a fixed position from the left. The code is below…

This is probably the easiest thing in the work, but I need help. Any ideas?

Script to follow …


_____________________________________________

/* global nav and menu data */

var nav_menuText = new Array();
var nav_menuURLs = new Array();
var nav_menuTops = new Array();
var nav_menuObjs = new Array();
var nav_alumni = new Array();
var nav_menuNames = new Array(‘AboutParthenon’,’OurClientsAndOurWork’,’OurPeople’,’Careers’);
var nav_menuAltTags = new Array(‘About Parthenon’,’Our Clients’,’Our People’,’Careers’);

// menu text and URLs – for a blank space insert (”) for the text and the coresponding URL
nav_menuText[‘AboutParthenon’] = new Array(‘From the Chairman’,’Snapshot’,’Philosophy’,’In The News’,’History’,’Approach to Philanthropy’,’Offices’);
nav_menuURLs[‘AboutParthenon’] = new Array(‘default.asp’,’snapshot.asp’,’philosophy.asp’,’inTheNews.asp’,’history.asp’,’approachToPhilanthropy/’,’Offices/’);
nav_menuText[‘AboutParthenon’][‘Offices’] = new Array(‘Boston’,’London’,’Mumbai’,’San Francisco’);
nav_menuURLs[‘AboutParthenon’][‘Offices’] = new Array(”,”,’/AboutParthenon/offices/mumbai/default.asp’,”);

nav_menuText[‘OurClientsAndOurWork’] = new Array(‘Overview’,’Corporate Advisory’,’Private Equity’,’Education’,’Healthcare’,’Non-Profit’,’Case Studies’,’Intellectual Capital’);
nav_menuURLs[‘OurClientsAndOurWork’] = new Array(‘default.asp’,’corporateAdvisory.asp’,’privateEquity/’,’education/’,’healthcare/’,’nonProfit/’,’caseStudies/’,’intellectualCapital/’);

nav_menuText[‘OurPeople’] = new Array(‘What Our Clients Say’,’Firm Leadership’,’Member Profiles’,’Alumni’);
nav_menuURLs[‘OurPeople’] = new Array(‘default.asp’,’firmLeadership.asp’,’MemberProfiles/’,’/Alumni/’);

nav_menuText[‘Careers’] = new Array(‘Overview’,’Why Parthenon?’,’Undergraduate’,’MBA Candidates’,’Experienced Professional’, ‘Application Process’);
nav_menuURLs[‘Careers’] = new Array(‘default.asp’,’whyParthenon.asp’,’undergraduate/’,’mbaCandidates/’,’experiencedProfessional/’,’applicationProcess/’);

//menu settings
var nav_menuWidth = 195; //width of drop down
var nav_menuTextInset = 8;
var nav_menuRowHeight = 24;

// Menu style and behavior
var nav_menuTextClass = “menu”;// CSS selector for menu text
var nav_menuHighlightColor = “#a1a1a1”;// Rollover color (IE4+,NS6 only)
var nav_nsMenuBgColor = “#515050”;// Netscape menu background color
var nav_menuBgImage = nav_imgPath + “menu-BG.gif”;// bg image for menus
var nav_ie4HighlightImage = nav_imgPath + “menu-HiLite.gif”;// bg image for highlighted menus in ie4
var nav_menuInterval = 50;// Delay for mouseover|mouseout events

/* nav and menu settings */
// Naming for nav elements
var nav_navDivPrefix = “global”;
var nav_navDivId = nav_navDivPrefix + “Div”;// NAME of global nav DIV

// Dimensions for primary navigation elements.
var nav_navButtonHeight = 24;
var nav_navButtonWidth = new Array(128,186,94,70);// individual button widths in global nav
var nav_navTotalWidth = 498;
var nav_navTopEdge = 131;//for global nav position on home page
var sec_navTopEdge = 131;//for global nav position on section pages
var nav_navLeftEdge = 0;
var nav_navRightEdge = nav_navLeftEdge + nav_navTotalWidth;

// Menu positions relative to nav
var nav_menuLeftEdge = nav_navLeftEdge;
var nav_menuTop = nav_navTopEdge + nav_navButtonHeight;
var sec_menuTop = sec_navTopEdge + nav_navButtonHeight;

// Initialize all images for primary nav rollovers
for (var i = 0; i < nav_menuNames.length; i++) {
imgName = nav_menuNames[i];
imgNormal = nav_imgPath + nav_menuNames[i] + “1.gif”;
imgActive = nav_imgPath + nav_menuNames[i] + “2.gif”;
imgCurrent = nav_imgPath + nav_menuNames[i] + “2.gif”;
imgSwapInit(imgName,imgActive,imgNormal,imgCurrent);
}

// Javascript code that writes out the DIV contining the global nav

nav_ready = false;

// BEGIN PRIMARY NAVIGATION TABLE
document.write(‘<div id=”‘ + nav_navDivPrefix + ‘Div”><table border=”0″ cellspacing=”0″ cellpadding=”0″>n<tr>n’);

for (var i = 0; i < nav_menuNames.length; i++) {// write out code for menu image
if (whichMenu==’Alumni’) {
whichMenu=”;
}
if (nav_menuNames[i]==whichMenu) {
document.write(‘<td><a href=”/’ + nav_menuNames[i] + ‘/” onMouseOver=”setRolloverTimer(” + nav_menuNames[i] + ”, whichMenu);” onMouseOut=”setRolloffTimer(” + nav_menuNames[i] + ”, whichMenu);”><img name=”‘ + nav_menuNames[i] + ‘” alt=”” src=”‘ + nav_imgPath + nav_menuNames[i] + ‘2.gif” height=”‘ + nav_navButtonHeight + ‘” alt=”‘ + nav_menuAltTags[i] + ‘” border=”0″ /></a></td>n’);
} else {
document.write(‘<td><a href=”/’ + nav_menuNames[i] + ‘/” onMouseOver=”setRolloverTimer(” + nav_menuNames[i] + ”, whichMenu);” onMouseOut=”setRolloffTimer(” + nav_menuNames[i] + ”, whichMenu);”><img name=”‘ + nav_menuNames[i] + ‘” alt=”” src=”‘ + nav_imgPath + nav_menuNames[i] + ‘1.gif” height=”‘ + nav_navButtonHeight + ‘” alt=”‘ + nav_menuAltTags[i] + ‘” border=”0″ /></a></td>n’);
}
if (i != nav_menuNames.length – 1) {
document.write(‘<td><img src=”/images-common/Pixel-LightGray.gif” alt=”” width=”1″ height=”24″ border=”0″ /></td>’);
} else { continue; }
}

document.write(‘</tr></table>n</div>n’);
// END PRIMARY NAVIGATION TABLE

// BEGIN CODE TO GENERATE MENUS
for (var i = 0; i < nav_menuNames.length; i++) {
var menuName = nav_menuNames[i];
document.write(nav_menuObjs[menuName].div);

}
// END CODE TO GENERATE MENUS

objects = document.getElementsByTagName(“object”);
for (var i = 0; i < objects.length; i++)
{
objects[i].outerHTML = objects[i].outerHTML;
}

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@HoboScriptJul 30.2008 — ummm in the css

#globalDiv {

margin: 0px auto;

width: 100%;

}
Copy linkTweet thisAlerts:
@Joe_55258authorJul 30.2008 — Thank you HoboScript. I realized I did not include all the relevant script above. My CSS looks like l what I've pasted below. I'm just not sure what to change to produce the results I need. Basically, I have a menu that I would like to center in the browser, but I seem to be lost in pages of script and the code is not as simple (or easily editable) for someone with my (lacking) skillset ? I can center the menu, but the drop downs always pop up on the left of the page. If you can offer any additional advice ...

THANK YOU for looking.

// CSS Function

function css(id,left,top,width,height,color,vis,z,other) {

if (id=="START") return '<STYLE TYPE="text/css">n'
else if (id=="END") return '</STYLE>'
var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:' + left + 'px;' + ' top:'+top+'px;' : '#'+id+' {position:relative;'
if (arguments.length>=4 && width!=null) str += ' width:'+width+'px;'
if (arguments.length>=5 && height!=null) {
str += ' height:'+height+'px;'
if (arguments.length<9 || other.indexOf('clip')==-1) str += ' clip:rect(0px '+width+'px '+height+'px 0px);'
}
if (arguments.length>=6 && color!=null) str += (is.ns)? ' layer-background-color:'+color+';' : ' background-color:'+color+';'
if (arguments.length>=7 && vis!=null) str += ' visibility:'+vis+';'
if (arguments.length>=8 && z!=null) str += ' z-index:'+z+';'
if (arguments.length==9 && other!=null) str += ' '+other
str += '}n'
return str

}

function writeCSS(str,showAlert) {

str = css('START')+str+css('END')

document.write(str)

}

// Set the background color of a DIV

function DynLayerSetbg(color) {

if (is.ns) this.doc.bgColor = color

else if (is.ie) this.css.backgroundColor = color

}

function getStyle(el,styleProp)

{

var x = document.getElementById(el);

if (document.defaultView)

var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);

else if (x.currentStyle)

var y = eval('x.currentStyle.' + styleProp);

return parseInt(y);

}
×

Success!

Help @Joe_55258 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...