JSFiddle - React, Tailwind, and code Playground

by kchilton

HTML

<div class="container">
            <div id="contentContainer">
<section class="navTimeView">
    <a href="#" class="previous">&#9664</a>
    <a href="#" class="next">&#9654</a>
</section>

<form action="/Home/Index" method="post">    <section class="timeEntry">
        <section class="timeDates">
            <h3>07/15/2013 - 07/29/2013</h3>
            <div class="timeViewList">
                <ul>
                    <li class="date"><span class="dateName">Mon</span><span class="dateNum" data-calendarID="562">07/15</span></li> 
                    <li class="date"><span class="dateName">Tue</span><span class="dateNum" data-calendarID="563">07/16</span></li> 
                    <li class="date"><span class="dateName">Wed</span><span class="dateNum" data-calendarID="564">07/17</span></li> 
                    <li class="date"><span class="dateName">Thu</span><span class="dateNum" data-calendarID="565">07/18</span></li> 
                    <li class="date"><span class="dateName">Fri</span><span class="dateNum" data-calendarID="566">07/19</span></li> 
                    <li class="date"><span class="dateName">Sat</span><span class="dateNum" data-calendarID="567">07/20</span></li> 
                    <li class="date"><span class="dateName">Sun</span><span class="dateNum" data-calendarID="568">07/21</span></li> 
                    <li class="date"><span class="dateName">Mon</span><span class="dateNum" data-calendarID="569">07/22</span></li> 
                    <li class="date"><span class="dateName">Tue</span><span class="dateNum" data-calendarID="570">07/23</span></li> 
                    <li class="date"><span class="dateName">Wed</span><span class="dateNum" data-calendarID="571">07/24</span></li> 
                    <li class="date"><span class="dateName">Thu</span><span class="dateNum" data-calendarID="572">07/25</span></li> 
                    <li class="date"><span class="dateName">Fri</span><span class="dateNum"...

CSS

html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,div{display:block;position:relative}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ol,ul{list-style:none}caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}a img{border:none}body{font:13px/1.231 sans-serif;*font-size:small}pre,code,kbd,samp{font-family:monospace, sans-serif}a:hover,a:active{outline:none}small{font-size:85%}b,strong,th{font-weight:bold}td{vertical-align:top}sub,sup{font-size:75%;line-height:0;position:relative}sup{top:-0.5em}sub{bottom:-0.25em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;padding:15px}.ie6 legend,.ie7 legend{margin-left:-7px}button,input,select,textarea{width:auto;overflow:visible;margin:0;font-size:100%;font-family:sans-serif;vertical-align:baseline}textarea{overflow:auto;vertical-align:text-top}label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer}input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0}input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0px 0px 5px red;-webkit-box-shadow:0px 0px 5px red;box-shadow:0px 0px 5px...

JavaScript

jQuery(document).ready(function ($) {
//obj.focusDate(obj.currIndex);
    // bind listeners to time input fields
    //$('.timeBlock').blur(validateHrs);
    $('.timeBlock').keyup(function () {
        var caller = $(this);
        var obj = new LayoutObj(caller);
        if (event.keyCode === 9) {
            if (event.shiftKey) {
                obj.dir = 'prev';
            }
            //obj.navDates();
        }
    });

    // bind listeners to prev/next buttons
    $('.previous, .next').on('click', function () {
        var str = $(this).attr('class');
        var caller = $(this);
        var obj = new LayoutObj(caller);
        obj.src = 'pg';
        if (str === 'previous') {
            obj.dir = 'prev';
        }
        //obj.navDates();
    });


    // calculate totals for stored inputs
    //totalHrs();
    //On page load, fire up LayoutObj with a null caller 
    //and navigate to today's date, if it exists in the loaded pay period.
    //    var caller = null;
    //    var obj = new LayoutObj(caller);
    //    obj.navDates(obj.currIndex);
    //        var cell = $('.timeBlock').eq(0).offset().left;
    //        var tb = $('.timeBlock').offset().left;
    //        var tvl = $('.timeViewList ul').parent().offset().left;
    //        alert("Cell: " + cell + " TB: " + tb + " TVL: " + tvl);
});

function LayoutObj(input) {
    var today = new Date();
    var thisMonth = today.getMonth();
    var thisDate = today.getDate();
    var dateStr = '';
    var fullDates = $('.dateNum');
    var splitDates = new Array();
    this.currIndex = 0; //currIndex defaults to 0
    this.todayIndex;

    fullDates.each(function (index) {
        splitDates[index] = $(this).text().split('/');
    });

    //traverse the list of dates in the pay period, compare values and stop when/if you find today
    for (var i = 0; i < splitDates.length; i++) {
        if (thisMonth === (parseInt(splitDates[i][0], 10) - 1) && thisDate === parseInt(splitDates[i][1], 10)) {
   ...