Tabs (function)
writing functions
by sebastianauer
HTML
<div id="wrapper">
<div id="sliding-panels">
<div id="panelcontent1">
<ul>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
</ul>
</div>
<div id="menu">
<a href="#" class="button1">Tab 1</a>
</div>
<div style="clear: both;"></div>
<div id="panelcontent2">
<ul>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
</ul>
</div>
<div id="menu">
<a href="#" class="button2">Tab 2</a>
</div>
<div style="clear: both;"></div>
<div id="panelcontent3">
<ul>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li class="icon"> </li>
<li...
CSS
#wrapper {position: relative; width: 800px; height: 600px; overflow: hidden; background: url(http://www.digitalrevolutions.biz/wp-content/uploads/2008/05/background1_blue.jpg) top left no-repeat;}
#sliding-panels { border: 2px solid green; height: 550px; margin: 10px 0;}
#panelcontent1, #panelcontent2, #panelcontent3 {z-index: 100;position: relative; width: 700px; height: 120px; overflow: hidden; float: left; margin: 0; padding: 10px 0px; display: none;
-webkit-border-radius:0px 5px 5px 0px; -webkit-box-shadow:5px 6px 9px 2px black; background: #6db3f2; /* Old browsers */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%); /* Chrome10+,Safari5.1+ */}
#panelcontent2 {}
#panelcontent1 ul, #panelcontent2 ul, #panelcontent3 ul {display: none;}
#menu {background: green; padding: 25px 20px; margin: 15px 0 0 -7px; float: left; -webkit-transform: rotate(-90deg); -webkit-border-radius:0px 0px 5px 5px; -webkit-box-shadow:-5px 0px 5px 1px grey;}
#menu a {color: white; font-family:helvetica, san-serif;}
#panelcontent1 ul li, #panelcontent2 ul li,#panelcontent3 ul li {height: 48px; width: 48px; background: white; margin: 6px; float: left; -webkit-border-radius: 3px;}
#panelcontent1 ul li:hover, #panelcontent2 ul li:hover, #panelcontent3 ul li:hover {background: #CFCFCF;}
JavaScript
$(document).ready(function() {
function settabs() {
$("div a[class*=button]").each(function(i) {
$(this).css('text-decoration', 'none');
i++;
var thetab = "#panelcontent" + i;
var tabheight = $(thetab).outerHeight();
//alert (thetab +" is "+tabheight+"px high.");
$("div[id=menu]").css('margin-bottom', tabheight / 2);
});
}
function opentab(e) {
var thepanel = e.data.panel;
var count = e.data.count;
var panelstate = $(thepanel + count).css('display');
if (panelstate == "none") {
$(thepanel + count).animate({
width: 'show'
}, 300);
$(thepanel + count + " ul").fadeIn(900);
$(thepanel + morepanels).animate({
width: 'hide'
}, 300)
} else {
$(thepanel + count + " ul").fadeOut(150);
$(thepanel + count).animate({
width: 'hide'
}, 300);
}
}
//////////////////////////
var num_panels = $("div[id^=panelcontent]").size();
var num_tabs = $("#menu a[class^=button]").size();
if (num_panels == num_tabs) {
alert("There is an equal number of tabs and panels");
} else {
alert("The number of tabs and panels is NOT equal.");
}
settabs();
$("div a[class*=button]").each(function(o) {
o++;
var thepanel = "#panelcontent";
var thebutton = ".button" + o;
/*var panelstate = $(thepanel).css('display');
if (panelstate == "none"){
alert(thepanel+" is closed.");
} else {
alert(thepanel+" is open.");
}
*/
$(thebutton).bind('click', {
panel: thepanel,
count: o
}, opentab);
});
});