Question

Let’s say I have a section, it’s width is 1181 (as outputted in the console) and I am using the following code to find out the width of it:

jQuery(document).ready(function()
{
    var body_size = jQuery('section').width();
    console.log(body_size);
});

If I re-size my browser, I have to reload the page to find out the new size of this div.

Is there a way to find out the size as I re-size my browser?

Answer 1

You can handle the “resize” event. Be warned that the event is fired very frequently, so it’s a good idea to not do any DOM manipulation while in the handler, or as little as possible. One way to deal with the issue is to use a timer:

var resizeTimer;
$(window).resize(function() {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {
    var body_size = $('section').width();
    // ...
    // do your work here
    // ...
  }, 200);
});

That sets up a timer so that you won’t actually do any work until at least 200 milliseconds after the user stops resizing (or pauses for a bit).