<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 ]"> <time>Oct 3rd 2014</time> </div> <div class="[ card ]"> <time>Oct 4th 2014</time> </div> <div class="[ card ]"> <time>Oct 5th 2014</time> </div> <div class="[ card ]"> <time>Oct 6th 2014</time> </div> <div class="[ card ]"> <time>Oct 7th 2014</time> </div> <div class="[ card ]"> <time>Oct 8th 2014</time> </div> <div class="[ card ]"> <time>Oct 9th 2014</time> </div> <div class="[ card ]"> <time>Oct 10th 2014</time> </div> <div class="[ card ]"> <time>Oct 11th 2014</time> </div> <div class="[ card ]"> <time>Oct 12th 2014</time> </div> <div class="[ card ]"> <time>Oct 13th 2014</time> </div> <div class="[ card ]"> <time>Oct 14th 2014</time> </div> <div class="[ card ]"> <time>Oct 15th 2014</time> </div> <div class="[ card ]"> <time>Oct 16th 2014</time> </div> <div class="[ card ]"> <time>Oct 17th 2014</time> </div> <div class="[ card ]"> <time>Oct 18th 2014</time> </div> <div class="[ card ]"> <time>Oct 19th 2014</time> </div> <div class="[ card ]"> <time>Oct 20th 2014</time> </div> <div class="[ card ]"> <time>Oct 21st 2014</time> </div> </div> </div>

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); } .card.punched:before { content: ""; position: absolute; top: 50%; left: 50%; height: 80px; width: 80px; margin-top: -40px; margin-left: -40px; background: url(http://subtlepatterns.com/patterns/congruent_outline.png); -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); }

$(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'); }) })