Home » jQuery » jQuery DOM Manipulation Methods

jQuery resize() Method

jQuery | resize() Method: Learn about the jQuery resize() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 30, 2022

resize() Method

Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the resize() method here.

The resize() method is a built-in jQuery method. This method gets triggered whenever the browser window size is changed. A change even for 1px triggers this event. Each time there is a change in the size of the window, this method gets called.

resize() Method Syntax

$(window).resize(function);

It takes one optional parameter – function. It gets fired if the method is called. This method returns the output given by the respective function. In the example given below, each time the window size is changed, it gets added up to the list created.

jQuery resize() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Event - Resize</h2>
    <p>Change the browser window size to see the results.</p>
    <hr>
    <h4 style="color:darkblue">Welcome to Include Help !</h4>
    <p>This is a jQuery Tutorial for Event Methods.</p>
    <h4 style="color:darkblue">Thanks for visiting !</h4>
    <img style="height: 200px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
    <hr>
    <ol></ol>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $(window).resize(function(){
            $('ol').append("<li>Window Size Changed</li>");
        });
    });
  </script>
</html>

Output: