Skip to content
Related Articles
Open in App
Not now

Related Articles

Cross-browser window resize event using JavaScript/jQuery

Improve Article
Save Article
  • Last Updated : 23 Jan, 2023
Improve Article
Save Article

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

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!