Cross-browser window resize event using JavaScript/jQuery

0 0 1 minute read

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>