Info Customisation Usage

domTab() is a way to create clickable tabs using Cascading stylesheets, the correct HTML and a small javascript (DOM) function.

It is a solution for the design element "Tabs" that does not use a lot of javascript, but keeps the functionality as simple as possible to make sure the page is also accessible to older browsers.

The compatibility is achieved through CSS rather than browser sniffing in Javascript.

Back to top

To customise domTab() to your desired look and feel you can change the stylesheet and the HTML. Elements that cannot be changed in the stylesheet are marked /*mandatory*/.

To make domTab() work you need to ensure that the HTML of the tabs and the content blocks have the necessary IDs, targets and links. Please refer to the Usage tab for more information on that.

In the domTab() Javascript you can change the following variables to customise the number of tabs and the colours:

		var numberOfTabs = 5;
		var colourOfInactiveTab = "#ffffff";
		var colourOfActiveTab = "#669966";
		var colourOfInactiveLink = "#669966";
		var colourOfActiveLink = "#ffffff";

Back to top

To use domTab(), you need to script the correct HTML. The head of your document must contain the following lines:

		<script language="javascript" type="text/javascript" 
		src="domtab.js"></script>
		<link rel="StyleSheet" href="basictabs.css" type="text/css" />
		<style type="text/css">@import "domtabs.css";</style>

The body tag must contain a call to initialise the first tab to be displayed. Add a <a name="top"></a> after the body tag to allow Netscape 4.x users to jump back to the menu.

		<body onload="domTab(1)">

Each Tab is a link, that needs to link to a target, call domTab() with it's number, and have the class "tablink".

		<a href="#target1" onclick="domTab(1)" id="link1" class="tablink">Link 1</a>

Add one of these links for each of the tabs, counting the bold numbers up. The amount of tabs must correspond with the "numberOfTabs" variable in the Javascript.

Each content block must have the correct ID, the class "tab" is only used for layout, you can add your own class. Each content block also needs to have a named link called "target" followed by the number of the content block and a link with the class "backtotop" and linked to "#top" to ensure compatibility.

		<div id="contentblock1" class="tab">
		<a name="target1"></a>
		<p class="backtotop"><a href="#top">Back to top</a></p>
		</div>

Make sure that the bold numbers correspond with the tab number.

Back to top