[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
Tips: Javascript: Pulldown Menu

To: Terrence Miao <terrence@xxxxxxxxxxxxxxxxxxxxxxxx>
Subject: Tips: Javascript: Pulldown Menu
From: Terrence Miao <terrence_miao@xxxxxxxxx>
Date: Fri, 17 Mar 2000 14:21:14 +1100
Javascript: Pulldown Menu <http://peakhour.com.au/home/default.asp>


peakMENU1 = new Array (
	140,20,
	"#003366","#FFFFFF","#99CCFF",  // color, bgcolor, hicolor
	"Arial",1,
	"#6699CC",2,
	"Peakhour packages", "../products/options.asp",
	"&nbsp;&nbsp;&nbsp;&nbsp;Peak FreeStart", "../products/start.asp",
	"&nbsp;&nbsp;&nbsp;&nbsp;PeakEssentials", "../products/essentials.asp",
	"&nbsp;&nbsp;&nbsp;&nbsp;PeakBusiness", "../products/business.asp",
	"PeakAccess", "../products/access.asp",
	"Domain names", "../products/domain.asp",
	"Protected file space", "../products/protected.asp",
	"Coming soon", "../products/coming.asp"
);

peakMENU2 = new Array (
	150,20,
	"#996600","#FFFFFF","#FFCC66",  // color, bgcolor, hicolor
	"Arial",1,
	"#FFCC66",2,
	"Overview", "../howdoI/overview.asp",
	"Build my website", "../howdoI/planning.asp",
	"Host my website", "../howdoI/host.asp",
	"Enhance my website", "../howdoI/enhance.asp",
	"Promote my website", "../howdoI/promote.asp",
	"Sell from my website", "../howdoI/sell.asp"
);

peakMENU3 = new Array (
	140,20,
	"#003333","#FFFFFF","#66CCCC",  // color, bgcolor, hicolor
	"Arial",1,
	"#339999",2,
	"News", "../news/default.asp",
	"Business links", "../news/business.asp",
	"Guides", "../news/guides.asp"
);

peakMENU4 = new Array (
	140,20,
	"#660000","#FFFFFF","#FF9999",  // color, bgcolor, hicolor
	"Arial",1,
	"#CC6666",2,
	"Resellers", "../partner/resellers.asp",
	"Affiliates", "../partner/affiliates.asp",
    "Advertise with us", "../partner/advertise.asp"
);

peakMENU5 = new Array (
	140,20,
	"#333366","#FFFFFF","#CCCCFF",  // color, bgcolor, hicolor
	"Arial",1,
	"#9999CC",2,
	"About Peakhour", "../about/peakhour.asp",
	"Tour our facilities", "../about/tour.asp",
	"Meet the team", "../about/team.asp",
	"Join the team", "../about/join.asp",
	"In the news", "../about/news.asp",
	"Our business partners", "../about/company.asp",
	"Policies", "../about/policies.asp"
);


homeon = new Image();
homeon.src = "../images/home.gif";
homeoff = new Image();
homeoff.src = "../images/home_off.gif";
productson = new Image();
productson.src = "../images/products.gif";
productsoff = new Image();
productsoff.src = "../images/products_off.gif";
howon = new Image();
howon.src = "../images/how.gif";
howoff = new Image();
howoff.src = "../images/how_off.gif";
newson = new Image();
newson.src = "../images/news.gif";
newsoff = new Image();
newsoff.src = "../images/news_off.gif";
partneron = new Image();
partneron.src = "../images/partner.gif";
partneroff = new Image();
partneroff.src = "../images/partner_off.gif";
abouton = new Image();
abouton.src = "../images/about.gif";
aboutoff = new Image();
aboutoff.src = "../images/about_off.gif";
topon = new Image();
topon.src = "../images/top_on.gif";
topoff = new Image();
topoff.src = "../images/top_off.gif";
peak_directon = new Image();
peak_directon.src = "../images/peak_direct_on.gif";
peak_directoff = new Image();
peak_directoff.src = "../images/peak_direct.gif";
helptopon = new Image();
helptopon.src = "../help/images/helptop_on.gif";
helpcontactoff = new Image();
helpcontactoff.src = "../help/images/contact.gif";
helpcontacton = new Image();
helpcontacton.src = "../help/images/contact_on.gif";
helptopoff = new Image();
helptopoff.src = "../help/images/helptop.gif";
helpon = new Image();
helpon.src = "../images/help_on.gif";
helpoff = new Image();
helpoff.src = "../images/help.gif";
contacton = new Image();
contacton.src = "../images/contact_on.gif";
contactoff = new Image();
contactoff.src = "../images/contact.gif";
sitemapon = new Image();
sitemapon.src = "../images/sitemap_on.gif";
sitemapoff = new Image();
sitemapoff.src = "../images/sitemap.gif";
memberson = new Image();
memberson.src = "../images/members_on.gif";
membersoff = new Image();
membersoff.src = "../images/members.gif";


marketon = new Image();
marketon.src = "../images/the_market_on.gif";
marketoff = new Image();
marketoff.src = "../images/the_market.gif";
meeton = new Image();
meeton.src = "../images/meet_the_team_on.gif";
meetoff = new Image();
meetoff.src = "../images/meet_the_team.gif";
watchon = new Image();
watchon.src = "../images/the_team_action_on.gif";
watchoff = new Image();
watchoff.src = "../images/the_team_action.gif";
goon = new Image();
goon.src = "../images/go_on.gif";
gooff = new Image();
gooff.src = "../images/go_off.gif";
joinon = new Image();
joinon.src = "../images/join_the_team_on.gif";
joinoff = new Image();
joinoff.src = "../images/join_the_team.gif";



//
//	Input:	x # of arrays named as follows:
//				peakMENUy = new Array(...)
//			where y = a sequential, unique menu number.
//
//	Array Parms:
//		0 - menu width (px)
//		1 - menuitem height (px)
//		2 - menuitem color
//		3 - menuitem background color
//		4 - menuitem highlighted background color
//		5 - font
//		6 - font size (1,2,3,...)
//		7 - menu border color
//		8 - menu border size (px)
//		
//		9  - item 1 text
//		10 - item 1 href
//		11 - item 2 text
//		12 - item 2 href
//		13 - item 3 text
//		     .
//			 .
//		nn - item (nn-9) href
//
//  after defining all arrays (in a <script> block), include this file with:
//		<script language="Javascript1.1" src="filename.js"></script>
//
//  surround each HTML menu/header with <A href=""></a>
//
//  add onMouseOver and onMouseOut properties to each link as follows:
//
// <A href="" onMouseOver="menu_popup(n,this,x,y)" onMouseOut="menu_popdown(x)">
//
//	where n = the menu number to pop up, and x,y are offset values in pixels
//

var activeMenu 		= null;
var activeMenuItem 	= null;
var peakMENUS 		= new Array(1);
var isLoaded		= 0;

// [ setup ] ------------------------------------------------------------------

function createMenusNS()
{
	var menuCount = 1;

	while(eval("window.peakMENU"+menuCount)) {
		menuArray = eval("peakMENU"+menuCount);
		
		menu = new Layer(menuArray[0],window);
		
		peakMENUS[menuCount] 	= menu;
		menu.menuNdx 			= menuCount;
		menu.onmouseout 		= menu_out;
		menu.show				= menu_show;
		menu.hide				= menu_hide;
		
		style 				= menu;
		style.visibility 	= 'hide';
		style.color 		= menuArray[2];
		style.bgColor 		= menuArray[7];
		style.left 			= 0;
		style.top 			= 0;
		style.zIndex 		= 100;
				
		prevstyle = null;
		ndx = 9;
		while (menuArray[ndx]) {
			
			mitem = new Layer(menuArray[0],menu);
			mitem.document.write ('&nbsp;<font color="'+menuArray[2]+'" face="'+menuArray[5]+'" size="'+menuArray[6]+'">'+menuArray[ndx]+'</font>');
			mitem.document.close();
			mitem.captureEvents(Event.MOUSEUP);
			
			mitem.menu 			= menu;
			mitem.onmouseover 	= menuitem_over;
			mitem.onmouseup 	= menuitem_click;
			mitem.lolite 		= menuitem_lolite;
			mitem.hilite 		= menuitem_hilite;
			mitem.href 			= menuArray[ndx+1];

			menu.lastitem 		= mitem;

			style = mitem;

			style.visibility 	= 'inherit';
			style.zIndex		= 101;
			style.bgColor 		= menuArray[3];
			style.locolor 		= menuArray[3];
			style.hicolor 		= menuArray[4];

			style.left 			= menuArray[8];
			style.top 			= (prevstyle == null) ? menuArray[8] : prevstyle.top + prevstyle.clip.height;
			style.clip.right 	= menuArray[0]-menuArray[8]*2;
			style.clip.bottom 	= menuArray[1];

			prevstyle 			= style;
									
			ndx += 2;
		}	
		
		menu.clip.right = menuArray[0];
		menu.clip.bottom = menu.lastitem.top + menu.lastitem.clip.height + menuArray[8];
		
		menuCount++;			
	}
	isLoaded = 1;
}


function createMenusIE()
{	
	// [ PHASE 1 : Create ] --------------------------------------------------------------------------------------------
	menuCount = 1;
	menuStr = "";
	while(eval("window.peakMENU"+menuCount)) {
		menuArray 	= eval("peakMENU"+menuCount);
		menuStr    += '<span id="rMENU'+menuCount+'" style="position:absolute">';
		ndx 		= 9;
		while (menuArray[ndx]) {
			menuStr += 	'<span id="rMENU'+menuCount+'ITEM'+((ndx-9)/2+1)+'" style="position:absolute">'+
							'<font color="'+menuArray[2]+'" face="'+menuArray[5]+'" size="'+menuArray[6]+'">&nbsp;'+
							menuArray[ndx]+
							'</font>'+
						'</span>';							  
			ndx += 2;
		}
		menuStr += '</span>';
		menuCount++;
	}
	
	window.document.body.insertAdjacentHTML('BeforeEnd',menuStr);
	
	// [ PHASE 2 : Setup/Connect ] -------------------------------------------------------------------------------------
	menuCount = 1;
		
	while(eval("window.peakMENU"+menuCount)) {
		menuArray = eval("peakMENU"+menuCount);
				
		menu = document.all["rMENU"+menuCount];
		
		peakMENUS[menuCount]	= menu;
		menu.menuNdx 			= menuCount;
		menu.onmouseout 		= menu_out;
		menu.show				= menu_show;
		menu.hide				= menu_hide;
		menu.timerid			= null;
		
		style 					= menu.style;
		style.visibility 		= 'hidden';
		style.color 			= menuArray[2];
		style.backgroundColor 	= menuArray[7];
		style.left 				= 10;
		style.top 				= 0;
		style.zIndex 			= 100;
		style.pixelWidth 		= menuArray[0];
		
		prevstyle = null;
		ndx = 9;
		while (menuArray[ndx]) {
			mitem = document.all["rMENU"+menuCount+"ITEM"+((ndx-9)/2+1)];

			mitem.menu 			= menu;
			mitem.onmouseover 	= menuitem_over;
			mitem.onmouseup 	= menuitem_click;
			mitem.lolite 		= menuitem_lolite;
			mitem.hilite 		= menuitem_hilite;
			mitem.href			= menuArray[ndx+1];

			menu.lastitem 		= mitem;

			style 					= mitem.style;
			style.visibility 		= 'inherit';
			style.zIndex 			= 101;
			style.backgroundColor 	= menuArray[3];
			style.locolor 			= menuArray[3];
			style.hicolor 			= menuArray[4];
			style.cursor 			= "hand";

			style.pixelLeft 		= menuArray[8];
			style.pixelTop 			= (prevstyle == null) ? menuArray[8] : prevstyle.pixelTop + prevstyle.pixelHeight;
			style.pixelWidth 		= menuArray[0]-menuArray[8]*2;
			style.pixelHeight 		= menuArray[1];

			prevstyle = style;
									
			ndx += 2;
		}
		
		menu.style.pixelHeight = menu.lastitem.style.pixelTop + menu.lastitem.style.pixelHeight + menuArray[8];
		
		menuCount++;			
	}
	isLoaded = 1;
}

function resize()
{
	if (document.layers) {
		if (saveInnerWidth < window.innerWidth || 
			saveInnerWidth > window.innerWidth || 
			saveInnerHeight > window.innerHeight || 
			saveInnerHeight < window.innerHeight ) 
    	window.location.reload();
	}
}

function startup()
{
	if (document.layers) 	createMenusNS();
	else					createMenusIE();
	
	window.onresize=resize;
	window.saveInnerWidth = window.innerWidth;
	window.saveInnerHeight = window.innerHeight;
}

// Special case to avoid menu startup lag on IE 5.0 only
if (navigator.appVersion.indexOf("5.0") > -1) startup();
else window.onload = startup;

// ||||[ SERVICE ROUTINES ]|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

// [ menu ] -------------------------------------------------------------------

function clearTimer(menuNdx) {
	if (peakMENUS[menuNdx].timerid) {
		clearTimeout(peakMENUS[menuNdx].timerid);
		peakMENUS[menuNdx].timerid = null;
	}
}

function getRealLeft(el) {
	if (document.layers) return el.x;
	
	//xStr=el.tagName + "=" + el.offsetLeft;
		
    xPos 	= el.offsetLeft;
    tempEl 	= el.parentElement;
	
    while (tempEl != null) {
		//xStr += "\n" + tempEl.tagName + "=" + tempEl.offsetLeft;
        xPos  += tempEl.offsetLeft;
        tempEl = tempEl.parentElement;
    }
	//alert(xStr);
    return xPos;
}

function getRealTop(el) {
	if (document.layers) return el.y;
	
    yPos 	= el.offsetTop;
    tempEl 	= el.offsetParent;
	
    while (tempEl != null) {
        yPos  += tempEl.offsetTop;
        tempEl = tempEl.offsetParent;
    }
	
    return yPos;
}

function fixLeftBounds(menuNdx,tryLeft)
{
	visibleWidth	= document.layers ? window.innerWidth : document.body.clientWidth;
	visibleLeft 	= document.layers ? window.pageXOffset : document.body.scrollLeft;
	visibleRight 	= visibleLeft + visibleWidth;
	
	menuWidth = document.layers ? peakMENUS[menuNdx].width : peakMENUS[menuNdx].style.pixelWidth;
	
	//right
	if ((tryLeft + menuWidth) > visibleRight) tryLeft = visibleRight - menuWidth;
	
	//left
	if (tryLeft < visibleLeft) tryLeft = visibleLeft;

	return tryLeft;	
}

function fixTopBounds(menuNdx,tryTop)
{
	visibleHeight	= document.layers ? window.innerHeight : document.body.clientHeight;
	visibleTop		= document.layers ? window.pageYOffset : document.body.scrollTop;
	visibleBottom   = visibleTop + visibleHeight;
	
	menuHeight = document.layers ? peakMENUS[menuNdx].height : peakMENUS[menuNdx].style.pixelHeight;
	
	//bottom
	if ((tryTop + menuHeight) > visibleBottom) tryTop = visibleBottom - menuHeight;
	
	//top
	if (tryTop < visibleTop) tryTop = visibleTop;
	
	return tryTop;
}
	

function menu_popup(menuNdx,xoff,imgName) {
	yoff=158
	if (isLoaded == 1) {
		if (activeMenu != null) activeMenu.hide();
		if (activeMenuItem != null) activeMenuItem.lolite();

		clearTimer(menuNdx);
	
			peakMENUS[menuNdx].show(
			fixLeftBounds(menuNdx,xoff),
			fixTopBounds(menuNdx,yoff)
		);

	}
	 if (imgName != '') {
            document[imgName].src = eval(imgName + "on.src");
		}
}

function menu_popdown(menuNdx,imgName) {
	if (isLoaded == 1) {
		clearTimer(menuNdx);
		peakMENUS[menuNdx].timerid = setTimeout("peakMENUS["+menuNdx+"].hide()",700);
	}
	 if (imgName != '') {
            document[imgName].src = eval(imgName + "off.src");
		}
}

function menu_hide()
{
	if (document.layers)	this.visibility = "hide";
	else					this.style.visibility = "hidden";	
	if (this == activeMenu) activeMenu = null;
}

function menu_show(x,y)
{
	if (document.layers) {this.left = x; this.top = y;}
	else				 {this.style.left = x; this.style.top = y;}	

	if (document.layers) 	this.visibility = "show";
	else					this.style.visibility = "visible";
	activeMenu = this;
}

function menu_out() 
{
	clearTimer(this.menuNdx);
	this.timerid = setTimeout("peakMENUS["+this.menuNdx+"].hide()",100);
}

// [ menuitem ] ---------------------------------------------------------------

function menuitem_over()
{
	if (activeMenuItem != null) activeMenuItem.lolite();
	this.hilite();
	
	activeMenuItem = this;
	clearTimer(this.menu.menuNdx);
}

function menuitem_click()
{
	document.location.href = this.href;
}

function menuitem_lolite()
{
	if (document.layers)	this.bgColor = this.locolor;
	else					this.style.backgroundColor = this.style.locolor;
}

function menuitem_hilite()
{
	if (document.layers)	this.bgColor = this.hicolor;
	else					this.style.backgroundColor = this.style.hicolor;
}

//------------------------------------------------------------------------------------

function imgOn(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "on.src");
			
        }
}

function imgOff(imgName) {
        if (document.images) {
            document[imgName].src = eval(imgName + "off.src");
		
        }
}
Prev by Date: Tips: perl script convert unix timestamp in squid access.log to normal time
Next by Date: Tips: setup a printer on linux box
Previous by thread: Tips: perl script convert unix timestamp in squid access.log to normal time
Next by thread: Tips: setup a printer on linux box
Index(es):
- Main
- Thread