Skip to content
Related Articles

Related Articles

Cross-browser window resize event using JavaScript/jQuery

View Discussion
Improve Article
Save Article
  • Last Updated : 31 Oct, 2019
View Discussion
Improve Article
Save Article

The resize() method is an inbuilt method in jQuery which 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 resize 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.




<!DOCTYPE html>
<html>
  
<head>
    <script src=
  </script>
    <script>
        var x = 1;
        $(document).ready(function() {
            $(window).resize(function() {
                $("span").text(x += 1);
            });
        });
    </script>
</head>
  
<body>
  
    <p>Window resized <span>0</span> times.</p>
    <p>Try resizing your browser window.</p>
  
</body>
  
</html>

Output:

  • Before resize the browser windows:
  • After resize the browser windows:

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.




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <title>JavaScript Window Resize Event</title>
</head>
  
<body>
    <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>
</body>
  
</html>

Output:

  • Before resize the browser window:
  • After resize the browser window:

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!