« Blog Home

§ 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.

example

 

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">&nbsp;</div><div class="tabright">Brand</div></div>
    <div class="tabouter" id="tab2"><div class="tableft">&nbsp;</div><div class="tabright">Formfactor</div></div>
    <div class="tabouter" id="tab3"><div class="tableft">&nbsp;</div><div class="tabright">Technology</div></div>
    <div class="tabouter" id="tab4"><div class="tableft">&nbsp;</div><div class="tabright">Expert Opinions</div></div>
    <div class="tabouter" id="tab5"><div class="tableft">&nbsp;</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

Comments

No Comments Here. Add yours below!

Add your comment

Name:
Email: (Will not be displayed - Privacy policy)
Website:
Comments:
  random image I can't read it!
Give me a different one!
Verify Post: Input the text from the image above to verify this post (helps prevent spam)
 

« Blog Home


“Where else but from doubt can faith arise, wise fool?”
Michael of Macedonia, An Oblique Approach, Eric Flint & David Drake