Ismail Farooq Ismail Farooq - 4 months ago 84
jQuery Question

Movable dynamic Bootstrap Tab menu slider if limit reached

I have dynamic tabs menu in my website, a tabs menu item may be 2 or 3 and may be 20+.
So when navigation item is more than 10+ is automatically drop to second line see here.

I don't want this effect, i want if navigation limit reached so next arrow icon appear and by clicking on it the remaining menu item will move left.

i tried following but not get success.

HTML

<div class="wrap">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tab1 example</a></li>
<li><a href="#">Tab2 example</a></li>
<li><a href="#">Tab3 example</a></li>
<li><a href="#">Tab4 example</a></li>
<li><a href="#">Tab5 example</a></li>
<li><a href="#">Tab6 example</a></li>
<li><a href="#">Tab7 example</a></li>
<li><a href="#">Tab8 example</a></li>
<li><a href="#">Tab9 example</a></li>
<li><a href="#">Tab10 example</a></li>
<li><a href="#">Tab11 example</a></li>
<li><a href="#">Tab12 example</a></li>
</ul>
</div>
<button id="goPrev">Prev</button>
<button id="goNext">Next</button>


CSS

.wrap {
overflow: hidden;
position: relative;
white-space: nowrap;
width:1000px;
background: #dad9d9;
border: 1px solid #efefef;
}

.wrap>.nav-tabs {
display: inline-block;
padding:0;
margin:0;
position: relative;
top: 0;
left: 0;
}

.wrap>.nav-tabs>li {
background: #fff;
display: inline-block;
position: relative;
white-space: normal;
float: none;
}
.nav-tabs>li>a {
margin-right: 0;
}


JavaScript/JQuery

var wrap = $(".wrap").width();
var el = $("ul").width();
if (el > wrap) {
$("#goNext").click(function() {
$("ul").stop(true);
if (-parseInt($("ul").css("left")) - wrap < 0) {
$("ul").animate({
"left": "+=-" + wrap
}, "slow")
} else {
$("ul").animate({
"left": "-" + (el - wrap)
}, "slow")
}

});
$("#goPrev").click(function() {
$("ul").stop(true);
if (-parseInt($("ul").css("left")) - wrap > 0) {
$("ul").animate({
"left": "+=" + wrap
}, "slow")
} else {
$("ul").animate({
"left": "0"
}, "slow")
}

});
}


Bootply

Note: I don't want to use any plugin for this small thing also make sure the slider should be Responsive.

Thanks

Answer

i set the fix width by calculating each item. Its working perfect now.

function itemWidth() {
  var largestWidth = 0;
  $(".nav-tabs>li>a").each(function() {
    if ($(this).outerWidth() > largestWidth) {
      largestWidth = $(this).outerWidth();
    }
  });
  Wrap = $(".wrap").outerWidth();
  someSpace = largestWidth + 10;
  roundFigure = Wrap / someSpace;
  roundFigure = Math.round(roundFigure);
  finalWidth = Wrap / roundFigure;
  $(".nav-tabs>li>a").outerWidth(finalWidth);
}

itemWidth();
var menus = $("#menus"),
  menuWidth = menus.parent().outerWidth();
var menupage = Math.ceil(menus[0].scrollWidth / menuWidth),
  currPage = 1;
if (menupage > 1) {
  $("#goNext").click(function() {
    currPage < menupage && menus.stop(true).animate({
      "left": -menuWidth * currPage
    }, "slow") && currPage++
  });
  $("#goPrev").click(function() {
    currPage > 1 && menus.stop(true).animate({
      "left": -menuWidth * (currPage - 2)
    }, "slow") && currPage--;
  });
  $(window).on("resize", function() {
  	itemWidth();
    menuWidth = menus.parent().outerWidth();
    menupage = Math.ceil(menus[0].scrollWidth / menuWidth);
    currPage = Math.ceil(-parseInt(menus.css("left")) / menuWidth) + 1;
  });
}
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
.tab-slider {
  padding: 0 40px;
}

.tab-slider .btn-icon {
  position: absolute;
  top: 5px;
}

#goPrev {
  left: 0;
}

#goNext {
  right: 0;
}

.wrap {
  overflow: hidden;
  position: relative;
  white-space: nowrap;
  width: 100%;
  background: #dad9d9;
  border: 1px solid #efefef;
  font-size: 0;
}

.nav-tabs>li>a {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  border: 1px solid transparent;
}

.wrap>.nav-tabs {
  display: inline-block;
  padding: 0;
  margin: 0;
  position: relative;
  top: 0;
  left: 0;
}

.wrap>.nav-tabs>li {
  background: #fff;
  display: inline-block;
  position: relative;
  white-space: normal;
  float: none;
  font-size: 14px;
}

.nav-tabs>li>a {
  margin-right: 0;
  border-radius: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-slider">
  <div class="wrap">
    <ul class="nav nav-tabs" id="menus">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Tab1 example</a></li>
      <li><a href="#">Tab2 example</a></li>
      <li><a href="#">Tab3 example</a></li>
      <li><a href="#">Tab4 example</a></li>
      <li><a href="#">Tab5 example</a></li>
      <li><a href="#">Tab6 example</a></li>
      <li><a href="#">Tab7 example</a></li>
      <li><a href="#">Tab8 example</a></li>
      <li><a href="#">Tab9 example</a></li>
      <li><a href="#">Tab10 example</a></li>
      <li><a href="#">Tab11 example</a></li>
      <li><a href="#">Tab13 example</a></li>
      <li><a href="#">Tab14 example</a></li>
      <li><a href="#">Tab15 example</a></li>
      <li><a href="#">Tab16 example</a></li>
      <li><a href="#">Tab17 example</a></li>
    </ul>

  </div>
  <button id="goPrev" class="btn btn-default btn-icon"><i class="glyphicon glyphicon-chevron-left"></i></button>
  <button id="goNext" class="btn btn-default btn-icon"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>