Making tab page scroll with bootstrap

Making tab page scroll with bootstrap

1) first create tab.

<div class="scroller-shop scroller-left-shop"><i class="glyphicon glyphicon-chevron-left"></i></div>
<div class="scroller-shop scroller-right-shop"><i class="glyphicon glyphicon-chevron-right"></i></div>
<div class="wrapper-shop">
<ul class="nav nav-tabs list-shop" id="product-shop">
<img src="waiting.gif" />
</ul>
</div>

explanation

<div class="scroller-shop scroller-left-shop"><i class="glyphicon glyphicon-chevron-left"></i></div>
will display left arrow, when scroll

<div class="scroller-shop scroller-right-shop"><i class="glyphicon glyphicon-chevron-right"></i></div>
will display right arrow, when scroll

<div class="wrapper-shop">
<ul class="nav nav-tabs list-shop" id="product-shop">
<img src="waiting.gif" />
</ul>
</div>
will represent tab bar, it contain 2 pieces

<div class="wrapper-shop">
>> this one has the width that you want to see.

<ul class="nav nav-tabs list-shop" id="product-shop">

>> this one contains all tabs, and it will move during the scroll.

2. add Cascade style sheets 

.wrapper-shop {

    position:relative;

    margin:0 auto;

    overflow:hidden;

    padding:5px;

      height:50px;

}

.list-shop {

    position:absolute;

    left:0px;

    top:0px;

      min-width:3000px;

      margin-left:12px;

    margin-top:0px;

}

.list-shop li{

    display:table-cell;

    position:relative;

    text-align:center;

    cursor:grab;

    cursor:-webkit-grab;

    color:#efefef;

    vertical-align:middle;

}

.scroller-shop {

  text-align:center;

  cursor:pointer;

  display:none;

  padding:7px;

  padding-top:11px;

  white-space:no-wrap;

  vertical-align:middle;

  background-color:#fff;

}

.scroller-right-shop{

  float:right;

}

.scroller-left-shop {

  float:left;

}    

explanation
      height:50px;
this is the height of the tab

3) set function, and execute

  setTimeout(function() {

      //create the shop here

      $('#product-shop').html('<li>tab1</li><li>tab2</li>');

      setTimeout(function() {

          //scroll

          var itemslist={data:[],count:0}    

          var widthOfList = function(){

              var itemsWidth = 0;

              $('.list-shop li').each(function(){

                var itemWidth = $(this).outerWidth();

                itemsWidth+=itemWidth;

                if (!itemslist['done']) itemslist['data'][itemslist['count']++]=$(this).position().left

              });

              itemslist['done']=1

              return itemsWidth;

            };

  

          

            var getLeftPosi = function(){

              return $('.list-shop').position().left;

            };

  

            var reAdjust = function(){

              if (($('.wrapper-shop').outerWidth()) < widthOfList()) {

                if ((Math.abs(getLeftPosi()) + $('.wrapper-shop').outerWidth()) > widthOfList()){

                    $('.scroller-right-shop').hide();

                }else{

                    $('.scroller-right-shop').show();

                }

  

              }

              else {

                $('.scroller-right-shop').hide();

              }

            

              if (getLeftPosi()<0) {

                $('.scroller-left-shop').show();

              }

              else {

                  $('.scroller-left-shop').hide();

              }

            }

            //initial

            reAdjust();

          

            var newposition = function(pos0, type){

                var pos = Math.abs(pos0)

                for (var i=0;i<itemslist['data'].length;i++){

                    if (itemslist['data'][i] > pos){

                        if (type=='right'){

                            if (i == 0) return 0

                            //else                  

                            return '-'+itemslist['data'][i-1]

                        }else{  

                            if (i == (itemslist['data'].length-1)) return itemslist['data'][itemslist['data'].length-1]

                            return '-'+itemslist['data'][i]

                        }

                        break;

                    }

                }

                return pos

            }

          

            $('.scroller-right-shop').off()

            $('.scroller-right-shop').on('click', function() {

            

              $('.scroller-left-shop').fadeIn('slow');

              $('.scroller-right-shop').fadeOut('slow');

              var pos= getLeftPosi() - $('.wrapper-shop').outerWidth()          

              pos = newposition(pos,'right')

            

              $('.list-shop').animate({left:pos+"px"},'slow',function(){

                  reAdjust();

              });

            });

  

            $('.scroller-left-shop').off()

            $('.scroller-left-shop').on('click',function() {

            

                $('.scroller-right-shop').fadeIn('slow');

                $('.scroller-left-shop').fadeOut('slow');

                var pos= getLeftPosi() + $('.wrapper-shop').outerWidth()          

                if (pos > 0) {

                    pos = 0

                }else{

                    pos = newposition(pos,'left')

                }

  

  

                  $('.list-shop').animate({left:pos+"px"},'slow',function(){

                      reAdjust();

                  });

            });  

    },1500)

  },1500)

explanation
  setTimeout(function() {
$('#product-shop').html('<li>tab1</li><li>tab2</li>');   },1500)
we used the timer, so we can see waiting gif, show. and we load the tabs her.

  setTimeout(function() {

  },1500)

we used the other timer, so we will see the navigator show up later.

 var widthOfList = function(){
              var itemsWidth = 0;
              $('.list-shop li').each(function(){
                var itemWidth = $(this).outerWidth();
                itemsWidth+=itemWidth;
                if (!itemslist['done']) itemslist['data'][itemslist['count']++]=$(this).position().left
              });
              itemslist['done']=1
              return itemsWidth;
            };

this is to calculate the total width of the list, and collect each tab position (for case that you have each tab with different width)

itemslist

it will contain the position of each tab

            var getLeftPosi = function(){
              return $('.list-shop').position().left;
            };

to get the position of tab bar

var reAdjust = function(){
              if (($('.wrapper-shop').outerWidth()) < widthOfList()) {
                if ((Math.abs(getLeftPosi()) + $('.wrapper-shop').outerWidth()) > widthOfList()){
                    $('.scroller-right-shop').hide();
                }else{
                    $('.scroller-right-shop').show();
                }
  
              }
              else {
                $('.scroller-right-shop').hide();
              }
            
              if (getLeftPosi()<0) {
                $('.scroller-left-shop').show();
              }
              else {
                  $('.scroller-left-shop').hide();
              }
            }

this function will used to validate to show left or right scroll button, if there total size of tab is small then we don't need to show the scroll button

of once it goes the left most, we don't need to show scroll left button, and it goes to the right most then we don't show scroll right button

            var newposition = function(pos0, type){
                var pos = Math.abs(pos0)
                for (var i=0;i<itemslist['data'].length;i++){
                    if (itemslist['data'][i] > pos){
                        if (type=='right'){
                            if (i == 0) return 0
                            //else                  
                            return '-'+itemslist['data'][i-1]
                        }else{  
                            if (i == (itemslist['data'].length-1)) return itemslist['data'][itemslist['data'].length-1]
                            return '-'+itemslist['data'][i]
                        }
                        break;
                    }
                }
                return pos
            }

this function return the good position for display the move tab

            $('.scroller-right-shop').off()
            $('.scroller-right-shop').on('click', function() {
            
              $('.scroller-left-shop').fadeIn('slow');
              $('.scroller-right-shop').fadeOut('slow');
              var pos= getLeftPosi() - $('.wrapper-shop').outerWidth()          
              pos = newposition(pos,'right')
            
              $('.list-shop').animate({left:pos+"px"},'slow',function(){
                  reAdjust();
              });
            });

add event to scroll right button when click, we calculate new position and move the tabs to the left

            $('.scroller-left-shop').off()
            $('.scroller-left-shop').on('click',function() {
            
                $('.scroller-right-shop').fadeIn('slow');
                $('.scroller-left-shop').fadeOut('slow');
                var pos= getLeftPosi() + $('.wrapper-shop').outerWidth()          
                if (pos > 0) {
                    pos = 0
                }else{
                    pos = newposition(pos,'left')
                }
  
  
                  $('.list-shop').animate({left:pos+"px"},'slow',function(){
                      reAdjust();
                  });
            });  

add event to scroll left button when click, we calculate new position and move the tabs to the right