Hide Me Toolbar

Hide Me Toolbar

by hamix

HTML

<div id="main-content" class="measure">
    <div id="toolbarright" class="content"> HIDE ME TOOLBAR </div>
    <div id="right" class="content">Right </div>
</div>
<span class="size"></span>
<div id="window-info"></div>

CSS

html {
    width: 100%;
    outline:1px solid RED;
}

#main-content 
{
    width:100%;
    height:100%;
    margin: 10px;
    outline: 1px solid green;
    position: relative;
}
.content
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow:hidden;
    
}
#toolbarright{height:50px;outline: 1px solid grey;width:195px;}
#right{height:50px;width:50px; outline: 1px solid blue;left:200px;}
.size{position:absolute; background-color:red;top:400px;}

JavaScript

$(window).on('resize', function(){
    $('#main-content').each(function(){
        var box = $(this);        
        var width = box.width();
        var height = box.height();
        if ( width < 600) {
            box.find( "#toolbarright").hide();
        } else if ( width > 600) {
            box.find("#toolbarright").show();
        }          
        $('.size').html(width+'x'+height);
    });
}).trigger('resize');