Tabs Serial Scroll

by NinjaSk8ter

HTML

<script src="http://entvibes.com/web/js/jquery.scrollTo-min.js"></script>
<script src="http://entvibes.com/web/js/jquery.serialScroll-min.js"></script>
<script src="http://www.davincispainting.com/js/jquery.corner.js"></script>
<div id="mid-featureleft-client" >
    <div class="SerialScrollTabs">
        <ul class="navigations">
            <li>
                <a id="btnChat" href="#" tabindex="1" class='blue'>Chat Atención
                </a>
            </li>
            <li>
                <a id="btnAbout" href="#" tabindex="2" class='blue'>Envía Email
                </a>
            </li>   
            <li>
                <a id="btnAbout" href="#" tabindex="3" class='blue'>Telefónica
                </a>
            </li>                
        </ul>        
    </div>
    <div class="SerialScrollContent">
        <div class="sectionss">
            <ul>
                <li>
                    <h2>Chat de Atención Header</h2>
                    <p>Chat de Atención Content 1</p>
                 </li>
                <li>
                    <h2>Envía su Email Header</h2>
                    <p>Envía su Email Content 1</p>
                 </li>                
                <li>
                    <h2>Telefónica Opcion Header</h2>
                    <p>Telefónica Opcion Content 1</p>
                </li>
            </ul>
        </div>        
    </div>
</div>

CSS

#mid-featureleft-client {
    float: left;
    position: relative;
    width: 300px;
    padding: 5px 0 0 5px;
    background-color: white;
}
#mid-featureleft-client .SerialScrollTabs {
    /*border-top: 1px solid #A0AFC3;*/
    /*border-top-color: #C6C6C6;
    border-top-style: solid;
    border-top-width: 1px;*/
    /*border-left: 1px solid #A0AFC3;  */
    /*border-left-color: #C6C6C6;
    border-left-style: solid;
    border-left-width: 1px;*/    
    /*border-right: 1px solid #A0AFC3;*/
    /*border-right-color: #666666;
    border-right-style: solid;
    border-right-width: 1px;*/   
    /*border-bottom: 1px solid #A0AFC3;*/
    border-bottom-color: #C6C6C6;
    border-bottom-style: solid;
    border-bottom-width: 1px;    
    width: 230px;
    float: left;
    margin: 0 0 0 0;
    /*padding:3px 0 0 6px;*/
    position:relative; 
    /*background-color: yellow;*/
}
#mid-featureleft-client ul li a:visited, ul li a:link {   
    text-decoration: none; 
    color: #8C8C8C;
}
#mid-featureleft-client ul li a:hover{
    color: #313131;
    text-decoration: underline;
}
#mid-featureleft-client .navigations{
    /*-moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;*/
    float: none;
    font-weight: bold;
    font-family: Arial;
    font-size: 10px;
    vertical-align: top;
    line-height: 12px;
    margin: 0 0 0 5px;
    padding: 0 0 0 0;
    position: relative;
    /*background-color: purple;*/
}
#mid-featureleft-client .navigations li{
    float: left;
    margin:0 3px 0 0;
    position: relative;
}
#mid-featureleft-client .navigations a{
    /*-moz-background-clip: border;
    -moz-background-origin: padding;
    -moz-background-size: auto auto;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;*/
    width: 71px;
    display: block;
    text-align: center;
    float: left;
    padding: 5px 0 1px; 0;
}
#mid-featureleft-client .navigations a:focus {  
    outline: none;  
} 
.blue {  ...

JavaScript

$(function() {     
        $('.navigations a').click(function() {
            $('.navigations a.white').removeClass('white').addClass('blue');
            $(this).addClass('white').removeClass('blue');    
            return false;
    }); 
}); 

jQuery.easing.easeOutQuart = function(x, t, b, c, d) {
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
};

jQuery(function($) {
    $('#mid-featureleft-client').serialScroll({
        target: '.sectionss',
        items: 'li',
        prev: 'img.prev',
        next: 'img.next',
        axis: 'xy',
        // The default is 'y' scroll on both ways
        navigation: '.navigations li a',
        duration: 275,
        force: true,
        onBefore: function(e, elem, $pane, $items, pos) {
             e.preventDefault();
            if (this.blur) this.blur();
        },
        onAfter: function(elem) {
        }
    });
});