JS Hide Element Based on Window Width

JS Hide Element Based on Window Width (Resize)

by Andy Blueman

HTML

<div id="browserInfo"></div>

    <div id="toolBar"> Now you see it ...</div>

CSS

div {margin:10px;}

#browserInfo {
        padding:8px;
        border:0px solid blue;
        width:300px;
    }

#toolBar {
        padding:10px;
        border:1px solid blue;
        width:300px;
    }

JavaScript

// -- Browser Width --
$('#browserInfo').text('Browser (Width : ' + $(window).width() + ' , Height :' + $(window).height() + ' )');

$(window).resize(function () {
    $('#browserInfo').text('Browser (Width : ' + $(window).width() + ' , Height :' + $(window).height() + ' )');
});

// -- OnLoad Hide / Show --
if ($(window).width() < 700) {
        $( "#toolBar").hide();
}
else {
         $("#toolBar").show();
}

// -- Resize Hide / Show --
$(window).resize(function() {
    windowWidth = $(this).width();//you need to use this for changable values
    if ( windowWidth < 700) {
    
        $( "#toolBar").hide();

    } else if ( windowWidth > 700) {

         $("#toolBar").show();
        
    }
});