scroll working liting

by Keith Jeter

HTML

<div class="page">
  <div class="element">
    <ul>
      <li id="tab1">spoREIGweprogierogmieroigjeroi</li>
      <li id="tab2">aepfoepwfo</li>
      <li id="tab3">wepofpweofsodks</li>
      <li id="tab4">weoifweoifwe</li>
      <li id="tab5">dofiweofiwe</li>
      <li id="tab6">oaiefwe</li>
      <li id="tab7">qpweofqpweof</li>
    </ul>
  </div>
</div>
<button id="btn1">-<<<-/button>
<button id="btn2">->>>-</button>
<ul class="tempooo">
  <li class="liClicked" id="tab1">click 1</li>
  <li class="liClicked" id="tab2">click 2</li>
  <li class="liClicked" id="tab3">click 3</li>
  <li class="liClicked" id="tab4">click 4</li>
  <li class="liClicked" id="tab5">click 5</li>
  <li class="liClicked" id="tab6">click 6</li>
  <li class="liClicked" id="tab7">click 7</li>
</ul>

CSS

.tempooo li {
  width: auto;
  border: solid 1px blue;
  list-style: none;
  padding: 10px;
  margin: 3px;
}

div {
  position: absolute;
  background-color: #abc;
  width: 90px;
  height: 90px;
  margin: 5px;
}

.page {
  overflow: hidden;
  width: 100%;
  height: 100px;
  position: relative;
  background: pink;
}

.element {
  height: auto;
  position: absolute;
  top: 10px;
  /*left: 100px;*/
  color: red;
}

.element ul {
  background-color: #ccc;
  padding: 0;
  float: left;
  overflow: hidden;
  white-space: nowrap;
}

.element li {
  display: inline-block;
  list-style: none;
  width: auto;
  border: solid 1px green;
  padding: 10px;
  position: relative;
}

JavaScript

$(document).on('click', '.liClicked', function() {
  var idValue = ($(this).attr('id'));
  // console.log(idValue);
  var idValues = ($(".element ul li#" + idValue));
  //  console.log(idValues); 
  var me = $(this);

  $('.element').animate({
    // "left": ($('.element ul').width()) - ($('li#' + me.prop('id')).position().left * 1)
    "left": $('li#' + me.prop('id')).position().left * -1,

  }, 500, function() {
    var newPosition = $('.element').position().left;
    //	console.log(idValues);
    console.log(newPosition);

  });



  var allLis = ($(idValues).nextAll().trigger('click').length);
  console.log(allLis);



  // calculate the width of all li elem
  var totalWidths = 0;

  $('.element ul li').each(function(index) {
    totalWidths += parseInt($(this).width(), 10);
  });
  console.log("Total Width is " + totalWidths);

  /*
    var index = $(this).prevAll().length;

    setTimeout(function () {
        var newPositionNew = ($('.element').position().left);
        if (index < 5) {

            console.log('new ' + newPositionNew);
            console.log(index + ' if called');
        } else {
            console.log('else called');
        }
    }, 600);

*/

});












var liWidths = ($('.element li').width());

$(document).on('click', '#btn1', function() {
  $('.element').animate({
    left: '+=' + liWidths
  });
});

$(document).on('click', '#btn2', function() {
  $('.element').animate({
    left: '-=' + liWidths
  });
});