scroll working liting

by Kiran Duggal

HTML

<div class="page">
    <div class="element">
        <ul>
            <li id="tab1">item 1</li>
            <li id="tab2">item 2</li>
            <li id="tab3">item 3</li>
            <li id="tab4">item 4</li>
            <li id="tab5">item 5</li>
            <li id="tab6">item 6</li>
            <li id="tab7">item 7</li>
            <li id="tab8">item 8</li>
            <li id="tab9">item 9</li>
            <li id="tab10">item 10</li>
            <li id="tab11">item 11</li>
            <li id="tab12">item 12</li>
        </ul>
    </div>
</div>
<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>
    <li class="liClicked" id="tab8">click 8</li>
    <li class="liClicked" id="tab9">click 9</li>
    <li class="liClicked" id="tab10">click 10</li>
    <li class="liClicked" id="tab11">click 11</li>
    <li class="liClicked" id="tab12">click 12</li>
</ul>

CSS

.tempooo li {
    width:90px;
    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: 500px;
    height: 100px;
    position: relative;
    background: pink;
}
.element {
    height:auto;
    position: absolute;
    top: 10px;
    left: -200px;
    color:#333;
}
.element ul {
    background-color:#ccc;
    padding:0;
    float:left;
    overflow:hidden;
    white-space: nowrap;
}
.element li {
    display:inline-block;
    list-style:none;
    width: 40px;
    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).prevUntil('#tab7').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
    });
});