jQuery resize() method

The jQuery resize() method triggers a resize event when the size of the browser window changes. It binds the event handler to resize an event or trigger that event on an element. This method can be used to perform some required actions such as avoiding scrollbars when adjusting the elements of the page on window resize, and many more.

If the resize event triggers and the element's dimension changes, the content inside the elements also adjusts as well.

Syntax

This method accepts an optional parameter function, which specifies the function to execute every time the resize event is triggered.

Now, let's see an example of using the jQuery resize() method.

Example

In this example, we are using the resize() method. Here, we are using the optional parameter of the resize() method. When the user resizes the window, the updated width and height of the window will be displayed on the screen. It will also display how many times the user tried to resize the window.

When we change the height of the window, the updated height will change accordingly. Similarly, when we change the width of the window, the updated width will change accordingly.

<!DOCTYPE html>
<html>
<head>
<title> jQuery resize() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
var i = 0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(i += 1);
var res = "Width = " + $(window).width() + "<br/>Height = " + $(window).height();
$('#para').html(res);
});
});
</script>
<style>
span {
font-weight: bold;
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h2> This is an example of using the jQuery resize() method. </h2>
<p> Try to resize your browser's window to see the effect. </p>
<p> You have resized the window <span id = "s1"> 0 </span> times.</p>
<p id = "para"> </p>
</body>
</html>

Test it Now

Output:

After the successful execution of the above code, the output will be -