Capture Browser Window resize with jQuery

The CSS media queries are very helpful when making the 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 that gives you window width and height.

You can use those values to complete your task.

Capture Browser window resize with jQuery


Contents

  1. Get screen size
  2. Detect Resizing
  3. When 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.1.0/jquery.min.js" type="text/javascript"></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>

Output

Click on the buttons.

 

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


 

2. Detect Resizing

# .resize() event

This executes whenever 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);

Demo

Resize the current window or open in the new tab and resize.

 


 

3. When resize complete

If your script using 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 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 );
}

Output

Resize the window or view in the new tab and resize.


 

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.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *