Example

The problem with most of the Tab Navigation solutions available is how messy it tends to make your HTML code. This has lead many people to not even attempt to use them. Scared off by the amount of JavaScript and CSS code required to make them work.

It was this which lead me to come up with a solution that would be easy to implement and require little to no JavaScript knowledge to use.

I’ve created a CSS file and a JavaScript file for you to use. All you need do is to include these files in your page by placing the following two lines in between your HEAD tags

<script src="tab.js"></script>
<link href="tab.css" rel="stylesheet" type="text/css">

Now, where ever you wish the tab navigation page to display in your page use the HTML UL/LI element like below.

<ul class="TabContainer">
	<li>Tab 0</li>
	<li>Tab 1</li>
	<li>Tab 2</li>
	<li>Tab 3</li>
</ul>

As long as the UL tag has the class of “TabContainer” assigned to it, each LI element will become a tab.

For the content you wish to display when the tab is clicked, create a div to hold the content and assign it the class name of “TabContent”

<div class="TabContent">
	<p>I am the content for Tab 0</p>
</div>

<div class="TabContent">
	<p>I am the content for Tab 1</p>
</div>
.
.
.
<div class="TabContent">
	<p>I am the content for Tab 3</p>
</div>

That’s it. You are done (as long you have at least the same number of “TabContent“ divs as you have tabs) . Clicking on Tab 0 will display what is inside the first div, clicking on Tab 1 will display what is inside the second div, etc..

Click to see Example 1

If you wish to use a different color for your tabs simply edit the class “TabColor” in the tab.css file to change it to the color you want.

Tab Sub Menu

If you have the need for a top level navigation menu to appear within each tab then inside each of the content divs place your list of hyper links inside a div with a class of “TabTopNavContent”

<div class="TabContent">
	<div class="TabTopNavContent">
		<a href="#">Link 1</a>
		<a href="#">Link 2</a>
		<a href="#">Link 3</a>
		<a href="#">Link 4</a>
		<a href="#">Link 5</a>
	</div>

	<p>I am the content for Tab 0</p>
</div>

Click to see Example 2

Source Code

tab.js

function showTab (tabNum) {

	// Build Tab and Content ID's based on the tab number
	var tabID = 'Tab' + tabNum;
	var contentID = 'Content' + tabNum;

	// Get the LI object based on the tabID
	objLI = document.getElementById(tabID);

	// If the object exists
	if (objLI) {
		// Get the LI Objects parent (which should be the UL element the LI tag is in)
		objUL = objLI.parentNode;

		// Get all LI's in the UL and set their class and color
		var LIs = objUL.getElementsByTagName("li");
		for (var i = 0; i < LIs.length; i++) {
			var classString = 'Tab TabColor';
			LIs[i].className = classString;
		}

		// Show wanted tab is seleted
		objLI.className += ' Selected';

		// *****
		// ***** Step 2 - Show Tab Content
		// *****

		// Scan for all DIV objects on page that contain the classname TabContent and hide them
		var divObj = document.getElementsByTagName('div');
		for (var i = 0; i < divObj.length; i++) {
			if (divObj[i].className.indexOf("TabContent") >= 0) divObj[i].style.display='none';
		}

		// Show wanted content DIV
		contentObj = document.getElementById(contentID);
		if ( typeof contentObj != "undefined" && contentObj != null ) contentObj.style.display='';
	}

}

function BuildTabs() {

	// Scan for all UL objects on page that contain the classname TabContainer
	var ulObj = document.getElementsByTagName('ul');

	for (var i = 0; i < ulObj.length; i++) {
		if (ulObj[i].className.indexOf("TabContainer") >= 0) {

			// Get all LI's in the UL and set their class name to "Tab"
			var LIs = ulObj[i].getElementsByTagName("li");
			for (var j = 0; j < LIs.length; j++) {

				// Assign Tab Class and Color
				var classString = 'Tab TabColor';
				if (j==0) classString +=  ' Selected';
				LIs[j].id = "Tab" + j;
				LIs[j].className = classString;
				LIs[j].innerHTML = "<a href=\"#" + j + "\" onClick=\"showTab('" + j + "');\">" +
									LIs[j].innerHTML +
									"</a>";
			}
		}
	}

	// Scan for all DIV objects on page that contain the classname TabContent
	var divObj = document.getElementsByTagName('div');
	var cnt = 0;
	for (var i = 0; i < divObj.length; i++) {

		if (divObj[i].className.indexOf("TabContent") >= 0) {

			// Hide it
			divObj[i].style.display='none';
			divObj[i].id = "Content" + cnt;

			// Create colored line and insert it as first item in content div
			lineDiv = document.createElement("div");
			lineDiv.className = "TabTopLine TabColor";
			divObj[i].insertBefore(lineDiv, divObj[i].firstChild); 

			// See if TabContent Div contains a top level navigation div
			var topNavFound = false;
			var tabNavObj = divObj[i].getElementsByTagName('div');
			for (var j = 0; j < tabNavObj.length; j++) {
				// If top leven navigation div found then change background color to match tab
				if (tabNavObj[j].className.indexOf("TabTopNavContent") >= 0) {
					tabNavObj[j].className += " TabColor";
					topNavFound = true;
				}
			}

			// Display first one
			cnt+= 1;
			if (cnt == 1) divObj[i].style.display='';

		}
	}

	// If URL has a hash value then assume it contains the ID of the tab you wish to display
	// so call the showTab function
	locationHash = window.location.hash;
	if (locationHash.length > 0) showTab(locationHash.substring(1));
}

window.onload = BuildTabs;

tab.css

.PageContainer {
	width:640px;
}

.TabContainer {
	border-bottom:1px solid #9f9f9f;
	clear:both;
	display:block;
	height:24px;
	list-style-type: none;
	margin:0;
	padding:0 0 0 10px;
}

.Tab {
	border-left:1px solid #9f9f9f;
	border-top:1px solid #9f9f9f;
	border-right:1px solid #9f9f9f;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:13px;
	height: 15px;
	margin-right:2px;
	opacity: .6;
	filter: alpha(opacity=60);
	padding:4px 10px;
}

.Tab:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

.Tab a {
	color:#5F5F5F;
	text-decoration:none;
}

.TabContent {
	background:#FFFFFF;
	border-left:1px solid #9f9f9f;
	border-right:1px solid #9f9f9f;
	border-bottom:1px solid #9f9f9f;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
}

.TabContent p {
	margin:0px;
	padding:8px;
}

.TabTopLine {
	display:block;
	height:3px;
	line-height:3px;
}

.TabTopNavContent {
	display:block;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	height:20px;
}

.TabTopNavContent a {
	color:#000000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	margin-left:8px;
}

.Selected {
	border-left:1px solid #9f9f9f;
	border-top:1px solid #9f9f9f;
	border-right:1px solid #9f9f9f;
	filter: alpha(opacity=100);
	opacity: 1;
	padding:5px 10px 4px 10px;
}

.Selected a {
	border:0;
	color:#000000;
	font-weight:bold;
	text-decoration:none;
}

/* This is the background colors for the tabs */
.TabColor {background:#FEDA00;}

Scrollable Table Body with a Fixed Table Heading
Tested to work in Firefox 3 and Internet Explorer 7. Safari users may want to check out Floating Table Titles

There is no HTML or CSS standard tag or property that lets you freeze the title row of a table in place while allowing the body to scroll up and down.

Like this:

In response to this I created the “FixedTableHead” CSS class.

I wanted a CSS solution that was easy to use. Other solutions I ran across on the web tended to be inflexible and hard to implement in real world situations. They had you hard coding table widths and heights in multiple locations in the CSS. This can be a real pain if you want to use it for multiple tables that vary in size.

“FixedTableHead” handles multiple tables of different sizes on the same page. I attempted to keep the HTML mark-up as simple as possible. All you need do is to assign a single CSS class name to a DIV that surrounds your table then assign a height you want the table to be as an embedded style. That’s it.

Example:

<div class="FixedTableHead">
	<table style="height:100px;">
		<thead>
			...
		</thead>
		<tbody>
			...
		</tbody>
	</table>
</div>

This has been tested to work in IE7, Firefox 2 and Firefox 3. As long as the table uses a THEAD and a TBODY then the header rows will remain fixed in place while the content in the table body scrolls up or down.

Height: 75px; Width: Nothing – What ever the content sizes it to

Height: 100px; Width: 400px;

Height: 200px; Width:600px;

Height: 60px; Width:200px;

CSS Code:

/* DIV container around table to constrict the height for IE (IE ignores the tbody height style) */
div.FixedTableHead {
	overflow-y:auto;
	margin: 0px;
	padding: 0px;
	border: expression( '1px solid black');

	/* this fixes IE so container width is same as table width */
	width: expression( (this.childNodes[0].clientWidth + 17) + 'px' );

	/* This fixes IE so the container height is table height plus the height of the header */
	height: expression( (parseInt(this.childNodes[0].style.height) +
						 this.childNodes[0].childNodes[1].offsetTop + 1) +'px' );
}

/* Get rid of table cellspacing */
div.FixedTableHead table {
	border-spacing: 0px;
	border-collapse: collapse;
}

/* Get rid of table cellspacing */
div.FixedTableHead table td {
	margin: 0px;
}

/* Scrollable Content */
.FixedTableHead table tbody {
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	border: 1px solid black;
}

.FixedTableHead table tbody tr {
	height: auto;
	white-space: nowrap;
}

/* Prevent Mozilla scrollbar from hiding right-most cell content */
.FixedTableHead table tbody tr td:last-child {
	padding-right: 20px;

}

/* Fixed Header for IE (firefox uses the tbody overflow assignment, which is ignored by IE)   */
/* Note: In IE an element with a position property set to relative and is a child of         */
/* an element that has an overflow property set, the relative value translates into fixed.    */
.FixedTableHead table thead tr {
	position: relative;
	height: auto;
	/* this fixes IE header jumping bug when mousing over rows in the tbody */
	top: expression( this.parentNode.parentNode.parentNode.scrollTop + 'px' );
}

/* Formatting Header Row */
.FixedTableHead table thead tr td {
	color: white;
	background-color: #303433;
}

CSS Text Drop Shadow

How to add cross browser drop shadow to text without the use of images using CSS and non-obtrusive JavaScript.

I’ve wanted to use drop shadows on text for quite awhile. Unfortunately there is just no easy way to do this on a web page without the use of a graphics program and I did not want to make a graphics image every single time I wanted to throw a drop shadow around a piece of text.

The Problem

I searched for a pure CSS approach without much luck. Internet Explorer has a CSS filter that makes dropshadows, but I wanted something that would work in both Firefox (my browser of choice) and Internet Explorer (Note: I’ve been told this solution works in Opera and Safari as well).

I have seen a few people fake a text drop shadow effect by typing the text twice. They used CSS to place one on top of each other, with slight offsets, making the bottom one black so it resembled a hard edged drop shadow.

It’s a neat idea, with a few problems.

1. The drop shadow has a hard edge and looks pretty 1980′ish
2. It’s a pain to set up. You have to type all your text twice, put each in separate DIV tags, position each separately or at least create two different CSS classes to position them for you.

Most people try this once and then drop it. It’s simply too cumbersome to use. I thought the concept had potential, but the problems had to be addressed.

A Solution

What I have come up with is a JavaScript function which runs automatically when your web page finishes loading. It looks through your web page and anywhere it sees an element with the class ‘dropshadow’ it will add a text drop shadow effect to it.

Examples

<h1 class="dropshadow">I am an H1 element with Drop Shadow</h1>

I am an H1 element with Drop Shadow

<div class="dropshadow" style="color:white; font-family:Impact; font-size:4em;">White Impact font in DIV</div>

A link to further examples: http://www.stansight.com/DropShadow2.html

Getting it to work

CSS Class

All you need to get this work is to define this minimal bit of CSS between the HEAD tags of your page:

  <style type="text/css">
  .dropshadow {
     position: relative;
     z-index:10;
  }
  </style>

JavaScript

Place the “DropShadow.js” code in a file called DropShadow.js which is then included in your web page by placing this bit of code between the HEAD tags of you page:

<script src="DropShadow.js"></script>

JavaScript DropShadow.js

Note: To make smaller drop shadows change the value of max_shadows in the CreateShadowChildren function to a smaller number.

   function MakeDropShadow() {

     var node = document;
     var tag = '*';
     var wantedClass = 'dropshadow';

     // Build a regular expression that will search specically for 'wantedClass'
     var pattern = new RegExp("(^|\\s)"+wantedClass+"(\\s|$)");

     // Scan through all tag elements in the document
     var scan_elem = node.getElementsByTagName(tag);
     for (i = 0; i < scan_elem.length; i++) {

       // If element has a class of 'wantedClass'
       if (pattern.test(scan_elem[i].className) ) {

         // Get the value from the element
         var text_value = scan_elem[i].innerHTML;

         // Create Shadow Children for this element
         CreateShadowChildren(scan_elem[i],text_value);
       }
     } // End for loop
   }

  function CreateShadowChildren(shadow_element,shadow_value) {

   var top_pos = .5;
   var left_pos = .5;

   // Assign starting color (in Hex notation) for the Red, Green, and Blue
   // Components (when they all have the same value you will alwys get a gray color).
   // For lighter shadows start with a "lighter" color of 66, 77, 88 99, aa, bb, etc..
   var starting_color = '44';
   var cRed = parseInt(starting_color,'16');
   var cGreen = parseInt(starting_color,'16');
   var cBlue = parseInt(starting_color,'16');

   // Set the max number of shadow elements to create.
   // This should never be set larger than the Z-Index value of dropshadow class
   var max_shadows = 10; 

   // Calculate color increament based on range of gray colors (from starting_color to
   // the lighest gray color of #fefefe) and max number of shadows you want
   var color_inc =  parseInt(( parseInt('fe','16') - parseInt(starting_color,'16') ) / max_shadows,'10');

   for (j = 1; j <= max_shadows; j++) {

     // Build full color Hex string from it's individual RGB values
     var full_color_value = cRed.toString(16) + cGreen.toString(16) + cBlue.toString(16);

     // Create a Shadow DIV
     var shadow_div = document.createElement('div');

     //  Add the shadow_value to Shadow DIV
     shadow_div.innerHTML = shadow_value;

     // Style Shadow DIV
     shadow_div.style.width=shadow_element.offsetWidth + "px";
     shadow_div.style.color = '#' + full_color_value;
     shadow_div.style.borderColor = '#' + full_color_value;
     shadow_div.style.display = "block";
     shadow_div.style.position = "absolute";
     shadow_div.style.top = top_pos + "px";
     shadow_div.style.left = left_pos + "px";
     shadow_div.style.zIndex = (-1) * j;

     // Apppend Shadow DIV to shadow element
     shadow_element.appendChild(shadow_div);

     // Increment positons and shadows individual RGB color values
     top_pos += .5;
     left_pos += .5;
     cRed += color_inc;
     cGreen += color_inc;
     cBlue += color_inc;
   }

  }

 // Run the MakeDropShadow function when the page finishes loading
 window.onload = MakeDropShadow;

http://www.cssbasics.com/ – Learn everything you ever wanted to know about the basics of CSS
http://www.w3schools.com/css/ – CSS tutorials, references, examples for web building
http://www.htmldog.com/guides/cssbeginner/ – CSS Beginner Tutorial
BrainJar.com: Using Style Sheets – Overview of Cascading Style Sheets
Web Design 101 Articles – Each article covers a single subject in depth