scrolling tabs

horizontal scrolling tabs

by oterox

HTML

<link rel="stylesheet" href="http://www.sagigraf.com/css/reset.css">
<link rel="stylesheet" href="http://www.sagigraf.com/css/960.css">
<div class="container_12">
<div id="c-container">


<div id="px-tabs-container">
    <a class="tab-buttons px-prev" href="#">Left</a>
    <div class="px-tabs">
        <ul class="tabs">
              <li><a href="index.html"><span>FIRST ITEM FROM TAB</span></a></li>
              <li><a href="index.html"><span>MONDAY</span></a></li>
              <li><a href="index.html"><span>TUESDAY</span></a></li>
              <li><a href="index.html"><span>WEDNESDAY</span></a></li>
              <li><a href="index.html"><span>THURSDAY</span></a></li>
              <li><a href="index.html"><span>FRIDAY</span></a></li>
              <li><a href="index.html"><span>SATURDAY</span></a></li>
              <li><a href="index.html"><span>SUNDAY</span></a></li>
              <li><a href="index.html"><span>ANOTHER TAB</span></a></li>
              <li><a href="index.html"><span>THIS IS TAB NUMBER 10 LARGE</span></a></li>
              <li><a href="index.html"><span>LAST TAB</span></a></li>
        </ul>
    </div>
    <a class="tab-buttons px-next" href="#">Right</a>
</div>            

</div>
</div>

CSS

body, div, ul, ol, li, p, h1, h2, h3, span, pre, a, img, blockquote, table, tbody, tfoot, thead, tr, th, td, pre, code { border: 0pt none; outline: 0pt none; vertical-align: baseline; margin: 0pt; padding: 0pt; }
        ol, ul { list-style: none outside none; }

        ul.tabs { width: 10000px; height: 40px; list-style: none outside none; margin: 0pt; padding: 0pt; }
        #px-tabs-container { height: 1%; overflow:hidden; padding: 0 0 10px;   }
        #px-tabs-container .px-tabs { float: left; width: 720px; height: 41px; overflow: hidden; position: relative; }
        #px-tabs-container .tab-buttons { background:url("http://www.sagigraf.com/images/sprite-tab-buttons-blue.png") no-repeat scroll 0 0 transparent; display: block; text-indent: -999em; float: left; width: 34px; height: 41px; overflow: hidden; position: relative; }
        #px-tabs-container .px-prev { background-position: 0 0; margin: 0px 10px 0 0;  }
        #px-tabs-container .px-next { background-position: -34px 0; margin: 0px 0 0 10px;  }
        #px-tabs-container .disabled-prev { background-position: 0px -82px; margin: 0px 10px 0 0; cursor: default;  }
        #px-tabs-container .disabled-next { background-position: -34px -82px; margin: 0px 0 0 10px; cursor: default;  }
        #px-tabs-container .disable { visibility: hidden; }
        #px-tabs-container .tabs { list-style: none; position: absolute; padding: 0; margin: 0;  left: 0 top: 0; }
        #px-tabs-container .tabs li{ float: left; margin: 0 2px 0 0; }

        #px-tabs-container .tabs a { display:block; line-height:41px; padding:0 20px;}
        #px-tabs-container .tabs li a { color:#FFFFFF;text-decoration:none;padding:0px 12px 0 0; background: blue; }
        #px-tabs-container .tabs li a span { display:inline-block; height:41px; padding:0 0 0 12px;  }
        #px-tabs-container .tabs li a:hover, .tabs li.active a, .tabs li.current_page_item a { background:black; color:#fff; cursor:pointer; text-decoration:none;}
       ...

JavaScript

$(document).ready(function(){
            var iTabsCount = 0;
            var iTabsWidth = 0;
            var iPosition = 0;
            var oPrev = $('.px-prev');
            var oNext = $('.px-next');

            var iInitialOffset = Math.ceil($('.tabs').offset().left);
            console.log ( 'iInitialOffset=' + iInitialOffset );
            
            var iTabFirstOffset = Math.ceil($('.tabs li:first').offset().left);
            var iTabLastOffset = Math.ceil($('.tabs li:last').offset().left);
            var iFinalTabWidth = Math.ceil($('.tabs li:last').outerWidth());
            console.log ( 'iTabFirstOffset=' + iTabFirstOffset);
            console.log ( 'iTabLastOffset=' + iTabLastOffset);
            console.log ( 'iFinalTabWidth=' + iFinalTabWidth);
            
            
            oPrev.click(function () {
                if(Math.ceil($('.tabs').offset().left) != (Math.abs(iTabFirstOffset - 720 - 10)) ){
                    iPosition += 100;
                    moveTabs(iPosition);
                }
                
                return false;
            });
            oNext.click(function () {
                if(Math.ceil($('.tabs').offset().left) > (iInitialOffset - (iTabLastOffset - 720) ) ){
                    iPosition -= 100;
                    moveTabs(iPosition);
                }

                
                return false;
            });    
    
            function moveTabs(iTabLeft){
                $('.tabs').animate({
                    left: iTabLeft
                }, 500, function() {
                        //
                });
            
            }
        });