Open In App

jQuery resize() method

Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery resize() method is an inbuilt method that is used when the browser window changes its size, resize() method triggers an event when the size of an element is changed, allowing you to perform actions or apply styles based on the new dimensions.

Syntax:

$(selector).resize(function)

Parameter: This method accepts a single parameter function which is optional. It is used to specify the function to run when the resize event is called. 

Example 1: In this example, we will increase the size of the text by using resize() method.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>The resize method</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        x = 0;
        $(document).ready(function () {
            $(window).resize(function () {
                $("p").text(x += 1);
            });
        });
    </script>
    <style>
        div {
            width: 150px;
            height: 100px;
            padding: 20px;
            border: 2px solid green;
            font-size: 20px;
        }
    </style>
</head>
 
<body>
    <div>
        <!-- press "ctrl" and "+" key together
            and see the effect -->
        Welcome to GfG!
        <br>
        <p>0</p>
        times.
    </div>
</body>
 
</html>


Output:

Example 2: In this example, we will decrease the size of the text by using resize() method.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>The resize method</title>
    <script src=
    </script>
 
    <!-- jQuery code to show the working of this method -->
    <script>
        x = 0;
        $(document).ready(function () {
            $(window).resize(function () {
                $("p").text(x -= 1);
            });
        });
    </script>
    <style>
        div {
            width: 150px;
            height: 100px;
            padding: 20px;
            border: 2px solid green;
            font-size: 20px;
        }
    </style>
</head>
 
<body>
    <div>
        <!-- press "ctrl" and "-" key together
            and see the effect -->
        Welcome to GfG!
        <br>
        <p>0</p>
        times.
    </div>
</body>
 
</html>


Output:



Last Updated : 07 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads