next >>
<< prev


01 02 03
 
/*
*dHTML Code Sample - Marc Needham - 03/25/01
*This piece of code is used to first position 5 divs on top 
*of one another with a position determined by the position of
*a placeholder image. Then, when the tabs are clicked layers are 
*hidden or made visible to make it appear that the tabs are
*being toggled. Which, in effect, they are.
*I'm leaving some of the commenting in this file just to clarify some
*bits. For the working version of this, please see: 
*http://mrshowbiz.go.com/movies/boxofficeswami/Index.html
*/


<script language=javascript>

function getElementLeft(szElementName) {
	var iRetVal = 0;

	if ( navigator.appName == "Netscape" ) {
		iRetVal = document.images[szElementName].x;
	}
	else {
		iRetVal = document.all[szElementName].offsetLeft;
		objHTMLelement = document.all[szElementName].offsetParent;
  		while (objHTMLelement != null) {
  			iRetVal += objHTMLelement.offsetLeft;
  			objHTMLelement = objHTMLelement.offsetParent;
  		}
	}
	
	return iRetVal;
}

function getElementTop(szElementName) {
	var iRetVal = 0;

	if ( navigator.appName == "Netscape" ) {
		iRetVal = document.images[szElementName].y;
	}
	else {
		iRetVal = document.all[szElementName].offsetTop;
		objHTMLelement = document.all[szElementName].offsetParent;
		while (objHTMLelement != null) {
  			iRetVal += objHTMLelement.offsetTop;
  			objHTMLelement = objHTMLelement.offsetParent;
  		}
	}
	
	return iRetVal;
}

function initLayers(){
	var imgPlaceHolderTop = getElementTop("placeholder");
	var imgPlaceHolderLeft = getElementLeft("placeholder");

	
	var pageHeight = 300;
	                          

	if ( navigator.appName == "Netscape" ) {
// Set tabbed dialog layers location 
		for (var i=1;i<6;i++){
			szPageID = "page" + i;
			document.layers[szPageID].top = imgPlaceHolderTop-1;
			document.layers[szPageID].left = imgPlaceHolderLeft-1;
			document.layers[szPageID].height = pageHeight;
		}
		document.layers["page1"].visibility = "visible";

	} else { // IE
		for (var i=1;i<6;i++){
			szPageID = "page" + i;
			document.all[szPageID].style.top = imgPlaceHolderTop-14;
			document.all[szPageID].style.left = imgPlaceHolderLeft-0;
			document.all[szPageID].style.height = pageHeight;
		}

		document.all["page1"].style.visibility = "visible";
	}

//	setOtherElements();
}

function TogglePage(iPage){
	if ( DHTMLSupport() == true ) {
		if ( navigator.appName == "Netscape" ) {
			for (var i=1;i<6;i++){
				szPageID = "page" + i;
				document.layers[szPageID].visibility = "hidden";
			}
			document.layers[iPage].visibility = "visible";
		} else {
			for (var i=1;i<6;i++){
				szPageID = "page" + i;
				document.all[szPageID].style.visibility = "hidden";
			}
			document.all[iPage].style.visibility = "visible";
		}
	}
}

function DHTMLSupport()	{
	var ua = window.navigator.userAgent;
	var msie = ua.indexOf ( "MSIE " );
	var blRetVal = false;

	if ( msie > 0 ) {
		iBrowserver = parseInt (ua.substring (msie+5, ua.indexOf (".", msie )))
		if ( iBrowserver >= 4 ) {
			blRetVal = true;
		}
	}
	
	if ( navigator.appName == "Netscape" ) {
		var naver = ua.indexOf ( "Mozilla" );
		iBrowserver = parseInt (ua.substring (naver+8, naver+9));
		if ( iBrowserver >= 4) {
			blRetVal = true;
		}
	}

	return blRetVal;
}

//reloads the window if Nav4 resized
function reloadPage(init) { 
	if (init==true) with (navigator) {
		if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
			document.pgW=innerWidth; document.pgH=innerHeight; onresize=reloadPage; 
		}
	}
	else if (innerWidth!=document.pgW || innerHeight!=document.pgH) location.reload();
}

reloadPage(true);
</script>
/*
*...and no, I didn't hand-code that. I did however take the code, which was originally intended
*to only work on two tabs and had no cross-browser support, and re-purpose and re-format it.
*I know how it all works. I love dHTML.
*/