Open In App

Cross-browser window resize event using JavaScript/jQuery

Last Updated : 12 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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. 

html 
<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. 

html 
<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: 

 

D
divyanksingh200
Improve
Article Tags :

Explore

Lightbox