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:
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
divelement with the id “container”. Initially, it has some text content. - We define a JavaScript function called
handleResizewhich updates the content of the containerdivwith the current width and height of the browser window. - We attach the
handleResizefunction to theonresizeevent of thewindowobject using the assignmentwindow.onresize = handleResize;. This means that whenever the browser window is resized, thehandleResizefunction will be called. - Finally, we call the
handleResizefunction 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