Hiding an element on a webpage with JavaScript

I could put the following code in the HEAD section of the webpage, if I wanted any DIV element on the page that has a class of sometimesHide to be hidden in certain circumstances. The styling I chose below is arbitrary, you could use whatever you preferred and you could put the style information in an external Cascading Style Sheets (CSS) file, instead.

<style type="text/css">
   .sometimesHide { background-color: MediumOrchid; color: white; margin: 25px;}
</style>

Then I might have a DIV such as the following on the page. That DIV could contain an ad, image, etc. that I don't want displayed or just text that I don't want displayed, as in the example below.

<div class="sometimesHide">
<p>This is the div to be hidden when the browser window is less than the
specified width.</p>
</div>

Then I could include the following JavaScript code somewhere after that DIV; if I placed it before the DIV it wouldn't work, since the section of the page containing the DIV would not yet have been loaded and so wouldn't be hidden.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>

   document.write('Window Inner Width: '+window.innerWidth+'<br>');
   var minWinSize;
   minWinSize = 600;
   if (window.innerWidth < minWinSize) {
      $('.sometimesHide').hide();
   }

</script>

The JavaScript code is using jQuery, a cross-platform JavaScript library. You can download jQuery from jquery.com and host it on your own web server, or you can use a content delivery nework (CDN). Both Google and Microsoft host jQuery, so you can have it loaded in visitors' browsers by pointing to a Google or Microsoft server, if you prefer. You can include the following code in the HEAD section of your webpage to have it loaded from one of their servers.

Google CDN

Microsoft CDN

Since many users may have already downloaded jQuery from Google's or Microsoft's servers when visiting another website, when they visit your site the code will be loaded from their browser's cache, instead of downloading the code again, which leads to faster loading time for your pages. Also, CDN's usually have many geographically dispersed servers and will make sure when a user requests a file from them that it will be served from the server closest to them, which also leads to faster loading time for your page. The disadvantage of specifying a CDN, is that if visitors can't access the CDN, the jQuery code may not be loaded, but such CND's are usually very robust and the user's browser may not need to query the CDN anyway, if the jQuery code has been previously cached from the CDN.

The jQuery syntax is allows for selecting HTML elements and performing some action on the element(s) selected - see jQuery Syntax, which explains how to use .hide() to hide certain elements on the page, such as a div, paragraph, etc. See Check screen resolution and window size with JavaScript for information on checking the window size. In the example above, a DIV with class sometimesHide will be hidden if the browser window value window.innerWidth is less than 600 pixels. I could have, instead, chosen to take some other action, if the browser width was not less than the minimum specified by using JavaScript If...Else Statements.

If the code is likely to be used frequently and, perhaps, with different windows sizes, it may be better to use a JavaScript function placed in the HEAD section of the webpage. E.g., the following code could be used in the HEAD section:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
function hideElement(minWinSize) {
   if (window.innerWidth < minWinSize) {
      $('.sometimesHide').hide();
   }
}
</script>

The following code to call the function with a specific window size could then be included somewhere on the page after any divs that might need to be hidden:

<script>
   hideElement(600);
</script>