jQuery App Layout

by jakie8

HTML

<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="content">Resize Me</div>

CSS

body{margin:0;padding:0;}

#top{
    height:39px;
    
    width:100%;
    position:absolute;
    background-color:#2b2d2f;
    z-index:9999;
}

#left{
    width:175px;
    
    position:absolute;
    overflow:auto !important;
    border-right:1px solid #babbbb;
    background-color:#fff;
    z-index:9999;
}

#content{
    background-color:#fff;
    position:absolute;
    overflow:auto !important;
    color:#333;
}

#right{
    width:100px;
    
    position:absolute;
    right:0px;
    z-index:9999;
    border-left:1px solid #babbbb;
    overflow:auto !important;
    
}

#bottom{
    height:30px;
    
    width:100%;
    position:absolute;
    bottom:0px;
    z-index:9999;
    background-color:#2b2d2f;
}

JavaScript

$(function(){
    function renderLayout(){
        
        var topNum = parseInt(($('#top').css('height')).replace('px', ''));
        var leftNum = parseInt(($('#left').css('width')).replace('px', ''));
        var rightNum = parseInt(($('#right').css('width')).replace('px', ''));
        var bottomNum = parseInt(($('#bottom').css('height')).replace('px', ''));
        
        $('#left').css({
            height : window.innerHeight - topNum - bottomNum,
            top : topNum
        });
        
        $('#right').css({
            top : topNum,
            height : window.innerHeight - topNum - bottomNum,
        });
        
        $('#content').css({
            width : window.innerWidth - rightNum - leftNum,
            height : window.innerHeight - topNum - bottomNum,
            top : topNum,
            left : leftNum
        });
    }
    $(window).resize(function() {
        $('#content').html('Smooooooth…');
        renderLayout();
    });
    renderLayout();
});