JqMobi roller system

challenges spinner

by James Doyle

HTML

<script src="https://raw.github.com/appMobi/jQ.Mobi/master/jq.mobi.min.js"></script>
<div id="container-outside">
    <div id="container-inside">
        <div class="row left" ontouchstart="moveRow(this,'category')">
            <div class="category"></div>
            <div class="category"></div>
            <div class="category"></div>
            <div class="category"></div>
            <div class="category"></div>
        </div>
        <div class="row middle" ontouchstart="moveRow(this,'challenge')">
            <div class="challenge"></div>
            <div class="challenge"></div>
            <div class="challenge"></div>
            <div class="challenge"></div>
            <div class="challenge"></div>
            <div class="challenge"></div>
        </div>
        <div class="row right" ontouchstart="moveRow(this,'duration')">
            <div class="duration">1</div>
            <div class="duration">3</div>
            <div class="duration">5</div>
            <div class="duration">7</div>
        </div>
    </div>
</div>
<div id="write">write here</div>

CSS

* {
    -webkit-box-sizing: border-box;
}

body {
    padding: 20px;
}

#write {
    margin: 10px 0;
}

#container-outside {
    width: 228px;
    height: 180px;
    -webkit-box-sizing: content-box;
    border: 5px solid black;
    border-radius: 6px;
    background: #000;
}

#container-inside {
    width: 228px;
    height: 180px;
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
}

div.row {
    float:left;
    width: 76px;
    height: 300px;
}

div.row:before {
    content:"";
    position: absolute;
    height: 180px;
    width: 75px;
    z-index: 10;
    box-shadow: inset 0px 15px 20px -7px #000,
        inset 0px -15px 20px -7px #000;
}

div.row.left {
    border-right: 1px solid #5a5b61;
}

div.row.right {
    border-left: 1px solid #5a5b61;
}

div.row.middle {
    left: 76px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

div.category, div.challenge, div.duration {
    cursor: pointer;
    position: relative;
    top: 55px;
    left: 15px;
    margin: 10px 0;
    width: 45px;
    height: 45px;
    background: #3399cc;
    border-radius: 4px;
    -webkit-transition: top 0.5s ease;
}

div.challenge {
    background: #9fcd47;
}

div.duration {
    text-align: center;
    font-size: 2em;
    padding-top: 4px;
    color: white;
    background: #454545;
    text-shadow: 1px 1px 0 #222;
}

JavaScript

function moveRow(e, Name) {
    // get the top value in px
    var oldTop = $("div." + Name).css('top');
    // remove the px
    oldTop = parseInt(oldTop, 10);
    // calculate the number of children
    var Num = $(e).children().length;
    // calculate the max top value
    var maxT = (Num - 2) * 55;
    // check to see if the row has hit bottom
    if (oldTop === -maxT) {
        oldTop = 55;
    } else {
        oldTop -= 55;
    }
    // move the row
    $("div." + Name).css('top', oldTop + 'px');    
    //write some stuff
    $("#write").html(Name + ' class moved ' + oldTop + 'px');
}