How to make Jquery UI Tabs scroll horizontally if there are too many tabs

Question

Now the image above is an example of \" too many tabs \", It appea

Answer 1

There are multiple scenarios and cases to handle when showing tabs on single line.

1. Simple solution would be to add a div around the ui-tab-header <ul> and set the overflow as scroll. This method works out of box as the browser handles the scrolling through the tab headers. But the default scrollbar provided by browser will look odd. So you need a customize/stylish scrollbar addon. OR
2. To use an jQuery UI tabs extension like the below one:

Extended jQuery UI widget that offers scroll-able tab feature and does automatically handle responsive page size changes by showing navigation controls when required.

Features:

• It is responsive or fluid layouts
• Has support for touch swipe to scroll through tab headers in touch devices (* requires external dependency)
• Fully customizable & css based styling
• Supports removal of tabs using close button
• No extra HTML structure changes required, it automatically enhances the markups on the fly.

https://davidsekar.github.io/jQuery-UI-ScrollTabs

Answer 2

One plugin can be found here https://github.com/Casper1131/scroller it can be used for any undordered list.

Answer 3

I created yet another plugin for this. This time using Chrome style tab-resizing behaviour.

Initialize with

$( ".tabpanel" ).tabs().tabs('overflowResize');

Demo

GitHub

Answer 4

I have a different approach to this issue, as I think a scroll for the tabs is counter-intuitive. I created a plugin to do a dropdown when the tabs break to a second line.

https://github.com/jasonday/plusTabs

Answer 5

I've just made a very simple plugin for this. Basically you have to add one fixed length div and a moveable one to the tab navigator.

Plugin code:

(function ($) {
var settings = {
    barheight: 38
}    

$.fn.scrollabletab = function (options) {

    var ops = $.extend(settings, options);

    var ul = this.children('ul').first();
    var ulHtmlOld = ul.html();
    var tabBarWidth = $(this).width()-60;
    ul.wrapInner('<div class="fixedContainer" style="height: ' + ops.barheight + 'px; width: ' + tabBarWidth + 'px; overflow: hidden; float: left;"><div class="moveableContainer" style="height: ' + ops.barheight + 'px; width: 5000px; position: relative; left: 0px;"></div></div>');
    ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 5px; margin-right: 0;"></div>');
    var leftArrow = ul.children().last();
    leftArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-w" } });
    leftArrow.children('.ui-icon-carat-1-w').first().css('left', '2px');        

    ul.append('<div style="width: 20px; float: left; height: ' + (ops.barheight - 2) + 'px; margin-left: 1px; margin-right: 0;"></div>');
    var rightArrow = ul.children().last();
    rightArrow.button({ icons: { secondary: "ui-icon ui-icon-carat-1-e" } });
    rightArrow.children('.ui-icon-carat-1-e').first().css('left', '2px');        

    var moveable = ul.find('.moveableContainer').first();
    leftArrow.click(function () {
        var offset = tabBarWidth / 6;
        var currentPosition = moveable.css('left').replace('px', '') / 1;

        if (currentPosition + offset >= 0) {
            moveable.stop().animate({ left: '0' }, 'slow');
        }
        else {
            moveable.stop().animate({ left: currentPosition + offset + 'px' }, 'slow');
        }
    });

    rightArrow.click(function () {
        var offset = tabBarWidth / 6;
        var currentPosition = moveable.css('left').replace('px', '') / 1;
        var tabsRealWidth = 0;
        ul.find('li').each(function (index, element) {
            tabsRealWidth += $(element).width();
            tabsRealWidth += ($(element).css('margin-right').replace('px', '') / 1);
        });

        tabsRealWidth *= -1;

        if (currentPosition - tabBarWidth > tabsRealWidth) {
            moveable.stop().animate({ left: currentPosition - offset + 'px' }, 'slow');
        }
    });


    return this;
}; })(jQuery);

Check it out at http://jsfiddle.net/Bua2d/

Answer 6

Here is a plugin for that: http://jquery.aamirafridi.com/jst/