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
    });
});