Scrollable Tab Buttons

Question

I am preparing a tabpanel where the number of tabs is unknown (comes dynamically). So I am providing a navigation if there are more tabs than the screen size can allow.To achieve this, I use style margin since I don't want to use fixed width. But the problem is that I'm unable to move a single tab at a time on click of left/right arrow. Currently I am moving 20px on a single click which is not accurate.
I am sure there is something I am missing but I'm unable to find it. Can somebody help ?

Any alternative solution is also welcome.

Here is the jsfiddle.

Answer 1

Here your require tabstrip code. if it useful please up vote.

JSFIDDLE

var incWidth = 0, divWidth = 0, OlWidth = 0,marginWidth = 50;
    (function($) {
        $.fn.showScrollIcons = function(){
            OlWidth = $('.checkOL').width();
            divWidth = this.width();
            if(divWidth >= OlWidth){
                $('.arrow').hide();
                if(incWidth){
//                        $('.arrow.leftArrow').show();
                        $('.arrow.leftArrow').hide();
                        $('.showTab').removeClass('showTab');
                        $('.checkOL .checkLI:first-child').addClass('showTab');
                        $('.checkOL').animate({'marginLeft':"+=" + incWidth});
                        incWidth = 0;
                    }
                }
                else{
                    $('.arrow').show();
                    if(!incWidth){
                        $('.arrow.leftArrow').hide();
                    }
                    if(divWidth + incWidth >= ( OlWidth - 12 )){
                        $('.arrow.rightArrow').hide();
                    }
                }
            };
        })(jQuery);
        $(document).ready(function(){
            $('.rightArrow').click(function(){
                var outerWidth = 0;
                var currentTab = $('.showTab');
                if(currentTab.next().length){
                    currentTab.next().addClass('showTab');
                    currentTab.removeClass('showTab');
                    outerWidth = currentTab.outerWidth();
                }
                incWidth += outerWidth;
                $('.checkOL').animate({'marginLeft':"-=" + outerWidth});
                checkArrowHide();
            });
            $('.leftArrow').click(function(){
                var outerWidth = 0;
                var currentTab = $('.showTab');
                if(currentTab.prev().length){
                    currentTab.prev().addClass('showTab');
                    currentTab.removeClass('showTab');
                    outerWidth = $('.showTab').outerWidth();
                }
                incWidth -= outerWidth;
                $('.checkOL').animate({'marginLeft':"+=" + outerWidth});
                checkArrowHide();
            });
            $('.tabBtn').showScrollIcons();
            $( window ).resize(function(){
                $('.tabBtn').showScrollIcons();
            });
            function checkArrowHide(){
                if(!incWidth){
                    $('.arrow.leftArrow').hide();
                }
                else{
                    $('.arrow.leftArrow').show();
                }
                if(divWidth + incWidth >= ( OlWidth - 12)){
                    $('.arrow.rightArrow').hide();
                }
                else{
                    $('.arrow.rightArrow').show();
                }
            }
        });