Skip to content

JavaScript onresize event

  • by

Use JavaScript onresize event to get to know if the browser window has been resized. The resize event fires when the document view (window) has been resized.

In HTML:

 <element onresize="myScript"> 

In JavaScript:

object.onresize = function(){myScript};

JavaScript onresize event

A simple example code executes a JavaScript when the browser window is resized:

<!DOCTYPE html>
<html>
<body onresize="myFunction()">

  <script>
    function myFunction() {
      var w = window.outerWidth;
      var h = window.outerHeight;
      console.log("Window size: width=" + w + ", height=" + h);
    }
  </script>

</body>
</html>

Output:

JavaScript onresize event

Using the addEventListener() method:

<script>
window.addEventListener("resize", myFunction);

var x = 0;
function myFunction() {
  var txt = x += 1;
  console.log(txt
}
</script>

The best practice is to attach to the resize event.

window.addEventListener('resize', function(event) {
    ...
}, true);

jQuery is just wrapping the standard resize DOM event, eg.

window.onresize = function(event) {
    ...
};

Here’s a basic example demonstrating how to use the onresize event in JavaScript:

<!DOCTYPE html>
<html>
<head>
  <title>onresize Event Example</title>
  <style>
    #container {
      width: 300px;
      height: 200px;
      background-color: lightblue;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>
<body>

<div id="container">
  Resize the window to see the effect.
</div>

<script>
  // Function to handle the resize event
  function handleResize() {
    var container = document.getElementById('container');
    container.innerHTML = 'Width: ' + window.innerWidth + ', Height: ' + window.innerHeight;
  }

  // Attach the handleResize function to the resize event
  window.onresize = handleResize;

  // Initially call the handleResize function to display initial dimensions
  handleResize();
</script>

</body>
</html>

In this example:

  • We have an HTML div element with the id “container”. Initially, it has some text content.
  • We define a JavaScript function called handleResize which updates the content of the container div with the current width and height of the browser window.
  • We attach the handleResize function to the onresize event of the window object using the assignment window.onresize = handleResize;. This means that whenever the browser window is resized, the handleResize function will be called.
  • Finally, we call the handleResize function once initially to display the initial dimensions of the browser window.

You can see the onresize event in action by running this code and resizing the browser window. The content of the container div will update dynamically with the new dimensions of the window.

Do comment if you have any doubts or suggestions on this JS event topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading