Bootstrap Snippet Personal Punch Cards using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
<h2 class="[ text-center ]">Give Camillia her Medication!</h2>
<div class="[ container-fluid ][ punch-card ]">
    <div class="[ row ]">
        <div class="[ card ] punched">
            <time>Nov 27th 2014</time>
            <div id="burst-8"></div>
        </div>
        <div class="[ card ] punched">
            <time>Nov 28th 2014</time>
            <div id="burst-8"></div>
        </div>
        <div class="[ card ] punched">
            <time>Nov 29th 2014</time>
            <div id="burst-8"></div>
        </div>
        <div class="[ card ] punched">
            <time>Nov 30th 2014</time>
            <div id="burst-8"></div>
        </div>
        <div class="[ card ] punched">
            <time>Oct 1st 2014</time>
            <div id="burst-8"></div>
        </div>
        <div class="[ card ]">
            <time>Oct 1st 2014</time>
            <div id="burst-8"></div>
        </div>
        <div class="[ card ] punched">
            <time>Oct 2nd 2014</time>
        </div>
        <div class="[ card ]">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
    background: url(http://subtlepatterns.com/patterns/congruent_outline.png);
    color: rgb(255, 255, 255);
}
.punch-card {
    background: url(http://subtlepatterns.com/patterns/paper.png);
    color: rgb(51, 51, 51);
    overflow-x: scroll;
}
.punch-card > .row {
    width: 10000px;   
}
.punch-card .card {
    border-right: 1px dashed rgb(51, 51, 51);
    cursor: pointer;
    float: left;
    min-height: 320px;
    padding: 10px 15px;
    position: relative;
    width: 200px;
}
.card.punched:after {
    background: url(http://subtlepatterns.com/patterns/congruent_outline.png);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 80px;
    width: 80px;
    margin-top: -40px;
    margin-left: -40px;
    text-align: center;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0eg);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(function() {
    $('.punch-card .card').on('click', function(event) {
        $(this).toggleClass('punched');
    });
    $(".punch-card").mousewheel(function(event, delta) {
        this.scrollLeft -= (delta * 60);
        event.preventDefault();
    });
    
    $(".punch-card").each(function() {
        var w = 0;
        $(this).find('.card').each( function() { w += 200; });
        console.log(w)
        $(".punch-card > .row").css('width', w+'px');
    })
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Personal Punch Cards"
Bootstrap 3.2.0 Snippet by mouse0270

Related: See More

Questions / Comments:

"Personal Punch Cards" Bootstrap 3.2.0 Snippet by mouse0270

Related: See More

Questions / Comments:

"Personal Punch Cards"
Bootstrap 3.2.0 Snippet by mouse0270