Cross-browser window resize event using JavaScript/jQuery

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: