Scrollable Tab Buttons

Question

I am preparing a tabpanel where the number of tabs is unknown (dynamically). Therefore, I provide navigation if there are more tabs than the screen size allows. To achieve this, I use a style margin, since I do not want to use a fixed width. But the problem is that I cannot move one tab in one click of the left / right arrow. I am currently moving with 20pxone click, which is inaccurate.
I'm sure something is missing, but I can’t find it. Can anyone help?

Any alternative solution is also welcome.

Here is the jsfiddle .

Answer 1

Here you need the tab code. if useful, please 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();
                }
            }
        });

Answer 2

I like the style. But here is an alternative. using overflow-x:auto;, you can automatically create a scrollbar when tabs get out of hand.

Jsfiddle