Sample layout pt2

by Ifnak

HTML

<div id="box_uno">
    <div id="box_top">
        Width:<input type="range" min="0" max="2000" id="sz_can"></input><input type="text" id="sz_can_v"></input>
        Left:<input type="range" min="0" max="500" id="lp_can"></input><input type="text" id="lp_can_v"></input>
    </div>
    <div id="box_mid">
        <div id="box_mid_left">
            MENU L
        </div>
        <div id="box_mid_right">
            MENU R
        </div>
        <div id="box_mid_mid">
            <canvas id="can"></canvas>
            <canvas></canvas>
            <canvas></canvas>
        </div>
    </div>
    <div id="box_bottom">
        MENU B
    </div>
</div>

CSS

*{
    padding   : 0; 
    margin    : 0;
}
html, body {
    width     : 100%;
    height    : 100%;
    overflow  : hidden;
}
input[type=text] {
    border    : 1px solid #999;
    width     : 30px;
}
canvas {
    display   : block;
    border    : 1px solid #fff;
    position  : absolute;
    left      : 10px;
    top       : 10px;
}
#box_uno {
    border     : 5px dashed #ea6;
    border:none;
    background : #55f;
    background : #353535;
    left       : 0;
    right      : 0;
    bottom     : 0;
    top        : 0;
    position   : absolute;
    padding: 2px;
    /*height     : 100%;*/
}
#box_top {
    border       : 2px groove #888;
    border-top   : 3px groove #666;
    border-radius: 2px;
    background : #525252;
    height     : 32px;
    line-height: 32px;
}
#box_mid {
    border     : 2px dashed #7aa;
    border: none;
    background : #5f5;
    top        : 42px;
    bottom     : 35px;
    position   : absolute;
    left       : 0;
    right      : 0;
}
#box_mid_left, #box_mid_right {
    border     : 1px dashed #00a;
    background : #eea;
    width      : 70px;
    position   : relative;
    height     : 100%;
}
#box_mid_left  { float : left;}
#box_mid_right { float : right;}
#box_mid_mid {
    position   : relative;
    border     : 1px dashed #000;
    background : #f55;
    height     : 100%;
    overflow   : auto;
}
#box_bottom {
    border     : 1px dashed #666;
    background : #741;
    bottom     : 0;
    position   : absolute;
    width      : 100%;
    height     : 32px;
    line-height: 32px;
}

JavaScript

var w = 1500, lp = 10,
    can = document.getElementById('can'),
    ctx = can.getContext("2d"),
    sz_can = document.getElementById('sz_can'),
    sz_can_v = document.getElementById('sz_can_v')
    lp_can = document.getElementById('lp_can'),
    lp_can_v = document.getElementById('lp_can_v')
    ;

sz_can.addEventListener('change', function(e){
    can.style.width=
        parseFloat(e.target.value) + 'px';
    sz_can_v.value =
        parseFloat(e.target.value);
});

lp_can.addEventListener('change', function(e){
    can.style.left=
        parseFloat(e.target.value) + 'px';
    lp_can_v.value =
        parseFloat(e.target.value);
});


sz_can.value = w;
sz_can_v.value = w;
can.style.width = w + 'px';

lp_can.value = lp;
lp_can_v.value = lp;
can.style.left = lp + 'px';

ctx.arc(60, 60, 50, 0, Math.PI * 2);
ctx.fill();