Test Timeline

by vbfischer

HTML

<div id="build-container">
    <div id="build-header"></div>
    <div id="build-container">
        <div id="build-timeline">
            <div class="wrapper">
                <div class="build-tick"> <span>00:20</span>

                </div>
                <div class="build-tick"> <span>00:20</span>

                </div>
                <div class="build-tick"> <span>00:20</span>

                </div>
                <div class="build-tick"> <span>00:20</span>

                </div>
                <div class="build-tick"> <span>00:20</span>

                </div>
                <div class="build-tick"> <span>00:20</span>

                </div>
                <div class="build-tick"> <span>00:20</span>

                </div>
                <div class="build-tick"> <span>00:20</span>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

#build-header {
    margin-top: 50px;
    height: 35px;
    background-color: #42383D;
}
#build-container {
    background-color: #969083;
    height: 35px;
}
#build-timeline .build-tick {
    display: inline-block;
    width: 50px;
    border: 1px solid black;
    margin: 0;
    padding: 0;
}

#build-timeline {
    position: relative;
    overflow: hidden;
}
#build-timeline .wrapper {
    width: 1000px;
}

#build-timeline .build-tick span {
    padding: 0;
    margin: 0;
}

JavaScript

$(function () {
    $('#build-timeline .wrapper').draggable({
        scroll: true,
        axis: 'x',
        stop: function (event, ui) {
            if (ui.position.left > 0) {
                $(this).offset({
                    left: 0
                });
            } else {
                console.log('ok');
            }

        }
    });
});