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

I was recently looking for a solution to this but none of the other plugins / examples seemed to work with jQuery 1.9+, I also think that Jason's answer of creating a 'more' tab and displaying any extra tabs as a drop down provides the best UI experience, and so I expanded on his answer and created a jQuery plugin for 1.9+ that extends jQuery UI tabs, if the total width of all of the tabs exceeds the width of the tabs container then the additional tabs are grouped together in a dropdown.

You can see the JSFiddle Demo to see it in action. Try resizing your browser window to see it working.

Or you can view the full plugin code at JSFiddle.

Initialising 'Overflow Tabs' is as simple as this:

$("#tabs").tabs({
    overflowTabs: true,
    tabPadding: 23, 
    containerPadding: 40,
    dropdownSize: 50
});

tabPadding is the number of pixels of padding around the text in a tab.

containerPadding is the padding of the container.

dropdownSize is the pixel size of the dropdown selector button

I have tested this on the latest versions of Chrome, Firefox, and IE. If you spot any issues or can improve this then feel free to fork it and go ahead.

Now also available on GitHub.

Answer 2

None of the plugins listed here quite worked for me (most are outdated and not compatible with jQuery 2.0+) but I eventually found this: https://github.com/joshreed/jQuery-ScrollTabs ...worth adding to the list.

Answer 3

I've also created an jQuery plugin for it here, but my main focus was on creating such structure for mobile sites that have little space and could rely also on scrolling horizontally with touch as well as control arrows.

The solution looks like the following:

I'm using Bootstrap and to implement the plugin you basically need to include:

In you HTML the following structure so the arrows can work correctly (I'm using font-awesome for them)

 <div id="js_image_selection" class="horizontal-scrollable-tabs">
  <div class="scroller arrow-left"><i class="fa fa-arrow-left"></i></div>
  <div class="scroller arrow-right"><i class="fa fa-arrow-right"></i></div>
  <div class="horizontal-tabs">
    <ul role="tablist" class="nav nav-tabs nav-tabs-horizontal">
      <li role="presentation" class="active"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
      <li role="presentation"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
      <li role="presentation"><a href="#image01" data-toggle="tab"><img src="external/images/t-shirt-white.jpg"/></a></li>
      <li role="presentation"><a href="#image02" data-toggle="tab"><img src="external/images/t-shirt-orange.jpg"/></a></li>
      <li role="presentation"><a href="#image03" data-toggle="tab"><img src="external/images/t-shirt-green.jpg"/></a></li>
    </ul>
  </div>
</div>

And call in you Js:

$("#js_image_selection").horizontalTabs();

Hope it helps anyone in the future! Cheers!

Answer 4

Re: André Lourenço - Great addon, just wanted to throw in a hack that needs refining that allows the scroller to resize on window resize (ie: rotate mobile device);

    if(!$(".fixedContainer").length) {
        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 class="leftBtn" style="width: 40px; 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('text-align', 'center');        

        ul.append('<div class="rightBtn" style="width: 40px; 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('text-align', 'center');        
    } else {
        var leftArrow = $(".leftBtn");
        var rightArrow = $(".rightBtn");
        $(".fixedContainer").css("width", tabBarWidth);
    }

Then I call it again on window resize ie:

    $(window).resize(function(e){
        $("#tabs").scrollabletab();
    });

Not the most efficient way to do it, but it works for my testing purposes at the moment.