How to Capture Browser Window resize with jQuery

The CSS media queries are very helpful when making a responsive website. They automatically execute the changes when the window size is in its range.

There is another way to detect Browser window size and execute changes is with jQuery which gives you window width and height.

You can use those values to complete your task.

---

Contents

1. Get screen size
2. Detect Window Resize
3. Detect Window resize complete
4. Conclusion

---

1. Get screen size

In jQuery there are .width() and .height() methods that you can use to detect the screen size.

# .width()

It gets or set the width of the selector.

Syntax –

Get

$( selector ).width();

Set

$( selector ).width( value );

Example

$( window ).width();

---

# .height()

It gets or set the height of the selector.

Syntax –

Get

$( selector ).height();

Set

$( selector ).height( value );

Example

$( window ).height();

Use both methods in one example –

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
<script>
$(document).ready(function(){

   // Get Textbox width
   $('#but_elementsize').click(function(){
       var width = $('#textbox').width();
       var height = $('#textbox').height();
       $('span').text( 'Textbox width : ' + width + ' , height : ' + height);
   });

   // Get window width
   $('#but_windowsize').click(function(){
       var width = $(window).width();
       var height = $(window).height();
       $('span').text( 'Browser Window width : '+width + ' , height : ' + height );
   });
});
</script>

<div class="container">
   <input type='text' id='textbox' style='width: 200px;'><br/><br/>
   <input type='button' id='but_elementsize' value='Get Textbox width' >
   <input type='button' id='but_windowsize' value='Get window width' >

   <br/><br/>
   <span></span>
</div>

View Demo

The above example works and gives what we want but it only executes once. It doesn’t give any value when resizing.

---

2. Detect Window Resize

# .resize() event

This executes whenever the window gets resized.

$( window ).resize(function() {
   var width = $(window).width();
   var height = $(window).height();
   $('span').text( 'Browser Window width : '+width + ' , height : ' + height );
});

---

# setInterval()

There is another way of doing this with setInterval() function which executes regularly on the defined interval.

setInterval(function(){
   var width = $(window).width();
   var height = $(window).height();
   $('span').text( 'Browser Window width : '+width + ' , height : ' + height );
}, 30);

View Demo

---

3. Detect Window resize complete

If your script uses some resources e.g. image that requires time to fully load in that case it’s better to execute the script when the Window resizing is complete.

For doing this I am using setTimeout() which executes whenever the window gets resized.

$(document).ready(function(){

    // Window resize
    $( window ).resize(function() {
        var id;
        clearTimeout(id);
        id = setTimeout(resizeComplete, 300);
    });
});

function resizeComplete(){
    var width = $(window).width();
    var height = $(window).height();
    $('span').text( 'Browser Window width : '+width + ' , height : ' + height );
}

View Demo

---

4. Conclusion

Now you know how to detect Browser window resize using jQuery but it is better to use CSS media queries if it is possible with them.

If you found this tutorial helpful then don't forget to share.