§ Image tabbed interface controlling hidden divs
Tabbed interface using images for rounded tabs. Gives decent results even if javascript and/or css are off.
I've seen about forty-eleven different implementations of rounded tabs. I think I saw a page with a table of all the different ways people have worked out. I probably took snippets from here and there, so thank you to all whom I may have plagiarized. This is what I use.
This uses two images for each tab, defined in css. This came from a php project that cranked out various numbers of tabs with various titles. The only things that change are the text for each tab title and the text in the hidden divs. The tab ids have to end with a number which matches the number at the end the id of each tabcontent.
Each tabcontent also starts with a span used as a title. If javascript works, these titles are hidden and the interface switches to the first tab. If javascript doesn't work, this whole thing won't work anyway, so the whole mess will flow down the page. In that case the spans with titles will at least head each section of information.
There are comments all over the place in the javascript and css, so if you know a bit of javascript and css you can probably figure it out.
product_tabs.html
<html>
<head>
<title></title>
<script type='text/javascript' src='product_tabs.js'></script>
<link rel="stylesheet" href="product_tabs.css" type="text/css" />
</head>
<body>
<!-- tabs begin here -->
<div id="tabbedcontainer">
<div id="tabarea">
<div class="tabouter" id="tab1" class="activetab"><div class="tableft"> </div><div class="tabright">Brand</div></div>
<div class="tabouter" id="tab2"><div class="tableft"> </div><div class="tabright">Formfactor</div></div>
<div class="tabouter" id="tab3"><div class="tableft"> </div><div class="tabright">Technology</div></div>
<div class="tabouter" id="tab4"><div class="tableft"> </div><div class="tabright">Expert Opinions</div></div>
<div class="tabouter" id="tab5"><div class="tableft"> </div><div class="tabright">Downloads</div></div>
</div>
<div id="tabscontent">
<div id="tabcontent1" class="tabcontent">
<span class="tabsubtitle"><br>Brand<br></span>
<p>brand info brand info brand info brand info brand info brand info</p>
<p>brand info brand info brand info brand info brand info brand info brand info brand info brand info</p>
<p>brand info brand info brand info brand info brand info brand info brand info brand info brand info brand info brand info brand info</p>
</div>
<div id="tabcontent2" class="tabcontent">
<span class="tabsubtitle"><br>Formfactor<br></span>
<p>form info form info form info form info form info form info</p>
<p>form info form info form info form info form info form info form info form info form info form info</p>
</div>
<div id="tabcontent3" class="tabcontent">
<span class="tabsubtitle"><br>Technology<br></span>
<p>tech info tech info tech info tech info tech info tech info tech info tech info tech info tech info tech info tech info</p>
<p>tech info tech info tech info tech info tech info tech info tech info tech info tech info tech info tech info tech info</p>
<p>tech info tech info tech info tech info tech info tech info tech info tech info</p>
<p>tech info tech info tech info tech info tech info tech info tech info tech info</p>
<p>tech info tech info tech info tech info tech info tech info tech info tech info tech info</p>
</div>
<div id="tabcontent4" class="tabcontent">
<span class="tabsubtitle"><br>Expert Opinions<br></span>
<ul>
<li>opinion</li>
<li>opinion</li>
<li>opinion</li>
<li>opinion</li>
</ul>
</div>
<div id="tabcontent5" class="tabcontent">
<span class="tabsubtitle"><br>Downloads<br></span>
<ol>
<li><a href="http://google.com">google</a></li>
<li><a href="http://dummy.com/ug.pdf">User Guide</a></li>
<li><a href="http://google.com">google</a></li>
<li><a href="http://dummy.com/ug.pdf">User Guide</a></li>
<li><a href="http://google.com">google</a></li>
<li><a href="http://dummy.com/ug.pdf">User Guide</a></li>
</ol>
</div>
</div>
<!-- tabs end here -->
</body>
</html>
product_tabs.js
function tabbedinit() {
if(document.getElementById) {
//hide the titles in the contents since it looks like this tab thingie will work
var contentspanssarray = document.getElementById("tabscontent").getElementsByTagName("span");
for (var k=0; k<contentspanssarray.length; k++)
if(contentspanssarray[k].className=="tabsubtitle")
contentspanssarray[k].style.display = "none";
//set event handlers
var tabarray = document.getElementById("tabarea").getElementsByTagName("div");
var m=-1;
for (var k=0; k<tabarray.length; k++) {
if(tabarray[k].className.indexOf("tabouter")>-1) {
tabarray[k].onclick=changetab;
tabarray[k].onmouseover=tabsmouseover;
tabarray[k].onmouseout=tabsmouseout;
//find the first tab
if(m==-1)
m=k;
}
}
//display first tab
changetab(tabarray[m]);
}
//if not, nothing in this script will work anyway, so don't do anything...
}
function tabsmouseover() {
if(this.className=="tabouter")
this.className="tabouter highlight";
}
function tabsmouseout() {
if(this.className=="tabouter highlight")
this.className="tabouter";
}
function changetab(tab) {
//when called by init "this" is the window; on a click "this" is a div
if(this!=window)
tab=this;
//update the tabs
var tabsarray = document.getElementById("tabarea").getElementsByTagName("div");
for (var i=0; i<tabsarray.length; i++)
if(tabsarray[i].className.indexOf("tabouter")>-1) {
tabsarray[i].className="tabouter";
if(tabsarray[i]==tab)
tab.className="tabouter activetab";
}
//update the content divs
var tabcontentsarray = document.getElementById("tabscontent").getElementsByTagName("div");
for (var j=0; j<tabcontentsarray.length; j++)
tabcontentsarray[j].style.display = "none";
//note this requires the tab ids to be xxx## (e.g., tab2) and the content ids to be tabcontent## (tabcontent2)
var subid="tabcontent"+tab.id.substr(3,2);
var sub=document.getElementById(subid);
sub.style.display = "inline";
//idiot IE! layout doesn't shrink when the div shrinks, so force it to reflow
var body = document.getElementsByTagName("body")[0];
var bodyClass = body.className;
body.className = bodyClass+" forceReflow";
body.className = bodyClass;
}
function makeDoubleDelegate(function1, function2) {
return function() {
if (function1)
function1();
if (function2)
function2();
}
}
window.onload = makeDoubleDelegate(window.onload, tabbedinit);
product_tabs.css
/*
includes/templates/custom/css/product_info.css
johnh 12.15.08 css for tabbed interface
*/
/*container for the entire tabbed structure */
#tabbedcontainer {
clear:both;
display:inline;
margin:0px 0px 20px 0px;
/* might need to do this if setting the div tops to negatives */
/* position:relative;
top:15px; */
/*ooo, Mac Safari really doesn't like those negative tops...*/
}
/*container for the tabs themselves */
#tabbedcontainer #tabarea {
/*...so set this height and don't use negative tops on the tabs*/
height: 22px;
font-family: verdana;
font-size: 11px;
font-weight: bold;
/* background-color: white; */
}
/*look n feel of the tabs (divs) */
#tabbedcontainer #tabarea div {
display:inline;
border-width: 0px;
padding: 0px;
margin: 0px;
cursor:pointer;
}
#tabbedcontainer #tabarea div.tabouter {
position: relative;
/*how far from top (height) of tabarea
active/hightlight goes to 0, so this is the change in tab height
have to fiddle with this, tabarea height, and bottom padding of
tableft and tabright to make it all look good...*/
top: 7px;
}
#tabbedcontainer #tabarea div.tabright {
/*bottom padding is big enough for the active/highlight extension
so don't have to change it there, and the extra is hidden by content
top and right padding make the text look right
right padding is usually the width of the left image*/
padding:5px 19px 15px 0px;
/*this right margin sets the space betwen tabs*/
margin: 0px 3px 0px 0px;
color: #600000;
background:url("right_red.gif") no-repeat right top;
/*to not use images for tabs... um, don't, but set background-color, border, etc., here*/
}
#tabbedcontainer #tabarea div.tableft {
/*right padding makes images match up
don't know why, but it's a few px less than the image width*/
padding: 5px 15px 15px 0px;
background:url("left_red.gif") no-repeat left top;
/*to not use images for tabs... um, don't, but set background-color, border, etc., here*/
}
#tabbedcontainer #tabarea div.highlight,
#tabbedcontainer #tabarea div.activetab {
position: relative;
top:0px;
}
#tabbedcontainer #tabarea div.highlight div.tableft,
#tabbedcontainer #tabarea div.highlight div.tabright,
#tabbedcontainer #tabarea div.activetab div.tableft,
#tabbedcontainer #tabarea div.activetab div.tabright {
color: #ffffff;
}
#tabbedcontainer #tabarea div.activetab,
#tabbedcontainer #tabarea div.activetab div.tabright,
#tabbedcontainer #tabarea div.activetab div.tableft {
cursor:default;
}
/*container to hold all the tabs' contents */
#tabbedcontainer #tabscontent {
/* width:90%; */
background-color: #ffffff;
border: 5px solid #DF3E34;
padding: 10px;
position: relative;
}
/* everything below here is done by js if it works,
but can be set here to be faster
but it also might break it!
besides, who wants to use expressions? */
/*each tab's content */
/*
#tabscontent div.tabcontent {
display:none;
}
*/
/*
#tab1 {
background-color: expression('#627B97');
color: expression('#000000');
top:expression('-5px');
padding-bottom: expression('5px');
cursor:expression('default');
}
*/
/*if js works it will hide these titles */
/*
#tabscontent span.tabsubtitle {
text-transform: uppercase;
font-weight:900;
display:expression('none');
}
*/
last edited on February 16th, 2009 at 1:47 AM
Categories
Comments
- Walid on "Adventures with Ubuntu 9.10 on G4 Yikes!" - I am in the same process as you. Although I still dual-boot to Windows for my ganimg leisure. My first contact with Ubuntu was way…
- Slashback on "Simpler adding & removing element classnames" - Actually, the addClassName function does what you want, pretty much the same way you suggest.
- angie on "Simpler adding & removing element classnames" - And what if I want to add a class, but keeping the csseals the element already has?I mean, I have an element with a class, let's name…
- backlinks on "Adjust iframe height to contents" - Definitely helped me.
- Slashback on "Simpler validate form fields are filled in (no additional class names)" - You are welcome!
