Tab View

Ilya Lyubinskiy Jan 25, 2006

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.

Categories include:

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

You can also use forms on the tab pages. (This one is just an example; it doesn't work.)

Username:
Password:

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>

Leave a Response

(10 comments)

Your question is beyond the scope of these comments. You will need to post it over on [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]the JavaScript forum[/a]. Thanks!

Lee Oct 31, 2008

This is a GREAT script !!![br /]Thanks for making it, and making it available =)[br /][br /]it's maybe even a little too easy to use..[br /]hmmm.....[br /][br /][br /]THANKS AGAIN

tarkahn Jul 14, 2008

i need help , i love this script it works perfectly, but on two of the tabs the content moves when you use the mouse wheel scroller any answers? thanks[br /]bob

bob kershwey Apr 6, 2008

I'm trying to submit form data to the same tab as it was spawned, but the script always returns to tab 1.[br /]how can i make the page start on tabs other than #1, like a named anchor?

Jonathan Jul 20, 2007

I'm trying to add more tabs but it isn't working. I must be missing something. Is there some trick?

Susan Mar 7, 2007

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details