If you visit big news sites like New York Times or Yahoo! News you’ll find that a section of their news contents is presented under ‘localized’ tabs.
They are localized because those contents occupy a small portion of the webpage, while the tabs are similar to menus in top menu-bar.
When a viewer clicks on a tab she can see contents under that tab. The next tab will present a new set of contents.
And all this while though the tabbed contents are changing, the webpage remains unchanged.
We’ve in a video article used shown the use of a free JavaScript to create news tabs with scrollbar.
The scrollbar which is designable comes into view only when the content exceeds the space inside the box. See the example on the left.
In this article we will be using another free JavaScript to create tabbed news that can be put anywhere on a webpage.
This is similar to the one above, but there are 2 differences. Take a look at the demo of tabbed contents below.
There are 2 examples. The first one has adjustable length. The box shortens or lengthens according to the amount of content for each tab.
In the second tab, Products, you can see there is a nested tab that again has 3 tabs.
In the second example of the demo, the height of the content box is kept fixed. When the amount of content exceeds the space (click ‘About’, the second tab), a scrollbar promptly appears to the right that makes it easy to scroll the content down for reading.
How To Do It
As always the HTML code for both the examples is given below, that can be copied for your needs. But let me caution that you ought to study all the codes to make them function as you require for your website.
Here are the main steps:
- After you download and unzip the free code, open the different example pages given in your browser to get a feel of how things work.
- The ‘tabber.js’ or ‘tabber-minimized.js’ JavaScript file and the ‘example.css’ files are the ones you need, and so include them in the head section of the html code.
- You need not do anything with the JS file, but the CSS can surely be changed as you want. For the above tabbed news I’ve changed ‘example.css’, given below.
- Notice there is a third piece of JS code at the end of the html just before the closing body tag (</body>).
- Change the html as needed.
Okay, here is first the ‘example.css’ code followed by the full html code.
Tabbed Content CSS Code
/*--------------------------------------------------
REQUIRED to hide the non-active tab content.
But do not hide them in the print stylesheet!
--------------------------------------------------*/
.tabberlive .tabbertabhide {
display:none;
}
/*--------------------------------------------------
.tabber = before the tabber interface is set up
.tabberlive = after the tabber interface is set up
--------------------------------------------------*/
.tabber {
}
.tabberlive {
margin:1.5em auto 0;
}
/*--------------------------------------------------
ul.tabbernav = the tab navigation list
li.tabberactive = the active tab
--------------------------------------------------*/
ul.tabbernav
{
margin:0;
padding: 3px 0;
border-bottom: 1px solid #900;
font: bold 12px Verdana, sans-serif;
}
ul.tabbernav li
{
list-style: none;
margin: 0;
display: inline;
}
ul.tabbernav li a
{
padding: 3px 0.5em;
margin-left: 0;
margin-right:10px;
border: 1px solid #900;
border-bottom: none;
background: #FEE;
text-decoration: none;
}
ul.tabbernav li a:link { color: #F33;}
ul.tabbernav li a:visited { color: #F55; }
ul.tabbernav li a:hover
{
color: #C00;
background: #FDD;
}
ul.tabbernav li.tabberactive a
{
background-color: #FFF;
border-bottom: 1px solid #FFF;
}
ul.tabbernav li.tabberactive a:hover
{
color: #C00;
background: white;
border-bottom: 1px solid white;
}
/*--------------------------------------------------
.tabbertab = the tab content
Add style only after the tabber interface is set up (.tabberlive)
--------------------------------------------------*/
.tabberlive .tabbertab {
padding:5px;
border:1px solid #900;
border-top:0;
/* If you don't want the tab size changing whenever a tab is changed
you can set a fixed height */
/* height:100px; */
/* If you set a fix height set overflow to auto and you will get a
scrollbar when necessary */
/* overflow:auto; */
}
/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
display:none;
}
.tabberlive .tabbertab h3 {
display:none;
}
.tabbertab p {
font: normal 13px arial, Verdana, sans-serif;
line-height:125%;
text-align: justify;
margin: 12px;
}
/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
height:100px;
overflow:auto;
}
The HTML Code
<html><head>
<title>Tabbed Content Demo</title>
<meta name="robots" content="nofollow, noindex" />
<link rel="stylesheet" href="tabbed-content.css" TYPE="text/css" MEDIA="screen">
<style>
body {margin:0;padding:0;}
h2 {font: normal 14px verdana;color:#410;line-height:120%;text-align:center;margin:5px auto;}
div#once {width:330px;padding:10px;border:3px double #630;}
</style>
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear.
*/
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
var tabberOptions = {
/* Optional: instead of letting tabber run during the onload event,
we'll start it up manually. This can be useful because the onload
even runs after all the images have finished loading, and we can
run tabber at the bottom of our page to start it up faster. See the
bottom of this page for more info. Note: this variable must be set
BEFORE you include tabber.js.
*/
'manualStartup':true,
/* Optional: set an ID for each tab navigation link */
'addLinkId': true,
};
</script>
<!-- Load the tabber code -->
<script type="text/javascript" src="tabber-minimized.js"></script>
</head>
<body>
<div id=once>
<!-- FIRST EXAMPLE OF TABBED CONTENT -->
<h2>1<br />Example Of Tabbed Content:<br />Variable Height, Nested Tabs</h2>
<div class="tabber" id="tab1">
<div class="tabbertab">
<h2><a name="tab1">Home</a></h2>
<p>Welcome to Online Stores of ABC Inc. Click on Product tab to see what we have on offer. The third tab reveals our company.</p>
</div>
<div class="tabbertab">
<h2>Products</h2>
<p>Products are of 3 types. So here we have 3 Nested Tabs.</p>
<div class="tabber" id="tab1-1">
<div class="tabbertab">
<h3>Bag</h3>
<p>Details of bags come in this space.</p>
</div>
<div class="tabbertab">
<h3>Cloth</h3>
<p>Details of cloths can be written here.</p>
</div>
<div class="tabbertab">
<h3>Shoe</h3>
<p>Lastly, details of shoes come here.</p>
</div>
</div>
</div>
<div class="tabbertab">
<h2>About</h2>
<p>Okay, let's talk about our company. But first, thanks for visiting us.</p>
</div>
</div>
<br />
<!-- SECOND EXAMPLE OF TABBED CONTENT -->
<h2>2<br />Example Of Tabbed Content:<br />Fixed Height, Scrollbar For Long Content</h2>
<div class="tabber" id="tab2">
<div class="tabbertab" title="">
<h2>Home</h2>
<p>Welcome to Online Stores of ABC Inc. Click on Product tab to see what we have on offer. The third tab reveals our company.</p>
</div>
<div class="tabbertab tabbertabdefault">
<h2>About</h2>
<p>Long content to show the scrollbar to the right.</p>
<p>As touched upon in this article, tabbed news or news tabs (if you will) is becoming popular with webmasters. The ease of use is important, but what you cannot take away is the fact that tabbed news allows including a lot of content in a webpage which would otherwise be impossible to accommodate.</p>
</div>
<div class="tabbertab" title="">
<h2>Contact</h2>
<p>The name of this tab is taken from the TITLE attribute instead of from the H2 element, then the TITLE attribute is erased so it does not cause a mouseover tooltip over the content area.</p>
</div>
</div>
<br />
</div>
<script type="text/javascript">
/* Since we specified manualStartup=true, tabber will not run after
the onload event. Instead let's run it now, to prevent any delay
while images load.
*/
tabberAutomatic(tabberOptions);
</script>
</body>
</html>
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=168e3003-bb86-45b7-a463-27b0d8ecc377)
 This article of October 24th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
