Q:

How to Capture Browser Window Resize Event in JavaScript

mhmadesk
Save to bookmark
|
2022-05-18
|
  273 
Very Easy
0

How to Capture Browser Window Resize Event in JavaScript

JavaScript programming,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this answer

Use the addEventListener() Method

You can simply use the addEventListener() method to register an event handler to listen for the browser window resize event, such as window.addEventListener('resize', ...).

The following example will display the current width and height of the browser window on resize.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Window Resize Event</title>
</head>
<body>
<div id="result"></div>

<script>        
// Defining event listener function
function displayWindowSize(){
    // Get width and height of the window excluding scrollbars
    var w = document.documentElement.clientWidth;
    var h = document.documentElement.clientHeight;
    
    // Display result inside a div element
    document.getElementById("result").innerHTML = "Width: " + w + ", " + "Height: " + h;
}
    
// Attaching the event listener function to window's resize event
window.addEventListener("resize", displayWindowSize);

// Calling the function for the first time
displayWindowSize();
</script>
<p><strong>Note:</strong> Please resize the browser window to see how it works.</p>
</body>
</html>

You should avoid using the solution like window.onresize = function(event) { ... };, since it overrides the window.onresize event handler function. You should better assign a new event handler to the resize event using event listener, as shown in the example above.

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

JavaScript / jQuery Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to Reset a Form Using jQuery or JavaScript... >>
<< How to Check If an Object Property is Undefined in...