How to make tabs scrollable?

Question

Right now I have a div that is set to have overflow-x: auto. And I have tabs being created dynamically. When to many tabs are created I want to be able to scroll left or right to see the tabs that are now off screen.

I am not looking to use a plugin if possible (rather do it from scratch, customize one) Any point in the right direction would be greatly appreciated.

Answer 1 · 2016-02-19T10:36:31Z

February 19, 2016 10:36am

are all the tabs the same size? This is just an idea, not sure it would definitely serve your purpose but you could try something like-

<div class='main-holder'>
  <div class='tabs-holder>
    <div class='tabs'>
      content
    </div>
    <div class='tabs'>
      content
    </div>
  </div>
</div>

var holder = $('.main-holder');
var tabsHolder = $('.tabs-holder');
var left-btn = $('<button class='left'>left</button>');
var right-btn = $('<button class='right'>right</button>');

if(tabsHolder.length() > holder.length()) {
  holder.prepend(left-btn).append(right-btn);
}

var left = $('.left');
var right = $('.right');
var tabWidth = $('.tabs').width();
var xPosition = 0;

left.on('click', function() {
  xPosition += tabWidth;
  tabsHolder.animate({
    'left': xPosition
  },300);
});

right.on('click', function() {
  xPosition -= tabWidth
  tabsHolder.animate({
    'left': xPosition
  },300);
});

I've not tested this, but think something like this should work (in theory!!). You would also have to play with the css positions of the containers, relative for the main holder and absolute with the tab holder i would guess, though my css positioning is a little rusty.

Hope it helps, or gives you some ideas. Let me know if you come up with a better solution, or fix mine if it doesn't work!

Tom

Welcome to the Treehouse Community

Looking to learn something new?

Caesar Bell

Caesar Bell

How to make tabs scrollable?

1 Answer

Tom Checkley

Tom Checkley