Welcome Guest [Log In] [Register]
Welcome to Byte It. We hope you enjoy your visit.


Byte It is a forum dedicated to creating modifications for the ZetaBoards forum software. We have a large database of codes provided my the forum Admin, Quozzo, and other members of our community. If you dont see a code tgar fulfills your needs then you can request one right here.

If you join our community, you'll be able to access member-only sections, and use many member-only features such as giving codes a Byte Mark, requesting modifications, and viewing a livePreview of codes we have in our database. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
Clickable Tabs; HTML | CSS | jQuery
Topic Started: Apr 19 2011, 04:50 PM (94 Views)
Quozzo
Member Avatar
Administrator
[ *  *  * ]
There is no doubting that clickable tabs are cool. showing off all that information while making the site look more expensive than it actually is. The problem is trying to make them. Due to jQuery's library, it is rather difficult to get one to fade away and another one to fade in even using the fadeOut callback if you don't know what your doing not to mention the pesky CSS. I intend to address these matters and show you just how easy it is with a little know how.

  • The HTML

    • Putting information into different categories is usually done with tables, but tables are too restrictive what they can do. For tabs we need to use lists.

    • Using lists gives us a lot of freedom as we dont need to worry about different rows or column span and so forth, but we need to group them in a <div> tag, just to get some control. each <li> tag then needs another <a> tag inside which holds the tag name and a uniquely names attribute like id='tab1'. for each one. so id='tab2' id='tab3' incrementing on each tab. You could use the ref attribute, but i prefer id

    • The content also isn't going into a table, each content of a tab is going in its own <div> tag, wrapped in another <div> tag. each <div> tag holding the content needs to be given a unique id with the same number as its corresponding tab. so if tab1 will open content1 then the id needs to be id='content1' for example.

    • That's the minimum that is needed when creating clickable tabs, you can add in anything additional if you wish to match your board. so you should have something like this:-
Code: HTML
 
<div id='tabexample'>
<div class='tab'>
<ul><li><a id='tab1'>Tab 1</a></li><li><a id='tab2'>Tab 2</a></li><li><a id='tab3'>Tab 3</a></li><li><a id='tab4'>Tab 4</a></li><li><a id='tab5'>Tab 5</a></li></ul>
</div>
<div class='contents'>
<div id='content1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tortor leo, euismod quis rhoncus nec, hendrerit ac magna. Fusce ultricies sapien eu lectus tempus fermentum. Maecenas posuere aliquet aliquam. Duis iaculis imperdiet purus, vitae convallis justo semper in. Praesent porta faucibus tellus. Nam scelerisque ultricies arcu id pellentesque. Nulla metus lorem, luctus ut elementum eget, tempus et nulla. Etiam ultrices ante vitae augue malesuada ut accumsan arcu facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut est leo. Phasellus ultricies ligula vel mi pharetra egestas. Curabitur sit amet dapibus nisi. Pellentesque vitae eros ligula, id eleifend ligula. Morbi hendrerit sapien ligula. Curabitur sed diam non lorem tincidunt blandit. Aenean vestibulum consequat dui et aliquam. Mauris quis metus quis purus viverra malesuada. Praesent eu suscipit nibh.</div>
<div id='content2'>
Nullam scelerisque, nisl sed vulputate tristique, eros dui hendrerit ligula, ac sodales libero metus sit amet lectus. Integer porttitor, augue et pellentesque elementum, purus tellus imperdiet nisi, sit amet vestibulum nisl velit ut tellus. Donec ac quam tellus. Suspendisse potenti. Aliquam tempor libero non tellus sagittis egestas. Sed rutrum nunc a mauris gravida consequat. Quisque in lacus sed dolor suscipit fringilla. Aliquam at nisi at lacus semper porttitor. Vestibulum fringilla ullamcorper dolor, a sodales neque ullamcorper nec. Maecenas egestas mi sapien. In non justo euismod velit eleifend ornare. Integer sagittis massa quis quam eleifend dignissim. In egestas tristique eros. Aliquam dictum turpis sed lorem ullamcorper fringilla. Proin vel magna ac justo viverra eleifend posuere at urna. Fusce molestie est non tellus porta viverra.</div>
<div id='content3'>Nunc a placerat nulla. Fusce aliquet urna vitae erat imperdiet sit amet malesuada orci fermentum. Praesent vel ipsum elit, non aliquam tellus. Quisque pharetra vulputate accumsan. Praesent volutpat, eros ac varius semper, purus nulla ullamcorper magna, sed ullamcorper augue tortor vitae augue. Aliquam eu auctor odio. Donec ultrices metus et nibh dictum ut vehicula felis dapibus. Donec vitae metus eget nisl dignissim faucibus eget ut sem. Sed eleifend semper leo at blandit. Sed rhoncus mi non dui facilisis elementum. Duis pulvinar turpis nulla, et ornare orci. Aliquam commodo ipsum sit amet tortor vestibulum tempus. Aenean quis quam sit amet nunc tincidunt sodales. Nulla semper risus non justo hendrerit fermentum. Sed varius sapien vel diam lobortis a semper lacus rhoncus. Fusce mattis est vitae nisi tristique quis gravida dolor ornare. Cras viverra consequat velit non ultrices.</div>
<div id='content4'>
Pellentesque nec lacus enim, sed pharetra velit. In convallis volutpat nisl eu sodales. Donec posuere malesuada tincidunt. Vestibulum nec libero eu tortor tincidunt sodales non vel lectus. Curabitur hendrerit purus ac elit eleifend dignissim. Fusce mattis purus non felis ultricies sed blandit eros commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut a vulputate enim. Fusce mi tellus, dignissim vitae placerat at, fringilla ut nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
<div id='content5'>
Vivamus quis erat libero, ut luctus ipsum. Praesent sit amet metus et leo vulputate consectetur. Nunc iaculis auctor consectetur. Sed scelerisque velit non tellus varius vel interdum tortor malesuada. Maecenas lacus magna, varius lacinia feugiat ut, volutpat lobortis nisl. Sed lacinia molestie neque at sodales. Proin non erat elit. Suspendisse sed mauris rhoncus nulla pulvinar commodo id tincidunt mauris. Vivamus ac ultrices nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</div>

  • The CSS

    • The CSS is fairly strait forward but there are a few things to know. Ive made notes int he CSS so you can clearly see to what I am referring to.

Code: HTML
 
<style type='text/css'>
.tab ul{
/* These are important for the .activetab CSS property to work porperly. */
padding:0;
margin:0;
}
.tab li {
display: inline; /* This is needed for the tabs to be positioned horizontally. */
border: solid;
border-width: 1px 1px 0 1px; /* As the list should be next to the tabs, this makes it easier to erase the .activetabs bottom border as it doesnt have one and so only padding is needed. */
margin: 0 2em 0 0; /*Spaces out the list to be more tab-like. */

}
.tab li a {
cursor:pointer;
padding: 0 1em; /*We want the padding on the anchors inside the lists for two reasons. firstly because the .activetab CSS properties change the anchor and not the list. Secondly becuase it fills out the tab so wherever it is clicked it will work, not just the text. */
}
.contents {
border: 1px solid;
padding: 10px;
background-color: #CCC; /*This gives the contents their backgroiund colour, this is usually the same as the .activetab so it looks connected. */
}
.tab .activetab {
position: relative;
padding-bottom: 2px; /*This is !mportant, this overlaps the borders around the content so it looks like the .activetab is connected to it. */
background-color: #CCC; /* the backgound colour for the .activetab is usually the same as the background colour of the contents. */
}
#tabexample{
margin: 10px;/*just getting it off the sides to see it porperly. */
}
</style>

  • jQuery

    • Firstly, we need to make it so that only one content is showing. For that we use a :first filter inside a :not() filter
      Code:
       
      $('.contents div:not(:first)').hide();

    • Then the first tab needs to have a specific class. This is what is used to fade the content out and then fade in new content. if we have no way to select the content already being viewed then the jQuery repeats the fadeOut() for the new content too, which is not what we want.
      Code:
       
      $('.contents div:first').addClass("activediv")

    • Now we need to give the tab that has its content showing the activetab class, so the CSS can apply its changes to make it look like its open.
      Code:
       
      $('.tab a:first').addClass("activetab")

    • The jQuery for the fading content is a little tricky so ive included the comments in the code too.
Code:
 
$('.tab a').click(function(){ //fires whenever a tab is clicked.
$this = $(this); //stores which tab was clicked so it can apply the activetab class when its content appears.
num = $(this).attr('id').split("tab")[1]; //gets the number of the content that relates to the tab
$('.activediv').fadeOut('fast', function(){ //fades out the current content with a callback that fades in the new content.
$('.tab a').removeClass("activetab"); //removes the activetab class when the content eventually fades out.
$this.addClass("activetab"); //gets the stored tab that was clicked and put on the activetab class so the CSS can re-style it.
$('#content'+num).fadeIn('fast', function(){ //fades in the content using the number that was acquired earlier.
$(this).addClass("activediv");/adds the acvtivediv class so the effect can be repeated with the double fading.
})
}).removeClass("activediv"); //removes the class of the div thats fading instantly as it will re-fade if left on.
})


  • Putting it together


    • so putting it all together an not forgetting the <script> tags for the jQuery, it should look a little something like this:

Code:
 
<body>
<div id='tabexample'>
<div class='tab'>
<ul><li><a id='tab1'>Tab 1</a></li><li><a id='tab2'>Tab 2</a></li><li><a id='tab3'>Tab 3</a></li><li><a id='tab4'>Tab 4</a></li><li><a id='tab5'>Tab 5</a></li></ul>
</div>
<div class='contents'>
<div id='content1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tortor leo, euismod quis rhoncus nec, hendrerit ac magna. Fusce ultricies sapien eu lectus tempus fermentum. Maecenas posuere aliquet aliquam. Duis iaculis imperdiet purus, vitae convallis justo semper in. Praesent porta faucibus tellus. Nam scelerisque ultricies arcu id pellentesque. Nulla metus lorem, luctus ut elementum eget, tempus et nulla. Etiam ultrices ante vitae augue malesuada ut accumsan arcu facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut est leo. Phasellus ultricies ligula vel mi pharetra egestas. Curabitur sit amet dapibus nisi. Pellentesque vitae eros ligula, id eleifend ligula. Morbi hendrerit sapien ligula. Curabitur sed diam non lorem tincidunt blandit. Aenean vestibulum consequat dui et aliquam. Mauris quis metus quis purus viverra malesuada. Praesent eu suscipit nibh.</div>
<div id='content2'>
Nullam scelerisque, nisl sed vulputate tristique, eros dui hendrerit ligula, ac sodales libero metus sit amet lectus. Integer porttitor, augue et pellentesque elementum, purus tellus imperdiet nisi, sit amet vestibulum nisl velit ut tellus. Donec ac quam tellus. Suspendisse potenti. Aliquam tempor libero non tellus sagittis egestas. Sed rutrum nunc a mauris gravida consequat. Quisque in lacus sed dolor suscipit fringilla. Aliquam at nisi at lacus semper porttitor. Vestibulum fringilla ullamcorper dolor, a sodales neque ullamcorper nec. Maecenas egestas mi sapien. In non justo euismod velit eleifend ornare. Integer sagittis massa quis quam eleifend dignissim. In egestas tristique eros. Aliquam dictum turpis sed lorem ullamcorper fringilla. Proin vel magna ac justo viverra eleifend posuere at urna. Fusce molestie est non tellus porta viverra.</div>
<div id='content3'>Nunc a placerat nulla. Fusce aliquet urna vitae erat imperdiet sit amet malesuada orci fermentum. Praesent vel ipsum elit, non aliquam tellus. Quisque pharetra vulputate accumsan. Praesent volutpat, eros ac varius semper, purus nulla ullamcorper magna, sed ullamcorper augue tortor vitae augue. Aliquam eu auctor odio. Donec ultrices metus et nibh dictum ut vehicula felis dapibus. Donec vitae metus eget nisl dignissim faucibus eget ut sem. Sed eleifend semper leo at blandit. Sed rhoncus mi non dui facilisis elementum. Duis pulvinar turpis nulla, et ornare orci. Aliquam commodo ipsum sit amet tortor vestibulum tempus. Aenean quis quam sit amet nunc tincidunt sodales. Nulla semper risus non justo hendrerit fermentum. Sed varius sapien vel diam lobortis a semper lacus rhoncus. Fusce mattis est vitae nisi tristique quis gravida dolor ornare. Cras viverra consequat velit non ultrices.</div>
<div id='content4'>
Pellentesque nec lacus enim, sed pharetra velit. In convallis volutpat nisl eu sodales. Donec posuere malesuada tincidunt. Vestibulum nec libero eu tortor tincidunt sodales non vel lectus. Curabitur hendrerit purus ac elit eleifend dignissim. Fusce mattis purus non felis ultricies sed blandit eros commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut a vulputate enim. Fusce mi tellus, dignissim vitae placerat at, fringilla ut nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
<div id='content5'>
Vivamus quis erat libero, ut luctus ipsum. Praesent sit amet metus et leo vulputate consectetur. Nunc iaculis auctor consectetur. Sed scelerisque velit non tellus varius vel interdum tortor malesuada. Maecenas lacus magna, varius lacinia feugiat ut, volutpat lobortis nisl. Sed lacinia molestie neque at sodales. Proin non erat elit. Suspendisse sed mauris rhoncus nulla pulvinar commodo id tincidunt mauris. Vivamus ac ultrices nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</div>

<style type='text/css'>
.tab ul{
padding:0;
margin:0;
}
.tab li {
display: inline;
border: solid;
border-width: 1px 1px 0 1px;
margin: 0 2em 0 0;

}
.tab li a {
padding: 0 1em;
cursor:pointer;
}
.contents {
border: 1px solid;
padding: 10px;
background-color: #CCC;
}
.tab .activetab {
position: relative;
padding-bottom: 2px;
background-color: #CCC;
}
#tabexample{
margin: 10px;
}
</style>

<script type='text/javascript'>
$('.contents div:not(:first)').hide();
$('.contents div:first').addClass("activediv")
$('.tab a:first').addClass("activetab")

$('.tab a').click(function(){
$this = $(this);
num = $(this).attr('id').split("tab")[1];
$('.activediv').fadeOut('fast', function(){
$('.tab a').removeClass("activetab");
$this.addClass("activetab");
$('#content'+num).fadeIn('fast', function(){
$(this).addClass("activediv");
})
}).removeClass("activediv");
})
</script>


Attached to this post:
Attachments: clickable_tabs.html (6.48 KB)
Edited by Quozzo, Apr 19 2011, 05:31 PM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Code Tutorials · Next Topic »
Add Reply

Ruby Graphite created by Sarah & Delirium