Cross-browser window resize event using JavaScript/jQuery
Last Updated :
23 Jan, 2023
Improve
The resize() method is an inbuilt method in jQuery that is used when the browser window changes its size. The resize() method triggers the resize event or attaches a function to run when a resize event occurs. jQuery has a built-in method for window resizing events.
Syntax:
$(selector).resize(function)
This syntax is used for cross-browser resize events.
Example 1: This example uses resize() method to count how many times browsers window resize.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script>
var x = 1;
$(document).ready(function() {
$(window).resize(function() {
$("span").text(x += 1);
});
});
</script>
<p>Window resized <span>0</span> times.</p>
<p>Try resizing your browser window.</p>
Output:
You can use the addEventListener() method to register an event handler to listen for the browser window resize event, such as window.addEventListener('resize', ...).
Syntax:
object.addEventListner("resize", myscript);
Example 2: This example display the size of resize windows.
<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>
Output:
