What is input prompt text?

You’re probably familiar with the concept, even if you don’t know what I’m talking about. Here’s an example:

The prompt text appears inside the form field as soon as the page loads, so users immediately know what it’s for. Simple, right?

Why it Doesn’t Work

There are a number of problems you’ll encounter while implementing prompt text into your forms. Watch out for these caveats when you’re developing your own solution.

1. Input validation — if someone submits the form without first removing the prompt text, your prompt text is submitted in lieu of real data. Fixing this is a pain. Avoiding this entirely is recommended.
2. Prompt style — it’s best to style the prompt text so that it doesn’t look like real form data. Creativity is a virtue, but generally web users will expect light (gray) text and italics. This can be problematic because you’ll have to swap the input style back and forth using JavaScript.
3. Losing focus — when users focus on a form field, don’t type anything, and then click somewhere else, you should always add the prompt text back into the input box. Otherwise, users could miss the intent of the form field entirely. Again, you’ll have to do this with JavaScript, which can be a little tricky.
4. Progressive enhancement — always make sure that users without JavaScript can still understand and interact with your form fields. This is progressive enhancement at its finest.

The Solution

Almost everything related to the problems listed above originates from one basic fact: you’re trying to create both a field and a label using a single HTML element. When you take a step back and think about that, it really doesn’t make much sense, does it? The solution lies in separating the form field from the label entirely. We’ll use a little bit of jQuery to create an elegant solution that dynamically creates these labels and places them over our form fields. Because we’re creating two separate elements, we can use CSS to style them independently. Perfect!

The jQuery:

$(document).ready(function(){
  $('input[type=text][title],input[type=password][title],textarea[title]').each(function(i){
    $(this).addClass('input-prompt-' + i);
    var promptSpan = $('<span class="input-prompt"/>');
    $(promptSpan).attr('id', 'input-prompt-' + i);
    $(promptSpan).append($(this).attr('title'));
    $(promptSpan).click(function(){
      $(this).hide();
      $('.' + $(this).attr('id')).focus();
    });
    if($(this).val() != ''){
      $(promptSpan).hide();
    }
    $(this).before(promptSpan);
    $(this).focus(function(){
      $('#input-prompt-' + i).hide();
    });
    $(this).blur(function(){
      if($(this).val() == ''){
        $('#input-prompt-' + i).show();
      }
    });
  });
});

The CSS:

.input-prompt {
  position: absolute;
  font-style: italic;
  color: #aaa;
  margin: 0.2em 0 0 0.5em;
}

The HTML:

<input type="text" title="Enter search keywords..." />

Basically, this script finds any <input> tags that have a title attribute (i.e. <input title="Enter search keywords..." />). For each of these form fields, it takes the title and creates a little <span> tag next to it. The CSS positions the <span> tag so that it appears on top of the form field. The rest is just a little bit of scripting that makes sure to hide and show the labels based on what the user is doing with the input box.

The Result

Here is a demo of the code shown above:

Users without JavaScript enabled will see the normal title tool tips when they hover their mouse cursor over the form field. Please note that you’ll probably have to adjust the margin a bit in the CSS to make sure the labels fit the size of your input boxes. For more information on jQuery and all the great things it can do, visit jQuery.com.

The Old Way

Did you work with AJAX way back when, when it first came out? You might remember that an AJAX request looked a little like this.

var xmlhttp;
xmlhttp = GetXmlHttpObject();
if(xmlhttp == null){
  alert("Boo! Your browser doesn't support AJAX!");
  return;
}
xmlhttp.onreadystatechange = stateChanged;
xmlhttp.open("GET", "http://www.google.com", true);
xmlhttp.send(null);

function stateChanged(){
  if(xmlhttp.readyState == 4){
    // do something with the response text
    alert(xmlhttp.responseText);
  }
}
function GetXmlHttpObject(){
  // IE7+, Firefox, Chrome, Opera, Safari
  if(window.XMLHttpRequest){
    return new XMLHttpRequest();
  }

  //IE5, IE6
  if(window.ActiveXObject){
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
  return null;
}

In a nutshell, that sucks! All of that code to simply request the contents of Google’s home page, and then alert in the window. That’s not very helpful at all. Alternatively, here is the exact same function written in jQuery:

$.ajax({
  url: 'http://www.google.com',
  success:function(data){
    alert(data);
  }
});

As you can plainly see, the jQuery AJAX method is much easier to wrap your mind around. You give it a URL to request, and then you give it a set of instructions if a successful request is made. Easy!

I understand that it’s not very useful to request the contents of a web page and alert it to your users (in fact, that’s probably pretty annoying), so let’s take it up a notch. jQuery AJAX features a ridiculous amount of customization options, events, and the like to give you a huge amount of flexibility, and it can be hard to find a good place to start. I’ll help you find the starting line, and you can take it from there.

The Perfect AJAX Request

I’m fairly positive that by using the term perfect, I’m going to get a good amount of nay-sayers telling me why jQuery AJAX sucks, but that’s not what I’m getting at. This jQuery function is perfect in the sense that it handles 99% of all the AJAX requests you’ll ever need to make, it includes a success and failure function to ensure that users get the proper feedback they need, and you’ll get a spinning loading image while the request is being processed to boot. Throw on top of that the fact that it’s extremely easy to use, and I’d say you have something that’s pretty damned close to perfect, at least in my book. Here is the template:

$.ajax({
  type: 'POST',
  url: 'http://www.kyleschaeffer.com/feed/',
  data: { postVar1: 'theValue1', postVar2: 'theValue2' },
  beforeSend:function(){
    // this is where we append a loading image
    $('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="Loading..." /></div>');
  },
  success:function(data){
    // successful request; do something with the data
    $('#ajax-panel').empty();
    $(data).find('item').each(function(i){
      $('#ajax-panel').append('<h4>' + $(this).find('title').text() + '</h4><p>' + $(this).find('link').text() + '</p>');
    });
  },
  error:function(){
    // failed request; give feedback to user
    $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
  }
});

In this case, I’m loading my site’s RSS feed into a <div/> with an ID of ajax-panel. What does it look like exactly, you ask? Let’s try it out.

Data Types

We’re loading an RSS feed in this example, so the AJAX function is designed to interpret XML data. jQuery AJAX also understands a number of other data formats, such as HTML, plain text, and even JSON. Find out more about data types at the jQuery AJAX documentation page.

Loading Image

Did you notice the spinning loading image? In the beforeSend function, we’re appending a loading image to our AJAX panel, and we’re then taking it out when a request has completed. If you’re not already aware, be sure to check out the very handy website, Ajaxload. This site allows you to quickly create spinner images of any size and color. They have an impressive array of bars, circles, flowers, and the like, so all your design needs should be satiated by the array of options they provide. It’s always a good idea to include a loading image when working with AJAX requests — depending on the client’s connection speed and a number of other variables, the time it takes to complete a request can vary. Don’t assume it will be lickity-split and lightning fast every time. Give your users some feedback to let them know that you’re working on it.

POST Data

You may have noticed that we’re using POST as the request type. POST requests works just like GET requests, except you get the added flexibility to also send data and other variables along with your request. We sent some dummy data that isn’t used by the RSS feed (data: { postVar1: 'theValue1', postVar2: 'theValue2' }), so feel free to change or omit this line of code in order to customize your AJAX request function. As an example, you could send a variable like userId: '45' to a custom PHP script that in return sends you information about a particular user. The possibilities are endless!

Remember the Search

Take what you’ve learned and venture into the wide world of web development armed with the knowledge you now possess. Destroy post-backs wherever they may live, and always remember that Google hates AJAX and won’t interpret anything on your page that’s loaded via script! Good luck, and happy styling.

The CSS Style

There are two elements you’ll have to implement into your design in order to create a lightbox — CSS and Javascript. We’ll take care of the CSS style first, as it’s the most simple to implement. On your page or in an attached style sheet, add the following CSS styles:

#lightbox {
	position: absolute;
	top: 0;
	left: 50%;
	width: 500px;
	margin-left: -250px;
	background: #fff;
	z-index: 1001;
	display: none;
}
#lightbox-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	-khtml-opacity: 0.75;
	opacity: 0.75;
	z-index: 1000;
	display: none;
}

What we just did: we established two styles. One style is for the lightbox that actually appears on the page (#lightbox). The second style is for lightbox background (#lightbox-shadow). We have made this background dark and semi-transparent in order to dim the site’s content as it appears behind the lightbox.

The jQuery Script

The real work is done via our simple jQuery script. We have two JavaScript functions that will handle displaying and hiding our lightbox. First, make sure you have attached the jQuery library to your page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Now, in an attached .js file, add the following script code.

/****************************************
	Barebones Lightbox Template
	by Kyle Schaeffer
	kyleschaeffer.com
	* requires jQuery
****************************************/

// display the lightbox
function lightbox(insertContent, ajaxContentUrl){

	// add lightbox/shadow <div/>'s if not previously added
	if($('#lightbox').size() == 0){
		var theLightbox = $('<div id="lightbox"/>');
		var theShadow = $('<div id="lightbox-shadow"/>');
		$(theShadow).click(function(e){
			closeLightbox();
		});
		$('body').append(theShadow);
		$('body').append(theLightbox);
	}

	// remove any previously added content
	$('#lightbox').empty();

	// insert HTML content
	if(insertContent != null){
		$('#lightbox').append(insertContent);
	}

	// insert AJAX content
	if(ajaxContentUrl != null){
		// temporarily add a "Loading..." message in the lightbox
		$('#lightbox').append('<p class="loading">Loading...</p>');

		// request AJAX content
		$.ajax({
			type: 'GET',
			url: ajaxContentUrl,
			success:function(data){
				// remove "Loading..." message and append AJAX content
				$('#lightbox').empty();
				$('#lightbox').append(data);
			},
			error:function(){
				alert('AJAX Failure!');
			}
		});
	}

	// move the lightbox to the current window top + 100px
	$('#lightbox').css('top', $(window).scrollTop() + 100 + 'px');

	// display the lightbox
	$('#lightbox').show();
	$('#lightbox-shadow').show();

}

// close the lightbox
function closeLightbox(){

	// hide lightbox and shadow <div/>'s
	$('#lightbox').hide();
	$('#lightbox-shadow').hide();

	// remove contents of lightbox in case a video or other content is actively playing
	$('#lightbox').empty();
}

Ready for Lightboxing

Once you have the CSS and script into place, you can call your new lightbox(); function from anywhere within your design. It’s as easy as calling the lightbox from an anchor tag:

<a href="javascript:lightbox('Hello!');">Show me the lightbox</a>

Remember, clicking anywhere on the “shadow” <div/> will hide the lightbox — you could easily add a “close” button to your lightbox by connecting it to the closeLightbox(); JavaScript function.

Similarly, you can insert HTML (or even a jQuery DOM object) into the lightbox. Like so:

<a href="javascript:lightbox('<p><strong>Rich</strong> content works too!</p>');">Show me the lightbox</a>

Finally, you can even use this simple lightbox function to insert AJAX content. Please keep in mind that my JavaScript function simply inserts the entire result into the #lightbox element — if you’re trying to request a website or HTML page, you’ll probably have to remove the <html/> and <body/> tags before inserting content into your lightbox window, else the lightbox would simply disappear. An AJAX lightbox request looks a little like this:

<a href="javascript:lightbox(null, 'http://foo.com/readme.txt');">Show me the lightbox</a>

The Demo

• Try it out: Show me the lightbox
• Let’s load some AJAX content: Load the CSS file for this tutorial into a lightbox

If you’re on a fast connection, you may not notice, but the AJAX link actually reads “Loading…” in the lightbox a split-second before the content actually appears. This can be useful to give users feedback while the AJAX request is processing. Please note that I’ve added a bit of styling to my demo (namely padding on the lightbox to make it appear less cluttered).

Make it Shine

You’ll probably want to modify the CSS and other elements of this lightbox in order to suit your site’s design and style. If you’re working with a lot of AJAX content, you may want to even replace the temporary loading element with an animated spinner image, or something of the like.

To help you get started, you can download the CSS and JavaScript referenced in this tutorial here:

• lightbox.css
• lightbox.js

Good luck, and happy styling!

For the (better) browsers…

It’s easy to add corners to your design in most browsers. In a previous post, I talked about the different ways to apply CSS corners within your design. Here’s what I used for this particular client.

.corners {
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}
.noTL {
	-moz-border-radius-topleft: 0;
	-webkit-border-top-left-radius: 0;
}
.noTR {
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
}
.noBL {
	-moz-border-radius-bottomleft: 0;
	-webkit-border-bottom-left-radius: 0;
}
.noBR {
	-moz-border-radius-bottomright: 0;
	-webkit-border-bottom-right-radius: 0;
}

This made it extremely easy to add corners to the elements in my design. In most cases, I could simply add <div class="myDivClass corners"/>, and the CSS does the rest. If I don’t want a rounded edge on a particular corner, I can just add noTR, noBL, etc. to my class list. Easy.

For the other (not-so-better) browser…

Disclaimer: this really doesn’t do anything entirely too amazing. It’s not auto-magically generating corner images, and it’s not inserting a ton of HTML to simulate corner images (I just hate when scripts do that). This is a script I have been using for a while to add corners for IE users; basically, it builds a custom image path for each style of widget in your design marked with the corners CSS class. For each corners widget that my script finds, it will trace up through your HTML until it finds a parent element with a background-color. It then creates four <div/> tags inside your widget and positions them at the outer corners of the widget. The background-image for these <div/> tags is set to something like corners-12-ffffff.png or corners-12-ffaa10-border (if your widget has a border-width associated with it). The 12 is the radius of your corner, and ffffff is the background color that appears behind your widget. You’ll have to create the images yourself (and put them in the right place), but my script will handle inserting the HTML and CSS in the right place. If you create the images a little like this, then you’ll find that your IE corners will be in place in no time at all.

It’s certainly not ground-breaking stuff, but it makes it very easy to reduce the overhead in your design for most users. In addition, the script is fairly small, and you’ll find it’s really not much overhead for IE users as well. Here’s how to add it to your site:

1. You’ll need jQuery 1.3.2 or later linked to your page
2. Add the CSS (above) to your style sheet. This takes care of everyone except for IE.
3. Create a new JavaScript file with the following contents:

   /*******************************************
   
   	IE Corner Inserts v1.0
   
   	by Kyle Schaeffer
   
   http://www.kyleschaeffer.com
   
   	* requires jQuery 1.3.2 or later
   
   *******************************************/
   
   // change this path to match the path to your corner image files
   var cornerImagePathPrefix = '/designImages/';
   
   // default file extension for corner images is PNG
   var cornerImageFileExtension = '.png';
   
   // default corner radius
   var cornerRadius = '12';
   
   $(document).ready(function(){
   	$('.corners').each(function(i){
   		var parentDiv = $(this).parent();
   		var cornerColor = null;
   
   		// find parent background color (trace up through DOM)
   		while(cornerColor == null && parentDiv != null){
   			if($(parentDiv).css('background-color') != 'transparent'){
   				cornerColor = $(parentDiv).css('background-color');
   				cornerColor = cornerColor.substr(1);
   			}
   			else if($(parentDiv).hasClass('bodyWrapper')){
   				cornerColor = '6f98ae';
   			}
   			else{
   				parentDiv = $(parentDiv).parent().get(0);
   			}
   		}
   
   		// apply corner <div/> tags to elements
   		if(cornerColor != null){
   			// find border offsets
   			var offsetTop = parseInt($(this).css('border-top-width')) || 0;
   			var offsetRight = parseInt($(this).css('border-right-width')) || 0;
   			var offsetBottom = parseInt($(this).css('border-bottom-width')) || 0;
   			var offsetLeft = parseInt($(this).css('border-left-width')) || 0;
   
   			// add "-border" to any image path (for border-only corners)
   			var borderImageText = '';
   			if(offsetTop > 0 && offsetRight > 0 && offsetBottom > 0 && offsetLeft > 0){
   				borderImageText = '-border';
   			}
   
   			// change color values like "#fff" to "#ffffff"
   			if(cornerColor.length == 3){
   				cornerColor += cornerColor;
   			}
   
   			// set position to relative (if not already set)
   			if($(this).css('position') != 'absolute' && $(this).css('position') != 'relative'){
   				$(this).css('position','relative');
   			}
   
   			// corner image filename
   			var cornerImage = 'corners-' + cornerRadius + '-' + cornerColor + borderImageText + cornerImageFileExtension;
   
   			// add corners
   			if(!$(this).hasClass('noTL')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') top left no-repeat;"/>');
   				$(cornerDiv).css('top',(offsetTop * -1) + 'px');
   				$(cornerDiv).css('left',(offsetLeft * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   			if(!$(this).hasClass('noTR')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') top right no-repeat;"/>');
   				$(cornerDiv).css('top',(offsetTop * -1) + 'px');
   				$(cornerDiv).css('right',(offsetRight * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   			if(!$(this).hasClass('noBL')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') bottom left no-repeat;"/>');
   				$(cornerDiv).css('bottom',(offsetBottom * -1) + 'px');
   				$(cornerDiv).css('left',(offsetLeft * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   			if(!$(this).hasClass('noBR')){
   				var cornerDiv = $('<div style="position: absolute; height: ' + cornerRadius + 'px; width: ' + cornerRadius + 'px; background: url(' + cornerImagePathPrefix + cornerImage + ') bottom right no-repeat;"/>');
   				$(cornerDiv).css('bottom',(offsetBottom * -1) + 'px');
   				$(cornerDiv).css('right',(offsetRight * -1) + 'px');
   				$(this).append(cornerDiv);
   			}
   		}
   	});
   });
   
   String.prototype.endsWith = function(str){
   	return(this.match(str+"$")==str);
   }

4. Take a look at the configuration variables near the top of the script and update if needed
5. Link to your new JS file, but make sure only IE users are loading the file:

   <!--[if lte IE 8]>
   	<script type="text/javascript" src="/path/to/IE-Corner-Inserts.js"></script>
   <![endif]-->

6. Create your corner images and place them in the correct path on your web server. I recently made available a corner images Photoshop template if you need help getting started.

That’s it! If all goes well, you should hopefully see image-based rounded corners in Internet Explorer, as well as the more simplistic CSS-powered corners in all other browsers.

Adding jQuery is Easy

You’ll need to include a few JavaScript libraries in order to use jQuery tabs at all. These libraries can be somewhat cumbersome for users on slower connections to download, and it’s definitely the major disadvantage of using a library like jQuery to add this sort of functionality to your site. The best things we can do in this case is try to minimize the effect of serving this JS library to our clients. First of all, I would recommend always using the “minified” version of the jQuery script. It’s much smaller in size than the standard version, which obviously will reduce the amount of time needed to load your site when users first visit it. The only difference between the minified and the standard library is that the good folks at jQuery have removed all sorts of characters in the document, which makes it less readable, but makes the file size much smaller. If you want to delve into the depths of the jQuery library, you can download the standard version and take a gander offline, but don’t force your users to download the full version if you don’t have to.

Additionally, Google (here) and Microsoft (here) have both set up distribution networks to serve these libraries to your users. Don’t waste bandwidth and your clients’ time by forcing users to download these libraries from your servers! Chances are, Google/Microsoft have the resources to serve these files to you users faster and more reliably than you can, so please utilize these free services. Additionally, users have a much greater chance of already having a cached version of these files when you used the shared location. Sweet!

Add the library references to your <head/> to get started.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>

The Tabs Markup

What’s so wonderfully beautiful about jQuery tabs is the simplicity of the HTML. Even more, users who aren’t using JavaScript will visit your site and see a perfectly formatted and functioning page. Use this as a template for your tabs HTML:

<div class="ui-tabs">
	<ul class="ui-tabs-nav">
		<li><a href="#tabs-1">Tab One</a></li>
		<li><a href="#tabs-2">Tab Two</a></li>
		<li><a href="#tabs-3">Tab Three</a></li>
	</ul>
	<div id="tabs-1" class="ui-tabs-panel">
		<p>Content one.</p>
	</div>
	<div id="tabs-2" class="ui-tabs-panel">
		<p>Content two.</p>
	</div>
	<div id="tabs-3" class="ui-tabs-panel">
		<p>Content three.</p>
	</div>
</div>

Add Some Style

This is where my template really starts to differ from jQuery’s version. The CSS jQuery would have you use is not simple enough for me, so I created my own version of the CSS that will give you a very basic frame onto which you can apply your own design. Here’s what I like to start with:

.ui-tabs {
	zoom: 1;
}
.ui-tabs .ui-tabs-nav {
	list-style: none;
	position: relative;
	padding: 0;
	margin: 0;
}
.ui-tabs .ui-tabs-nav li {
	position: relative;
	float: left;
	margin: 0 3px -2px 0;
	padding: 0;
}
.ui-tabs .ui-tabs-nav li a {
	display: block;
	padding: 10px 20px;
	background: #f0f0f0;
	border: 2px #ccc solid;
	border-bottom-color: #ccc;
	outline: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
	padding: 10px 20px 12px 20px;
	background: #fff;
	border-bottom-style: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-state-processing a {
	cursor: default;
}
.ui-tabs .ui-tabs-nav li a,
.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	clear: both;
	border: 2px #ccc solid;
	padding: 10px;
}
.ui-tabs .ui-tabs-hide {
	display: none;
}

Now Make it Do Something

Now that you have your tabs there, you’ll have to initialize them with a simple jQuery statement in order for them to work. Just add this line of JavaScript anywhere on your page.

<script type="text/javascript">
	$(document).ready(function(){
		$(".ui-tabs").tabs();
	});
</script>

The Result

Once you’ve added each of these elements to your page, you should get a very simple tab structure that awaits your styling genius. Just modify the CSS to apply your own design!

Now you’ve got it. Good luck, and happy styling.

When I use the term “DHTML,” I am referring to “Dynamic HTML.” This is an endearing term that many web designers use to describe the fusion of HTML with other web technologies, such as JavaScript and CSS. By using various technologies in tandem, we can create dynamic controls that allow website visitors to interact with content directly on the page without the need to refresh the site with every subsequent click.

The HTML

As you will soon see, the tab strip is a prime example of a DHTML control. Before we delve into every aspect of the tab strip, let’s first start with the HTML:

<div class="tabStrip">
	<ul>
		<li><a href="javascript:openTab(1);" class="tabLinkActive" id="tabLink1">TabOne</a></li>
		<li><a href="javascript:openTab(2);" class="tabLink" id="tabLink2">TabTwo</a></li>
		<li><a href="javascript:openTab(3);" class="tabLink" id="tabLink3">TabThree</a></li>
	</ul>
</div>
<div class="tabContentActive" id="tabContent1">
	This is sample tab content (1).
</div>
<div class="tabContent" id="tabContent2">
	This is sample tab content (2).
</div>
<div class="tabContent" id="tabContent3">
	This is sample tab content (3).
</div>

The HTML is relatively simple. We are using an unordered list (<ul/>) for our tabs, and we are using <div/> tags for our tab content. As you can see, I am giving a unique id attribute to each tab link and to each tab content <div/>. This is important, as we’ll need unique id‘s in order to access these elements with JavaScript.

The JavaScript

We are using only one small JavaScript function for the tab control. Here is the code:

<script type="text/javascript" language="javascript">
	var activeTab = 1;
	function openTab(tabId) {
		// reset old tab and content
		document.getElementById("tabLink"+activeTab).className = "tabLink";
		document.getElementById("tabContent"+activeTab).className = "tabContent";
		// set new tab and content
		document.getElementById("tabLink"+tabId).className = "tabLinkActive";
		document.getElementById("tabContent"+tabId).className = "tabContentActive";
		activeTab = tabId;
	}
</script>

The CSS:

This CSS is a very basic example of what you can do to style your tabs. You can add colors, gradients, and background images to give the control even more design flare.

.tabStrip ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.tabStrip li {
	margin: 0 2px 0 0;
	list-style-type: none;
	float: left;
}
.tabLink {
	display: block;
	text-decoration: none;
	padding: 5px;
	background: #e8e8e8;
	border: #dadada solid;
	border-width: 1px 1px 0 1px;
	color: #8a8a8a;
}
.tabLinkActive {
	display: block;
	text-decoration: none;
	padding: 5px;
	background: #e0e0e0;
	border: #c0c0c0 solid;
	border-width: 1px 1px 0 1px;
	color: #0066ff;
}
.tabContent {
	display: none;
}
.tabContentActive {
	display: block;
	clear: both;
	background: #f0f0f0;
	border: 1px #dedede solid;
	padding: 10px;
}

The Result:

In true DHTML fashion, we have combined HTML, JavaScript, and CSS to create a fully dynamic user control that can appear anywhere on the web. I have taken the fundamentals learned in this tutorial and have created a more visually appealing example of this code. Click on the image below to see the demo.

Note that the demo also utilizes Karate Corners to create rounded edges on the tabs. Learn more about Karate corners here.