Solved

Using tabs / layers in HTML

Posted on 2009-05-20
2
1,352 Views
Last Modified: 2012-08-13
Hi,

Please could someone explain, or provide some sample code of how to use layers in HTML.

An example of what I'm trying to achieve is shown on this page under the tabs labelled Editors Notes, Details and Size and Fit:

http://www.net-a-porter.com/product/39650

Basically I would like to know how to make layers appear / dippapear depending upon what the user clicks on.

Thanks in advance!

Rob
0
Comment
Question by:rvr_1
2 Comments
 
LVL 4

Accepted Solution

by:
Andy1988 earned 250 total points
ID: 24429642
The thing you're asking for is called AJAX. Here you go:

I've attached the code and files for you convenience.
=======The HTML======
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

	<title>DHTML Tab script</title>

	<style type="text/css">

	body{

		margin:10px;

		font-size:0.9em;

	}

	a{

		color:#F00;

	}

	</style>

	<link rel="stylesheet" href="css/tab-view.css" type="text/css" media="screen">

	<script type="text/javascript" src="js/ajax.js"></script>

	<script type="text/javascript" src="js/tab-view.js">

	/************************************************************************************************************

	(C) www.dhtmlgoodies.com, October 2005

	

	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	

	

	Terms of use:

	You are free to use this script as long as the copyright message is kept intact. However, you may not

	redistribute, sell or repost it without our permission.

	

	Updated:

		

		March, 14th, 2006 - Create new tabs dynamically

	

	Thank you!

	

	www.dhtmlgoodies.com

	Alf Magne Kalleland

	

	************************************************************************************************************/		

	</script>

</head>

<body>

<img src="/images/heading3.gif">

<div id="dhtmlgoodies_tabView1">

	<div class="dhtmlgoodies_aTab">

		<img src="/images/dhtmlgoodies_logo1.gif" style="float:left;margin-right:5px;margin-bottom:5px"> This is the content of the first tab. This is just a plain &lt;DIV>. The tabs

		are created by a javascript function.  This is the content of the first tab. This is just a plain &lt;DIV>. The tabs

		are created by a javascript function.  This is the content of the first tab. This is just a plain &lt;DIV>. The tabs

		are created by a javascript function. 	<br><br>

		<a href="#" onclick="createNewTab('dhtmlgoodies_tabView1','A dynamic tab','','externalfile.html',true);return false">Create new tab dynamically</a><br>

		<a href="#" onclick="deleteTab('Menu scripts')">Remove this tab</a><br>

		
 

		

		

	</div>

	<div class="dhtmlgoodies_aTab">

		This is the content of the second tab.	<br>

		<a href="#" onclick="deleteTab('Calendar')">Remove this tab</a><br>

	</div>

	<div class="dhtmlgoodies_aTab">

		This script is tested in 

		<a href="#" onclick="deleteTab('Menus')">Remove this tab</a><br>

		<ul>

			<li>IE 5.5</li>

			<li>IE 6</li>

			<li>Opera 8.5</li>

			<li>Firefox</li>

		</ul>	

	</div>

	<div class="dhtmlgoodies_aTab">

		Content of tab 4<br>

	</div>

</div>

<script type="text/javascript">

initTabs('dhtmlgoodies_tabView1',Array('Menu scripts','Calendar','Menus','About us'),0,500,400,Array(true,true,true,true));

</script>

</body>

</html>
 

=====The CSS======
 

	.dhtmlgoodies_tabPane{

		height:21px;	/* Height of tabs */

		border-bottom:1px solid #919b9c;

	}

	.dhtmlgoodies_aTab{

		border-left:1px solid #919b9c;

		border-right:1px solid #919b9c;

		border-bottom:1px solid #919b9c;

		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;

		padding:5px;		

		

	}

	.dhtmlgoodies_tabPane DIV{

		float:left;

		height:100%;	/* Height of tabs */

		padding-left:3px;

		vertical-align:middle;

		background-repeat:no-repeat;

		background-position:bottom left;

		cursor:pointer;

		position:relative;

		bottom:-1px;

		margin-left:0px;

		margin-right:0px;

	}

	.dhtmlgoodies_tabPane .tabActive{

		background-image:url('../images/tab_left_active.gif');

		margin-left:0px;

		margin-right:0px;	

		z-index:10;	

	}

	.dhtmlgoodies_tabPane .tabInactive{

		background-image:url('../images/tab_left_inactive.gif');

		margin-left:0px;

		margin-right:0px;

		z-index:1;

	}
 

	.dhtmlgoodies_tabPane .inactiveTabOver{

		background-image:url('../images/tab_left_over.gif');

		margin-left:0px;

		margin-right:0px;

	}

	.dhtmlgoodies_tabPane span{

		font-family:arial;

		vertical-align:top;

		font-size:11px;

		padding-left:3px;

		padding-right:3px;		

		line-height:21px;

		float:left;

	}

	.dhtmlgoodies_tabPane .tabActive span{

		padding-bottom:1px;

		line-height:20px;

	}

	

	.dhtmlgoodies_tabPane img{

		float:left;

	}
 
 

=====The JS==== (ajax.js)
 

/* Simple AJAX Code-Kit (SACK) */

/* ©2005 Gregory Wild-Smith */

/* www.twilightuniverse.com */

/* Software licenced under a modified X11 licence, see documentation or authors website for more details */
 

function sack(file){

	this.AjaxFailedAlert = "Your browser does not support the enhanced functionality of this website, and therefore you will have an experience that differs from the intended one.\n";

	this.requestFile = file;

	this.method = "POST";

	this.URLString = "";

	this.encodeURIString = true;

	this.execute = false;
 

	this.onLoading = function() { };

	this.onLoaded = function() { };

	this.onInteractive = function() { };

	this.onCompletion = function() { };
 

	this.createAJAX = function() {

		try {

			this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

		} catch (e) {

			try {

				this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

			} catch (err) {

				this.xmlhttp = null;

			}

		}

		if(!this.xmlhttp && typeof XMLHttpRequest != "undefined")

			this.xmlhttp = new XMLHttpRequest();

		if (!this.xmlhttp){

			this.failed = true; 

		}

	};

	

	this.setVar = function(name, value){

		if (this.URLString.length < 3){

			this.URLString = name + "=" + value;

		} else {

			this.URLString += "&" + name + "=" + value;

		}

	}

	

	this.encVar = function(name, value){

		var varString = encodeURIComponent(name) + "=" + encodeURIComponent(value);

	return varString;

	}

	

	this.encodeURLString = function(string){

		varArray = string.split('&');

		for (i = 0; i < varArray.length; i++){

			urlVars = varArray[i].split('=');

			if (urlVars[0].indexOf('amp;') != -1){

				urlVars[0] = urlVars[0].substring(4);

			}

			varArray[i] = this.encVar(urlVars[0],urlVars[1]);

		}

	return varArray.join('&');

	}

	

	this.runResponse = function(){

		eval(this.response);

	}

	

	this.runAJAX = function(urlstring){

		this.responseStatus = new Array(2);

		if(this.failed && this.AjaxFailedAlert){ 

			alert(this.AjaxFailedAlert); 

		} else {

			if (urlstring){ 

				if (this.URLString.length){

					this.URLString = this.URLString + "&" + urlstring; 

				} else {

					this.URLString = urlstring; 

				}

			}

			if (this.encodeURIString){

				var timeval = new Date().getTime(); 

				this.URLString = this.encodeURLString(this.URLString);

				this.setVar("rndval", timeval);

			}

			if (this.element) { this.elementObj = document.getElementById(this.element); }

			if (this.xmlhttp) {

				var self = this;

				if (this.method == "GET") {

					var totalurlstring = this.requestFile + "?" + this.URLString;

					this.xmlhttp.open(this.method, totalurlstring, true);

				} else {

					this.xmlhttp.open(this.method, this.requestFile, true);

				}

				if (this.method == "POST"){

  					try {

						this.xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')  

					} catch (e) {}

				}
 

				this.xmlhttp.send(this.URLString);

				this.xmlhttp.onreadystatechange = function() {

					switch (self.xmlhttp.readyState){

						case 1:

							self.onLoading();

						break;

						case 2:

							self.onLoaded();

						break;

						case 3:

							self.onInteractive();

						break;

						case 4:

							self.response = self.xmlhttp.responseText;

							self.responseXML = self.xmlhttp.responseXML;

							self.responseStatus[0] = self.xmlhttp.status;

							self.responseStatus[1] = self.xmlhttp.statusText;

							self.onCompletion();

							if(self.execute){ self.runResponse(); }

							if (self.elementObj) {

								var elemNodeName = self.elementObj.nodeName;

								elemNodeName.toLowerCase();

								if (elemNodeName == "input" || elemNodeName == "select" || elemNodeName == "option" || elemNodeName == "textarea"){

									self.elementObj.value = self.response;

								} else {

									self.elementObj.innerHTML = self.response;

								}

							}

							self.URLString = "";

						break;

					}

				};

			}

		}

	};

this.createAJAX();

}
 

==(tab-view.js)
 

	/************************************************************************************************************

	(C) www.dhtmlgoodies.com, October 2005

	

	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	

	

	Terms of use:

	You are free to use this script as long as the copyright message is kept intact. However, you may not

	redistribute, sell or repost it without our permission.

	

	Updated:

		

		March, 14th, 2006 - Create new tabs dynamically

		March, 15th, 2006 - Dynamically delete a tab

		

	Thank you!

	

	www.dhtmlgoodies.com

	Alf Magne Kalleland

	

	************************************************************************************************************/		

	var textPadding = 3; // Padding at the left of tab text - bigger value gives you wider tabs

	var strictDocType = true; 

	var tabView_maxNumberOfTabs = 6;	// Maximum number of tabs

	

	/* Don't change anything below here */

	var dhtmlgoodies_tabObj = new Array();

	var activeTabIndex = new Array();

	var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;

	

	var regExp = new RegExp(".*MSIE ([0-9]\.[0-9]).*","g");

	var navigatorVersion = navigator.userAgent.replace(regExp,'$1');

	

	var ajaxObjects = new Array();

	var tabView_countTabs = new Array();

	var tabViewHeight = new Array();

	var tabDivCounter = 0;

	var closeImageHeight = 8;	// Pixel height of close buttons

	var closeImageWidth = 8;	// Pixel height of close buttons

	

	

	function setPadding(obj,padding){

		var span = obj.getElementsByTagName('SPAN')[0];

		span.style.paddingLeft = padding + 'px';	

		span.style.paddingRight = padding + 'px';	

	}

	function showTab(parentId,tabIndex)

	{

		var parentId_div = parentId + "_";

		if(!document.getElementById('tabView' + parentId_div + tabIndex)){

			return;

		}

		if(activeTabIndex[parentId]>=0){

			if(activeTabIndex[parentId]==tabIndex){

				return;

			}

	

			var obj = document.getElementById('tabTab'+parentId_div + activeTabIndex[parentId]);

			

			obj.className='tabInactive';

			var img = obj.getElementsByTagName('IMG')[0];

			if(img.src.indexOf('tab_')==-1)img = obj.getElementsByTagName('IMG')[1];

			img.src = 'images/tab_right_inactive.gif';

			document.getElementById('tabView' + parentId_div + activeTabIndex[parentId]).style.display='none';

		}

		

		var thisObj = document.getElementById('tabTab'+ parentId_div +tabIndex);	

			

		thisObj.className='tabActive';

		var img = thisObj.getElementsByTagName('IMG')[0];

		if(img.src.indexOf('tab_')==-1)img = thisObj.getElementsByTagName('IMG')[1];

		img.src = 'images/tab_right_active.gif';

		

		document.getElementById('tabView' + parentId_div + tabIndex).style.display='block';

		activeTabIndex[parentId] = tabIndex;

		
 

		var parentObj = thisObj.parentNode;

		var aTab = parentObj.getElementsByTagName('DIV')[0];

		countObjects = 0;

		var startPos = 2;

		var previousObjectActive = false;

		while(aTab){

			if(aTab.tagName=='DIV'){

				if(previousObjectActive){

					previousObjectActive = false;

					startPos-=2;

				}

				if(aTab==thisObj){

					startPos-=2;

					previousObjectActive=true;

					setPadding(aTab,textPadding+1);

				}else{

					setPadding(aTab,textPadding);

				}

				

				aTab.style.left = startPos + 'px';

				countObjects++;

				startPos+=2;

			}			

			aTab = aTab.nextSibling;

		}

		

		return;

	}

	

	function tabClick()

	{

		var idArray = this.id.split('_');		

		showTab(this.parentNode.parentNode.id,idArray[idArray.length-1].replace(/[^0-9]/gi,''));

		

	}

	

	function rolloverTab()

	{

		if(this.className.indexOf('tabInactive')>=0){

			this.className='inactiveTabOver';

			var img = this.getElementsByTagName('IMG')[0];

			if(img.src.indexOf('tab_')<=0)img = this.getElementsByTagName('IMG')[1];

			img.src = 'images/tab_right_over.gif';

		}

		

	}

	function rolloutTab()

	{

		if(this.className ==  'inactiveTabOver'){

			this.className='tabInactive';

			var img = this.getElementsByTagName('IMG')[0];

			if(img.src.indexOf('tab_')<=0)img = this.getElementsByTagName('IMG')[1];

			img.src = 'images/tab_right_inactive.gif';

		}

		

	}

	

	function hoverTabViewCloseButton()

	{

		this.src = this.src.replace('close.gif','close_over.gif');

	}

	

	function stopHoverTabViewCloseButton()

	{

		this.src = this.src.replace('close_over.gif','close.gif');

	}

	

	function initTabs(mainContainerID,tabTitles,activeTab,width,height,closeButtonArray,additionalTab)

	{

		if(!closeButtonArray)closeButtonArray = new Array();

		

		if(!additionalTab || additionalTab=='undefined'){			

			dhtmlgoodies_tabObj[mainContainerID] = document.getElementById(mainContainerID);

			width = width + '';

			if(width.indexOf('%')<0)width= width + 'px';

			dhtmlgoodies_tabObj[mainContainerID].style.width = width;

						

			height = height + '';

			if(height.length>0){

				if(height.indexOf('%')<0)height= height + 'px';

				dhtmlgoodies_tabObj[mainContainerID].style.height = height;

			}

			
 

			tabViewHeight[mainContainerID] = height;

			

			var tabDiv = document.createElement('DIV');		

			var firstDiv = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[0];	

			

			dhtmlgoodies_tabObj[mainContainerID].insertBefore(tabDiv,firstDiv);	

			tabDiv.className = 'dhtmlgoodies_tabPane';			

			tabView_countTabs[mainContainerID] = 0;
 

		}else{

			var tabDiv = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[0];

			var firstDiv = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV')[1];

			height = tabViewHeight[mainContainerID];

			activeTab = tabView_countTabs[mainContainerID];		

	

			

		}

		

		

		

		for(var no=0;no<tabTitles.length;no++){

			var aTab = document.createElement('DIV');

			aTab.id = 'tabTab' + mainContainerID + "_" +  (no + tabView_countTabs[mainContainerID]);

			aTab.onmouseover = rolloverTab;

			aTab.onmouseout = rolloutTab;

			aTab.onclick = tabClick;

			aTab.className='tabInactive';

			tabDiv.appendChild(aTab);

			var span = document.createElement('SPAN');

			span.innerHTML = tabTitles[no];

			span.style.position = 'relative';

			aTab.appendChild(span);

			

			if(closeButtonArray[no]){

				var closeButton = document.createElement('IMG');

				closeButton.src = 'images/close.gif';

				closeButton.height = closeImageHeight + 'px';

				closeButton.width = closeImageHeight + 'px';

				closeButton.setAttribute('height',closeImageHeight);

				closeButton.setAttribute('width',closeImageHeight);

				closeButton.style.position='absolute';

				closeButton.style.top = '6px';

				closeButton.style.right = '0px';

				closeButton.onmouseover = hoverTabViewCloseButton;

				closeButton.onmouseout = stopHoverTabViewCloseButton;

				

				span.innerHTML = span.innerHTML + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';	

				

				var deleteTxt = span.innerHTML+'';
 

				closeButton.onclick = function(){ deleteTab(this.parentNode.innerHTML) };

				span.appendChild(closeButton);

			}

			

			var img = document.createElement('IMG');

			img.valign = 'bottom';

			img.src = 'images/tab_right_inactive.gif';

			// IE5.X FIX

			if((navigatorVersion && navigatorVersion<6) || (MSIE && !strictDocType)){

				img.style.styleFloat = 'none';

				img.style.position = 'relative';	

				img.style.top = '4px'

				span.style.paddingTop = '4px';

				aTab.style.cursor = 'hand';

			}	// End IE5.x FIX

			aTab.appendChild(img);

		}
 

		var tabs = dhtmlgoodies_tabObj[mainContainerID].getElementsByTagName('DIV');

		var divCounter = 0;

		for(var no=0;no<tabs.length;no++){

			if(tabs[no].className=='dhtmlgoodies_aTab' && tabs[no].parentNode.id == mainContainerID){

				if(height.length>0)tabs[no].style.height = height;

				tabs[no].style.display='none';

				tabs[no].id = 'tabView' + mainContainerID + "_" + divCounter;

				divCounter++;

			}			

		}	

		tabView_countTabs[mainContainerID] = tabView_countTabs[mainContainerID] + tabTitles.length;	

		showTab(mainContainerID,activeTab);
 

		return activeTab;

	}	

	

	function showAjaxTabContent(ajaxIndex,parentId,tabId)

	{

		var obj = document.getElementById('tabView'+parentId + '_' + tabId);

		obj.innerHTML = ajaxObjects[ajaxIndex].response;		

	}

	

	function resetTabIds(parentId)

	{

		var tabTitleCounter = 0;

		var tabContentCounter = 0;

		

		

		var divs = dhtmlgoodies_tabObj[parentId].getElementsByTagName('DIV');
 

		

		for(var no=0;no<divs.length;no++){

			if(divs[no].className=='dhtmlgoodies_aTab'){

				divs[no].id = 'tabView' + parentId + '_' + tabTitleCounter;

				tabTitleCounter++;

			}

			if(divs[no].id.indexOf('tabTab')>=0){

				divs[no].id = 'tabTab' + parentId + '_' + tabContentCounter;	

				tabContentCounter++;

			}	

			

				

		}

	

		tabView_countTabs[parentId] = tabContentCounter;

	}

	

	

	function createNewTab(parentId,tabTitle,tabContent,tabContentUrl,closeButton)

	{

		if(tabView_countTabs[parentId]>=tabView_maxNumberOfTabs)return;	// Maximum number of tabs reached - return

		var div = document.createElement('DIV');

		div.className = 'dhtmlgoodies_aTab';

		dhtmlgoodies_tabObj[parentId].appendChild(div);		
 

		var tabId = initTabs(parentId,Array(tabTitle),0,'','',Array(closeButton),true);

		if(tabContent)div.innerHTML = tabContent;

		if(tabContentUrl){		

			var ajaxIndex = ajaxObjects.length;

			ajaxObjects[ajaxIndex] = new sack();

			ajaxObjects[ajaxIndex].requestFile = tabContentUrl;	// Specifying which file to get
 

			ajaxObjects[ajaxIndex].onCompletion = function(){ showAjaxTabContent(ajaxIndex,parentId,tabId); };	// Specify function that will be executed after file has been found

			ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function	

		

		}

				

	}

	

	function getTabIndexByTitle(tabTitle)

	{

		var regExp = new RegExp("(.*?)&nbsp.*$","gi");

		tabTitle = tabTitle.replace(regExp,'$1');

		for(var prop in dhtmlgoodies_tabObj){

			var divs = dhtmlgoodies_tabObj[prop].getElementsByTagName('DIV');

			for(var no=0;no<divs.length;no++){

				if(divs[no].id.indexOf('tabTab')>=0){

					var span = divs[no].getElementsByTagName('SPAN')[0];

					var regExp2 = new RegExp("(.*?)&nbsp.*$","gi");

					var spanTitle = span.innerHTML.replace(regExp2,'$1');

					

					if(spanTitle == tabTitle){

						

						var tmpId = divs[no].id.split('_');						

						return Array(prop,tmpId[tmpId.length-1].replace(/[^0-9]/g,'')/1);

					}		

				}

			}

		}

		

		return -1;

		

	}

	

	/* Call this function if you want to display some content from external file in one of the tabs 

	Arguments: Title of tab and relative path to external file */

	

	function addAjaxContentToTab(tabTitle,tabContentUrl)

	{

		var index = getTabIndexByTitle(tabTitle);

		if(index!=-1){

			var ajaxIndex = ajaxObjects.length;

			

			tabId = index[1];

			parentId = index[0];

			

			

			ajaxObjects[ajaxIndex] = new sack();

			ajaxObjects[ajaxIndex].requestFile = tabContentUrl;	// Specifying which file to get
 

			ajaxObjects[ajaxIndex].onCompletion = function(){ showAjaxTabContent(ajaxIndex,parentId,tabId); };	// Specify function that will be executed after file has been found

			ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function				

			

		}	

	}
 

	

	

	function deleteTab(tabLabel,tabIndex,parentId)

	{
 

		if(tabLabel){

			var index = getTabIndexByTitle(tabLabel);

			if(index!=-1){

				deleteTab(false,index[1],index[0]);

			}

			

		}else if(tabIndex>=0){

			if(document.getElementById('tabTab' + parentId + '_' + tabIndex)){

				var obj = document.getElementById('tabTab' + parentId + '_' + tabIndex);

				var id = obj.parentNode.parentNode.id;

				obj.parentNode.removeChild(obj);

				var obj2 = document.getElementById('tabView' + parentId + '_' + tabIndex);

				obj2.parentNode.removeChild(obj2);

				resetTabIds(parentId);

				activeTabIndex[parentId]=-1;

				showTab(parentId,'0');

			}			

		}

		
 

			

		

		

	}

	

	

Open in new window

0
 
LVL 12

Assisted Solution

by:Chad Haney
Chad Haney earned 250 total points
ID: 24790809
They look like they are using jquery to add onclicks to each parent of the "productDescription" class.  when the parent tab is clicked it is set to hide all product descriptions, then show the child of the tab which is clicked.

http://jqueryfordesigners.com/jquery-tabs/
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now