Cross-browser window resize event using JavaScript/jQuery

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.