insert number blocks into wrapper according to window height in jquery

Question

i have made a wrapper which loads a background image and on that there are number of blocks appearing with help of a for loop. The width of blocks depends window width divided by 10. Now i need to make the blocks to limit according to height of window and work on resizing the window.

working example jsfiddle

[1]: [http://jsfiddle.net/RaVDJ/1/][1]

Answer 1

Do you want something like this http://jsfiddle.net/slash197/RaVDJ/5/

CSS

html {
    height: 100%; margin: 0px; padding: 0px;
}
body {
    background: url(http://wallpaperfast.com/wp-content/uploads/2013/05/Beautiful-Beach-Wallpaper.jpg) no-repeat;
    background-size: auto 100%;
    height: 100%; margin: 0px; padding: 0px;
}

.wrap {
    margin: 0px;
    width: 100%;
    height: 100%;
}

.wrap div {
    float: left;
    background-color: #cc0000;
    opacity: 0.5;
    cursor: pointer;
    margin: 1px;
    transition: opacity 0.3s linear;
}
.wrap div:hover {
    opacity: 0;
}

HTML

<div class="wrap"></div>

JS

$(document).ready(function() {
    addBoxes();
});
$(window).resize(addBoxes);

function addBoxes()
{
    $('.wrap').html("");

    var size = Math.floor($('.wrap').width()/10);
    var sizeInner = size - 2;
    var tw = Math.floor($('.wrap').width()/size);
    var th = Math.floor($('.wrap').height()/size);

    for (var i = 0; i < th; i++)
    {
        for (var j = 0; j < tw; j++)
        {
            $('.wrap').append('<div style="width: ' + sizeInner + 'px; height: ' + sizeInner + 'px;"></div>');
        }
    }
}