html grid

by upsidown

HTML

<div id="grid" class="div-table">
    <div class="div-table-row group">
        <div class="div-table-td div-table-td-1"></div>
        <div class="div-table-td div-table-td-2"></div>
        <div class="div-table-td div-table-td-3"></div>
        <div class="div-table-td div-table-td-4"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-8"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-8"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-8"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-8"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-6"></div>
    </div>
    <!-- END OF div-table-row-->
    <div class="div-table-row group">
        <div class="div-table-td div-table-td-1"></div>
        <div class="div-table-td div-table-td-2"></div>
        <div class="div-table-td div-table-td-3"></div>
        <div class="div-table-td div-table-td-4"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-8"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-8"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td div-table-td-8"></div>
        <div class="div-table-td div-table-td-6"></div>
        <div class="div-table-td...

CSS

/* Universal styles */
 .group:after {
    content:"";
    display: table;
    clear: both;
}
.hide {
    display: none;
}
.hover {
    background-color: #eeeeee;
}
/* Table structure */
 #table_nav {
    text-align: center;
    display:table-cell;
    vertical-align: middle!important;
    height: 40px;
    background: #e4f1f5;
    border-top: 2px solid #d8d8d8;
    border-bottom: 2px solid #d8d8d8;
    font-weight:bold;
    color:#999;
}
.today {
    background-color: #85B8CD;
    color:white;
}
.athlete.active:hover {
    background:#fff;
    color:#333;
}
.div-table {
    width:960px;
    border-bottom:solid #ccc 1px;
}
.div-table-row {
    clear:both;
}
.div-table-row:hover {
    background-color: #eeeeee;
}
.div-table-td {
    float:left;
    width: 27px;
    height: 30px;
    border-right: solid #CCC 1px;
    border-top: solid #CCC 1px;
    text-align: center;
    padding: 5px;
}
.div-table-td.hover {
    background:#ccc;
    color:#333;
}
/* bar styling */
 .bar {
    background-color: #89c5f8;
    border: medium none;
    border-radius: 3px;
    box-shadow: 1px 1px 1px 0 #333;
    cursor: all-scroll;
    height: 18px;
    margin: 4px 3px 3px;
    position: absolute;
    z-index: 10000;
}
.ganttGreen {
    background-color: #b3cf6f;
}
.ganttRed {
    background-color: #8f0000;
}

JavaScript

$('.div-table-row').each(function () {

        var bar;
        var randomColor = getRandomColor();
        var randomNumber = Math.floor(Math.random() * 5);
        var randomWidth = Math.floor(Math.random() * 120) + 70;

        // Add first bar
        addBar(getRandomColor(), randomWidth, randomNumber, this);

        // Add second bar
        randomNumber = Math.floor(Math.random() * parseInt(randomWidth / 27)) + (randomNumber + 5);
        randomWidth = Math.floor(Math.random() * 120) + 70;

        addBar(getRandomColor(), randomWidth, randomNumber, this);        
    });

    function addBar(randomColor, randomWidth, randomNumber, element) {

        var bar = '<div class="bar" style="background-color: ' + randomColor + '; width: ' + randomWidth + 'px;"><div class="label">' + randomColor + '</div></div>';

        $('.div-table-td:eq(' + randomNumber + ')', element).html(bar);
    }

    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }