Max's Tabs

Just working on a tab system I found on the internet.

by erick

HTML

<!--
                     __  
  /\/\   __ ___  __ / /  
 /    \ / _` \ \/ // /   
/ /\/\ \ (_| |>  </ /___ 
\/    \/\__,_/_/\_\____/

MM118, Confederation College, 2010.

Originally made by Dan Harper

http://net.tutsplus.com/tutorials/javascript-ajax/create-a-tabbed-interface-using-jquery/

This is a very useful jQuery tool for making website interfaces. You can use this script so that you can have tabbed websites or even just tabbed descriptions. When clicked the information inside the tabs will switch and the current tab will be highlighted. This can also be used to show videos as seen on the bottom.

-->


<!-- Be sure to link the Javascript files or else this will not work!! -->

<script type="text/javascript" src="http://d2o0t5hpnwv4c1.cloudfront.net/042_jQueryUITabs/demo/jquery-ui-personalized-1.5.2.packed.js"></script>

<script type="text/javascript" src="http://d2o0t5hpnwv4c1.cloudfront.net/042_jQueryUITabs/demo/sprinkle.js"></script>


<div id="tabvanilla" class="widget">
    
    <!-- These are the names of the top tabs -->
    
    <ul class="tabnav">
        <li><a href="#popular">Tabs</a></li>
        <li><a href="#recent">Are</a></li>
        <li><a href="#featured">Fun</a></li>
    </ul>
    
    <!-- This is where the content of the top tabs actually goes. -->
    
    <div id="popular" class="tabdiv">
        <ul>
            <li><a href="#">You can also embed links.</a></li>
            <li><a href="#">This is useful because:</a></li>
            <li><a href="#">You can make news updates,</a></li>
            <li><a href="#">Quickly and easily,</a></li>
            <li><a href="#">In a tab labeled "News"</a></li>
            <li><a href="#">Using an Unordered List</a></li>
            <li><a href="#">And Anchor Tags!</a></li>
        </ul>
    </div><!--/popular-->
    
    <div id="recent" class="tabdiv">
        <p>You can also put pictures into these tabs!</p>
        <img...

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    font-size: 75%;
    color: #000000;
    background: #ffffff;
    font-family: "Verdana", Helvetica, Arial, sans-serif;
    line-height: 1.6em;
}

.widget {
    width: 310px;
    margin: 20px;
    padding: 10px;
    background: #679E78;
    border: 1px solid #000000;
    margin-bottom: 15px;
}

.widget a {
    color: #000000;
    text-decoration: none;
}

.widget a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.tabnav li {
    display: inline;
    list-style: none;
    padding-right: 5px;
}

.tabnav li a {
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: bold;
    padding: 4px 6px;
    outline: none;
}

.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {
    background: #507A69;
    color: #000;
    text-decoration: none;
    border-top:  1px solid #000000;
    border-left:  1px solid #000000;
    border-right:  1px solid #000000;
}

.tabdiv {
    margin-top: 2px;
    background: #507A69; 
    border: 1px solid #000000;
    padding: 5px;
}

.tabdiv li {
    margin-left: 20px;
}

.ui-tabs-hide {
    display: none;
}

#featuredvid {
    text-align: center;
}

.fvid {
    margin-bottom: 5px;
}

.vidselector li {
    text-align: left;
    list-style: none;
    padding: 5px;
    background: #507A69;;
    border: 1px solid #000000;
    text-transform: uppercase;
    margin-bottom: 5px;
}

JavaScript

$(document).ready(function() {
    $('#tabvanilla > ul').tabs({
        fx: {
            height: 'toggle',
            opacity: 'toggle'
        }
    });
    $('#featuredvid > ul').tabs();
});