Executing a JavaScript function when a browser window is resized

Sometimes you may want to have a certain event take place if a visitor to your website resizes his or her browser window. With HTML 5, you can use the onresize Event Attribute. You can apply the event attribute to the body tag, e.g.:

The event that would occur when the browser window is resized will depend upon the code you place in the JavaScript function referenced, which in this case I've named someFunction.

Note: the onresize attribute is new to HTML5 and isn't supported in HTML 4.01 and older versions of HTML. You can expect current versions of browsers to support it, but if a visitor has an outdated browser version, the function may not work for the visitor.

E.g., I include ads on the right side of webpages. I include JavaScript to hide elements on a web page, which will hide the ads if a visitor's browser window is too narrow to display the ad to the right of text and will, instead, place the ad above the text on the left side of the window, which may make the page harder to read. I have the following JavaScript in the head section of some pages:

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

<script>
   hideElement(n);
<script>

I set the minimum browser width that is needed to display the ads as the value for n. E.g., if I don't want them displayed if the browser window size is less than 795, I would use the following code at the bottom of the page:

<script>
   hideElement(795);
<script>

Then I put any ads I don't want to be displayed when the browser window isn't wide enough to display them properly, which might be the case for someone using a tablet or phone, or even someone using a desktop system with a browser window that has been shrunk so that it isn't occupying the full width of the screen, in a DIV element with the class of the DIV set to sometimesHide. E.g.:

<div class="sometimesHide">
code to be hidden
<div>

<div class="sometimesHide">
   <?php incfile("/ads/someadfile"); ?>
</div>

So, if I used 795 for the minimum window size, if the browser window is only 700 pixels wide the ads contained in the sometimesHide divs on the page wouldn't be visible. But, if the browser window is initially wide enough, but the user reduces the size of the window to below the width I specified for the hideElement function, then the ads will be displayed unless the user manually refreshes the browser display. But the onresize event attribute provides a way to hide the ads so they are no longer visible if the browser window width is shrunk to below the specified width, even if the visitor doesn't refresh the page. E.g., on this page for the BODY tag, I could use the following:

<body onresize="hideElement(750)">

Or, instead, so I don't specify the size in multiple places, I could alter the function code so that the size is a constant inside the function or I could make it a variable outside the function that gets passed to the function. E.g., I could put the following code in the HEAD section of the web page:

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

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

That code will automatically hide an ad that is contained within a DIV that has a class of sometimesHide, if the browser window is initially less than 750 pixels or if the browser window is resized to become less than 750 pixels in width. However, it won't make the ad appear or reappear if the browser window is less than 750 pixels at some point, but then is enlarged to be 750 pixels or greater in width.

To make the ad appear or reappear in such situations, I can modify the original function, which I'll rename from hideElement to adColDisplay, since it will no longer exclusively be hiding the ads.

function adColDisplay(minWinSize) {
if (window.innerWidth < minWinSize) {
 $('.sometimesHide').hide();
} else {
 $('.sometimesHide').show();
}

<body onresize="adColDisplay(winSize)">

<script>
   adColDisplay(winSize);
</script>

Then when the browser window is resized, the display of any ads within a DIV element using class equals sometimesHide, i.e., <div class="sometimesHide"> will be displayed or hidden depending upon whether the browser window width is less than, equal to, or greater than the value specified for winSize as can be seen by the Udemy ads on the right side of this page when the browser window is resized. Udemy offers a variety of low-cost, and some free, online courses, including ones on Javascript, such as the following: