< Neo22s />

Hi there!

First script to release!

Today I was working on a simple solution for a tab switcher, I found many ways of doing it, but many of them required jQuery or another and why the heck I want all that big script if I just want a tab switcher.

Guess what? I better do it myself :P

The thing is that this is the first script that I release here, normally I would try to follow this schema for each script.

Script Name: jsTabs
Version: 0.1
License: GPL v3
Screenshot:

Live Demo

Download

Installation

Just download the .zip file , uncompress and try ;)

Support: Use the forum please ;)

Usage

The main function is ShowTab(id)

function ShowTab(id){
	//hidding the boxes
	var eBox = getElementsByClass("box",document.getElementById('box_container'),"div");//all the boxes
	for (i in eBox) hide(eBox[i].id);
	//show the box
	show('box'+id);
 
	//change tab class
	var eTab = getElementsByClass("tab_selected",document.getElementById('tab_container'),"span");//all the tabs
	for (i in eTab) eTab[i].className ='tab';
	//set on the tab
	document.getElementById('tab'+id).className ='tab_selected';
}

The event to call this function can be onclick, onmouseover or any other you want.

Example:

<span id="tab1" class="tab_selected" onclick="ShowTab(1);">Tab 1</span>
<span id="tab2" class="tab" onclick="ShowTab(2);">Tab 2</span>
<div id="box1" class="box">box1</div>
<div id="box2" class="box">box2</div>

How works

The script uses a really simple css for colours and positioning.

.tab {
	background-color:#999999;
	color:#FFFFFF;
	cursor:pointer;
	padding:5px 5px 0 5px;
}
.tab_selected {
	background-color:#237BB2;
	color:#FFFFFF;
	font-weight: bold;
	cursor:pointer;
	padding:5px 5px 0 5px;
}
.box{
	background-color:#237BB2;
	color:#FFFFFF;
	padding:5px 5px 0 5px;
}

We have 2 elements:

• Tab to throw the event (instead of an span can be any other element)
• Box to display content (instead of a div can be any other element)

The tab call the function ShowTab. This function checks all the box items with a given class and change his class.

Normally this is a heavy load use, but for netscape we have native getElementsByClass. For ie and others we use a function where we can specify a node to check inside and make it faster.

Notes
This script uses the function getElementsByClass originally from dustin diaz
Works on FF 3.5, Chromium, ie6

• Sql query counter
• Error in Open Classifieds 1.4.2 function isSpam() missing
• Free SMS Notification for high server load
• Search suggestions in AJAX + PHP
• Custom Error for WordPress

• Callaway Women's Bliss Golf Shoe
• Why Auto Responders are an Important Part of a Home Business
• Home Improvement Tips for Your Home