Hide Me Toolbar

Hide Me Toolbar

HTML

<div id="main-content" class="measure">
    <div id="toolbarright"> HIDE ME TOOLBAR kljkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk </div>
</div>

CSS

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

#main-content {
    margin: 10px;
    max-width: 600px;
    outline: 1px solid green;
    }
#toolbarright {
    outline: 1px solid blue;
    }

JavaScript

// -- OnLoad Hide / Show --
   if $("#main-content").width() < 600) {
           $( "#toolbarright").hide();
   }
   else {
            $("#toolbarright").show();
   }

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

       } else if ( windowWidth > 600) {

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

/*--------------------------------------------------------------*/
/*Measure Browser() | DIV ()*/
    		if ($('div').hasClass('measure')) { $('.measure').each(function (iterate, val) { var self = $(this);
            		twoDivs = "<BR /><div id='measurelog" + iterate + "' class='measurelog'></div>";
            		self.append(twoDivs);
            		$("#measurelog" + iterate).text('Browser (Width: ' + $(window).width() + 'px, Height: ' + $(window).height() + 'px) | DIV  (Width: ' + self.width() + 'px, Height: ' + self.height() + 'px) ');
            		$(window).resize(function () {$("#measurelog" + iterate).text('Browser (Width: ' + $(window).width() + 'px, Height: ' + $(window).height() + 'px) | DIV  (Width: ' + self.width() + 'px, Height: ' + self.height() + 'px) ');
			}); 
			}); 
		}