Tabs V3

Ok, so here’s Version 3 of Jake’s Amazing Tab System. This version works entirely from a JavaScript array. This means only one thing to change if you want to add/alter content. It also means a lot of JavaScript being passed around the place but I’m sure we can deal with that.

It all validates and works on Firefox and IE.

One known issue: You can hide a tab by changing its visibility to 0 in the array. However this currently won’t appear in the list of hidden tabs. not a massive issue but it means you can’t have a tab hidden by default but still accessible. Not a major issue.

Next step: Combine it all into a PHP class that pulls all information from a database and populates the tabs automatically. Or maybe not. I hope someone finds a use for this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>TABS!</title>
	<script type="text/javascript"><!--
	// Edit this array when adding/editing your tabs.
	// [ tab_id,  tab_contents_id,  visibility,  tab_title,  tab_body ]
	var tabsarray = new Array(																// Define tabs array
		["tab1", "tabcontent1", 1, "Tab 0", "Here's is the content for frame 1. Lots of content blah blah blah. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet quam sem. Aliquam tincidunt orci a massa tempor consequat. Sed ut ipsum at magna lobortis interdum. Quisque porttitor, nisl vel elementum ultrices, leo est pulvinar nunc, a porta nibh nibh nec lectus. Integer sit amet purus leo, eu accumsan ante. Proin venenatis vehicula consequat. Nullam porta leo nec tortor feugiat lacinia eget a erat. Donec et nisl nunc, sagittis fermentum elit. Maecenas feugiat lectus ac metus laoreet sed eleifend enim dapibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eu neque eu est vulputate porta vitae sed augue. Ut ut eros nec risus vulputate mollis. Sed scelerisque auctor lacus in aliquet. Donec pellentesque nunc sit amet leo dapibus et elementum nulla dapibus. Morbi dolor lacus, mattis vestibulum consectetur ac, vehicula non massa. Nullam in placerat quam. Sed fermentum massa vitae mauris tempor sit amet accumsan leo aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "], 
		["tab2", "tabcontent2", 1, "Tab 1", "Mauris aliquet, orci ut auctor pellentesque, mauris diam sollicitudin arcu, vel ultricies urna est sed velit. Maecenas non enim purus. Phasellus non orci ornare tortor pretium euismod at nec magna. Proin gravida sem sed tortor commodo malesuada. Duis leo felis, iaculis sit amet ornare lacinia, pellentesque nec mauris. In lacus urna, facilisis id porttitor vitae, feugiat ut urna. Donec et nibh nec quam placerat tincidunt vel ut velit. Sed facilisis adipiscing risus porta accumsan. Integer vitae justo nibh, id fringilla nibh. Ut eget tristique justo. Fusce in nisl diam, vel tempor elit. Mauris at nisi libero, ut lacinia augue. Praesent eget lacus et nisl auctor tristique. Integer scelerisque, mi nec mollis posuere, lorem lectus tincidunt augue, et lacinia elit risus mattis dolor. Sed condimentum lacus ante."], 
		["tab3", "tabcontent3", 1, "Tab 2", "Sed vitae arcu non sapien congue pretium egestas id ligula. Vestibulum varius semper magna quis vestibulum. Aenean congue dictum lacus vel consectetur. Donec pellentesque neque suscipit nibh consectetur vitae fermentum nunc iaculis. Suspendisse ac odio justo, id scelerisque eros. Etiam velit nisi, consequat eget lacinia ut, convallis in turpis. Aliquam ut nisi eros. Proin at nunc erat. Pellentesque lacinia semper velit id accumsan. Suspendisse potenti. Sed scelerisque, ipsum id commodo consequat, eros nisl sagittis nunc, vel laoreet urna risus nec sem. Nunc ultrices dignissim felis, et fermentum felis ultricies sed. Sed eget aliquam justo. "], 
		["tab4", "tabcontent4", 1, "Tab 3", "Integer viverra dignissim dolor vitae ultrices. Donec porttitor tincidunt mauris, at elementum orci tincidunt ut. Pellentesque ac orci diam. Nullam dolor sem, semper sed faucibus et, interdum eget tortor. Cras sed odio at enim vulputate mollis vel in mauris. Sed sagittis vulputate molestie. Vivamus scelerisque feugiat elementum. Aenean ante eros, lacinia ut dictum ac, feugiat sit amet mauris. Vivamus pulvinar, tellus quis semper pharetra, diam orci sodales sapien, viverra porttitor sem felis ac justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus nunc eros, feugiat ac fringilla faucibus, lacinia sed eros. Donec placerat ante at velit lacinia bibendum fringilla ligula facilisis. Aenean ligula arcu, aliquam quis vehicula ac, interdum a turpis. Etiam iaculis fermentum nibh, sed congue ante eleifend vel. Aenean cursus sagittis elit, nec fermentum mi imperdiet non. "], 
		["tab5", "tabcontent5", 1, "Tab 4", "Etiam est ante, egestas non aliquet eu, placerat consectetur dolor. Aenean bibendum ultricies metus, eu cursus dui mollis et. Etiam non nulla in ante dictum venenatis id eu neque. Etiam eu ipsum a enim venenatis ultrices et ut metus. In hac habitasse platea dictumst. Maecenas justo neque, faucibus sit amet porta ut, tincidunt ut mi. Nullam eget auctor nulla. Etiam urna lorem, pretium ac vulputate et, ultrices in nisl. Phasellus sodales quam vel nunc pellentesque at congue lorem lobortis. Praesent pulvinar egestas tincidunt. Nam ac augue non elit tincidunt posuere at eleifend massa. Aenean fermentum arcu nec urna semper semper. Duis quis lorem eu tellus accumsan tempor. Curabitur in molestie dui. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vitae justo quis felis hendrerit lobortis ac sed tortor. Cras quis erat massa. Mauris adipiscing vehicula lectus a mattis. Fusce in dui risus. Proin id nisi non enim porttitor sodales vitae vitae nulla. "]
	)
	
	window.onload=function(){
		writeTabs();
		writeContents();
	}
	
	function showTab(id){
		var size = tabsarray.length;														// get number of tabs
		tabsarray[id][2] = 1;																// set tab visibility to 1 (keeps track of which tabs are visible)
		for(i=0;i<size;i++){																// for each tab in array
			document.getElementById(tabsarray[i][1]).style.display = 'none';				// hide the tab
			document.getElementById(tabsarray[i][0]).style.background = '#BBBBBB';			// set tab colour to "deselected" colour
			document.getElementById(tabsarray[i][0]).style.borderBottomColor = '#000000';	// set border-bottom to black
		}
		document.getElementById(tabsarray[id][0]).style.display = 'block';					// show active tab
		document.getElementById(tabsarray[id][1]).style.display = 'block';					// show active tabcontent
		document.getElementById(tabsarray[id][0]).style.background = '#FFFFFF';				// set active tab to "selected" colour
		document.getElementById(tabsarray[id][0]).style.borderBottomColor = '#FFFFFF';		// set border-bottom to white - appears to join tab and tabcontent - leaves 1 white pixel in IE!!
		showHidden();
	}
	
	function removeTab(id){
		document.getElementById(tabsarray[id][0]).style.display = 'none'; 					// hide tab
		document.getElementById(tabsarray[id][1]).style.display = 'none'; 					// hide tab content
		tabsarray[id][2] = 0;																// set visibility in array to 0
		var size = tabsarray.length;														// Get length of main array
		var x = 0;																			// set up a counter
		var foundid = 'x';																	// set this to something non-numeric (not sure if there's something better to assign it to. 0 or -1 break it....)
		while (x<size && foundid == 'x'){													// Loop through array until we find a tab...
			if (tabsarray[x][2] == 1){														// ... that is visible
				foundid = x;
			}
			x++;
		}
		if (foundid != 'x'){																// If not all tabs are hidden...
			showTab(foundid);																// ...show the visible tab
		}
		showHidden();
	}
	
	function showHidden(){																	// Lists out hidden tabs
		var size = tabsarray.length;
		var count = 0;																		// number of hidden tabs
		var outstr = '<h1>Hidden tabs:<\/h1>';
		for (i=0;i<size;i++){
			if (tabsarray[i][2] == 0){														// if we find a hidden tab
				outstr += '<a href="#" onclick="showTab(' + i + ')">' + tabsarray[i][3] + '<\/a><br />';	//add it to the list
				count += 1;																	// add 1 to the count
			}
		}
		if (count < 1){																		// if no tabs are hidden
			document.getElementById('hiddentabs').style.display = 'none';					// hide list
			document.getElementById('hiddentabs').innerHTML = '';							// set list to blank (so when it gets shown again it doesn't contain anything innaccurate)
		} else {
			document.getElementById('hiddentabs').style.display = 'block';					// else show "hidden list"
			document.getElementById('hiddentabs').innerHTML = outstr;						// write out output to "hidden list"
		}
	}
	
	function writeTabs(){
		var size = tabsarray.length;														// get size of array
		var outstr = '';
		for (x=0;x<size;x++){																// for each tab in array
			if (tabsarray[x][2] == 1){														// if tab is not hidden
				outstr += '<div class="tab" id="' + tabsarray[x][0] + '" onclick="showTab(' + x + ')"'
				if (x==0){ 																	// if this is first tab then set style to appear selected
					outstr += ' style="background-color:#FFFFFF;border-bottom:1px solid white;"';
				}
				outstr += '>' + tabsarray[x][3] + '<\/div>';
			}
		}
		document.getElementById('tabheader').innerHTML = outstr;
	}
	
	function writeContents(){
		var size = tabsarray.length;														// get size of array
		var outstr = '';
		for (x=0;x<size;x++){																// for each tab in array
			if (tabsarray[x][2] == 1){														// if tab is not hidden
				outstr += '<div class="tabcontent" id="' + tabsarray[x][1] + '"';
				if (x!=0){																	// if not first tab then hide
					outstr += ' style="display:none;"';
				}
				outstr += '><a href="#" onclick="removeTab(' + x + ')">Remove This Tab<\/a><br /><br />';
				outstr += tabsarray[x][4] + '<\/div>';
			}
		}
		document.getElementById('tabbody').innerHTML = outstr;
	} //-->
	</script>
	<style type="text/css">
		body{
			background-color: #DDDDDD;
		}
		#tabcontainer{
			border: 0px solid blue;
		}
		#tabheader{
			position: relative;
			border: 0px solid red;
			height: 27px;
			z-index: 5;
		}
		#tabbody{
			position: relative;
			border: 0px solid green;
			background-color: #FFFFFF;
			z-index: 1;
		}
		.tab{
			border: 1px solid black;

			background-color: #BBBBBB;
			float: left;
			height: 20px;
			min-width: 50px;
			margin-right: -1px;
			padding: 3px;
		}
		.tabcontent{
			border: 1px solid black;
			height: 300px;
			padding: 10px;

		}
	</style>
</head>

<body>
	<div id="tabcontainer">
		<div id="tabheader">&nbsp;</div>
		<div id="tabbody">Error: You will need JavaScript enabled to view this page.</div>
		<div id="hiddentabs">&nbsp;</div>
	</div>
</body>
</html>
Advertisements

About Mr Chimp

I make music, draw pictures, browse the internet, programme, and make sweet, sweet cups of tea until the early hours.
This entry was posted in Uncategorized and tagged , . Bookmark the permalink.

One Response to Tabs V3

  1. Pingback: Jake’s Amazing Tabbed Content System « Mr Chimp Learns to Write

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s