Scrolling tabs bootstrap plugin | tab Scrolling plugin

Scrolling tabs bootstrap

CSS

<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />

 <script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

  

  <style type="text/css">

  .wrapper {

    position:relative;

    margin:0 auto;

    overflow:hidden;

padding:5px;

  height:50px;

}

.list {

    position:absolute;

    left:0px;

    top:0px;

  min-width:3000px;

  margin-left:12px;

    margin-top:0px;

}

.list li{

display:table-cell;

    position:relative;

    text-align:center;

    cursor:grab;

    cursor:-webkit-grab;

    color:#efefef;

    vertical-align:middle;

}

.scroller {

  text-align:center;

  cursor:pointer;

  /*display:none;*/

  padding: 5px 2px;

  white-space:no-wrap;

  vertical-align:middle;

  background-color:#fff;

}

.scroller-right{

  float:right;

}

.scroller-left {

  float:left;

}

.tab_scroll{

 

 

 }

 

 .tab_scroll .nav-tabs{

     background-color: #fff;

 

 }

 

 

 .tab_scroll .nav-tabs li{

 

 

 }

 

 .tab_scroll .nav-tabs li a{

    border-left: #ccc 1px solid !important;

    background-color: #fff;

    padding: 4px 20px !important;

 

 }

</style>

HTML

  <div class="scroller scroller-left">

  <i class="fa fa-chevron-left"></i></div>

  <div class="scroller scroller-right">

  <i class="fa fa-chevron-right"></i></div>

  <div class="wrapper tab_scroll">

    <ul class="nav nav-tabs list top_box_nav" id="myTab">

      <li class="active nav-item">

  <a class="nav-link" data-toggle="tab" href="#tb1">Home</a></li>

      <li class="nav-item">

  <a class="nav-link" data-toggle="tab" href="#tb2">Profile</a></li>

      <li class="nav-item">

  <a class="nav-link" data-toggle="tab" href="#tb3">Tab4</a></li>

      <li class="nav-item">

  <a class="nav-link" data-toggle="tab" href="#tb4">Tab5</a></li>

      <li class="nav-item">

  <a class="nav-link" data-toggle="tab" href="#tb5">Tab6</a></li>

      <li class="nav-item">

  <a class="nav-link" data-toggle="tab" href="#tb6">Tab7</a></li>

      <li class="nav-item">

  <a class="nav-link" href="#">Tab8</a></li>

  </ul>

  </div>

  <script>

  var hidWidth;

var scrollBarWidths = 40;

var widthOfList = function(){

  var itemsWidth = 0;

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

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

    itemsWidth+=itemWidth;

  });

  return itemsWidth;

};

var widthOfHidden = function(){

  return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi())-scrollBarWidths;

};

var getLeftPosi = function(){

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

};

var reAdjust = function(){

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

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

  }

  else {

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

  }

  

  if (getLeftPosi()<0) {

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

  }

  else {

    $('.item').animate({left:"-="+getLeftPosi()+"px"},'slow');

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

  }

}

reAdjust();

$(window).on('resize',function(e){  

  reAdjust();

});

$('.scroller-right').click(function() {

  

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

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

  

  $('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){

  });

});

$('.scroller-left').click(function() {

  

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

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

  

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

 

  });

});    

  </script>

<div class="tab-content">

   <div id="tb1" class="container tab-pane active">

   <h1> Tab1 </h1>

</div>

<div id="tb2" class="container tab-pane">

      <h1> Tab2 </h1>

      </div>

  

  <div id="tb3" class="container tab-pane">

      <h1> Tab3 </h1>

      </div>

</div>

Newer Post Older Post