The JavaScript Source: CSS : Tab View

home » css » tab view

General

A combination of CSS and JavaScript that allows switching between several pages without loading them from server. The script emulates the behavior of tabbed controls in Windows applications.

Basic Info. Categories Order Form

You can put regular text on the tabs.

We have put together a collection of thousands of free JavaScripts that are available to you for use on your Web pages. The scripts are available, including a working JavaScript example of most of the scripts and the complete actual JavaScript code used.

We also have a great JavaScript Forum where you can post script requests, script questions, and more.

Notes

Created by: Ilya S. Lyubinskiy
Web Site: http://www.php-development.ru/
Posted: January 25, 2006

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: tabView.js

/* Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
Technical support: http://www.php-development.ru/

YOU MAY NOT
(1) Remove or modify this copyright notice.
(2) Distribute this code, any part or any modified version of it.
    Instead, you can link to the homepage of this code:
    http://www.php-development.ru/javascripts/tabview.php.

YOU MAY
(1) Use this code on your website.
(2) Use this code as a part of another product.

NO WARRANTY
This code is provided "as is" without warranty of any kind, either
expressed or implied, including, but not limited to, the implied warranties
of merchantability and fitness for a particular purpose. You expressly
acknowledge and agree that use of this code is at your own risk.


If you find my script useful, you can support my site in the following ways:
1. Vote for the script at HotScripts.com (you can do it on my site)
2. Link to the homepage of this script or to the homepage of my site:
   http://www.php-development.ru/javascripts/tabview.php
   http://www.php-development.ru/
   You will get 50% commission on all orders made by your referrals.
   More information can be found here:
   http://www.php-development.ru/affiliates.php
*/

// ----- Auxiliary -------------------------------------------------------------

function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

div.TabView div.Tabs {
  height: 24px;
  overflow: hidden;
}

div.TabView div.Tabs a {
  float: left;
  display: block;
  width:  90px;
  text-align: center;
  height:      24px;
  line-height: 28px;
  vertical-align: middle;
  background: url('/img/tab-view/tabs.png') no-repeat -2px -1px;
  text-decoration: none;
  font-family: "Times New Roman", Serif;
  font-weight: 900;
  font-size: 13px;
  color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
  background: url('tabs.png') no-repeat -2px -31px;
}

div.TabView div.Pages {
  clear: both;
  border: 1px solid #404040;
  overflow: hidden;
}

div.TabView div.Pages div.Page {
  height: 100%;
  padding: 0px;
  overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
  padding: 3px 18px;
}

Head

Paste this code into the HEAD section of your HTML document.

<script type="text/javascript" src="tabView.js"></script>

Body

Paste this code into the BODY section of your HTML document

<div class="TabView" id="TabView">
<!-- *** Tabs
************************************************************** -->
<div class="Tabs" style="width: 350px;"> <a>Basic
Info.</a> <a>Categories</a> <a>Order
Form</a>
</div>
<!-- *** Pages
************************************************************* -->
<div class="Pages" style="width: 450px; height: 250px; text-align:
left;"> <div class="Page"> <div class="Pad"> <!-- ***
Page1 Start *** -->
<br>
You can put regular text on the tabs.
<p>
We have put together a collection of thousands of free JavaScripts that
are available to you for use on your Web pages. The scripts are
available, including a working JavaScript example of most of the
scripts and the complete actual JavaScript code used.</p>
<p>
We also have a great JavaScript Forum where you can post script
requests, script questions, and more.</p> <!-- *** Page1 End
***** --> </div> </div> <!-- *** Page2 Start ***
--> <div class="Page"> <div class="Pad">
<br>
Categories include:<br>
<table cellpadding="15" valign="top">
<tr>
<td>
• Cookies<br>
• CSS<br>
• Forms<br>
</td><td>
• Games<br>
• Generators<br>
• Image Effects
</td><td>
• Math Related<br>
• Miscellaneous<br>
• Navigation
</td></tr><tr><td>
• Page Details<br>
• Security<br>
• Snippets
</td><td>
• Time & Date<br>
• Tools<br>
• Tutorials
</td><td>
• Text Effects<br>
• User Details
</td>
</tr>
</table> <!-- *** Page2 End ***** --> </div>
</div> <div class="Page"> <div class="Pad"> <!--
*** Page3 Start *** --> <br>
<p>
You can also use forms on the tab pages. <small><em>(This
one is just an example; it doesn't
work.)</em></small></p> <table> <tr>
<td>Username: </td> <td><input style="width:
120px;" type="text" name="username" /></td> </tr>
<tr> <td>Password: </td> <td><input
style="width: 120px;" type="password" name="password" /></td>
</tr> <tr> <td> </td> <td><input
type="submit" value="Submit" /></td> </tr>
</table> <!-- *** Page3 End ***** --> </div>
</div>

Other

Download the images using the URL below:

Download the images here

Add this to the end of your page:

<script type="text/javascript">
  tabview_initialize('TabView');
</script>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

• Cookies • CSS • Forms	• Games • Generators • Image Effects	• Math Related • Miscellaneous • Navigation
• Page Details • Security • Snippets	• Time & Date • Tools • Tutorials	• Text Effects • User Details

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

8. From: tarkahn
07/14/2008 20:48:39

7. From: Jonathan
return form results to tabs other than #1
07/20/2007 10:16:53

9. From: bob kershwey
tab viewer
04/06/2008 14:16:56

10. From: Lee (Admin)
10/31/2008 14:10:20

6. From: Susan
03/07/2007 19:31:55

5. From: diego arcila
01/28/2007 19:03:43

4. From: Shreya Dahal
01/26/2007 12:14:25

3. From: Claes
01/06/2007 13:56:56

2. From: Senthil Kumar S
12/08/2006 00:32:45

1. From: Eric
12/07/2006 02:59:22

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Username:
Password:

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

Other

User Comments

8. From: tarkahn07/14/2008 20:48:39

7. From: Jonathanreturn form results to tabs other than #107/20/2007 10:16:53

9. From: bob kershweytab viewer04/06/2008 14:16:56

10. From: Lee (Admin)10/31/2008 14:10:20

6. From: Susan03/07/2007 19:31:55

5. From: diego arcila01/28/2007 19:03:43

4. From: Shreya Dahal01/26/2007 12:14:25

3. From: Claes01/06/2007 13:56:56

2. From: Senthil Kumar S12/08/2006 00:32:45

1. From: Eric12/07/2006 02:59:22

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

8. From: tarkahn
07/14/2008 20:48:39

7. From: Jonathan
return form results to tabs other than #1
07/20/2007 10:16:53

9. From: bob kershwey
tab viewer
04/06/2008 14:16:56

10. From: Lee (Admin)
10/31/2008 14:10:20

6. From: Susan
03/07/2007 19:31:55

5. From: diego arcila
01/28/2007 19:03:43

4. From: Shreya Dahal
01/26/2007 12:14:25

3. From: Claes
01/06/2007 13:56:56

2. From: Senthil Kumar S
12/08/2006 00:32:45

1. From: Eric
12/07/2006 02:59:22