jQuery Event resize() Method

The jQuery event resize() method is used to bind an event handler to the resize event or trigger that event on the selected element.

The "resize" event is triggered when the browser window’s size changes. This event is often used to enhance the responsiveness of a web page, especially for adapting the navigation bar to different screen sizes.

Syntax

Following is the syntax of the jQuery event resize() method −

$(selector).resize(function)

Parameters

This method accepts an optional parameter as a function, which is described below −

function − An optional function to execute each time the event is triggered.

Return Value

This method does not return any value but binds an event handler to the resize event.

Example 1

The following program demonstrates the usage of the jQuery event resize() method −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
</head>
<body>
    <p>Resize your window screen</p>
</body>
<script>
    $(window).resize(function(){
        alert("You resized the window screen");
    });
</script>
</html>

Output

The above program displays a pop-up alert message when the window screen is resized −

Example 2

Change the background color of the div element when your window screen resizes −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 60%;
        height: 300px;
        padding: 20px;
        background-color: gray;
    }
</style>
</head>
<body>
    <p>Resize your window screen</p>
    <div>
        Box
    </div>
</body>
<script>
    $(window).resize(function(){
       $('div').css("background-color", "green");
    });
</script>
</html>

Output

After executing the program, a box is displayed. When the window is resized, the box’s background color changes to green −

Example 3

Hide the navigation bar when the window is resized, and display it again by clicking on a button −

<!DOCTYPE html>
<html>	
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 100%;
        padding: 10px;
        background-color: gray;
    }
    div ul{
        list-style: none;
        text-align: right;
    }
    div ul li{
        display: inline-block;
        margin: 0px 10px;
    }
    .demo{
        width: 100%;
        text-align: left;
        padding: 10px;
    }
    .demo ul{
        display: none;
    }
</style>
</head>
<body>
    <div>
        <ul>
            <li>HOME</li>
            <li>ABOUT US</li>
            <li>BLOG</li>
            <li>CONTACT US</li>
        </ul>
    </div>
    <div><button>Click</button></div>
</body>
<script>
    $(window).resize(function(){
        $('div').toggleClass('demo');
    });
    $('button').click(function(){
        $('ul').slideDown();
    });
</script>
</html>

Output

Once the program is executed, it will display navigation bars and a button. When the window is resized, the navigation bars will be hidden. To show them again, click on the displayed button −

jquery_ref_events.htm

Print Page