jQuery resize() using browser maximise button

Question

This is my code that fires whenever the window is resized:

$(window).resize(function()
{   
    setDisplayBoardSize();
});

Fires fine when I resize the window and runs my function just fine, as expected.

If I hit the maximise button though it doesn't work correctly.

This is the setDisplayBoardSize() function:

function setDisplayBoardSize()
{
    var width = $(".display_container").width();

    for (i=min_columns; i<=max_columns; i++)
    {
        if ((width > (i*(item_width + gap))) && (width < ((i+1) * (item_width + gap))) )
        {
            $("#display_board").css("width",(i*(item_width + gap))+ "px");
        }
    }
}

I think the problem is that when the browser maximise button is clicked it fires the function which reads gets the .display_container width before the resize and then resizes the window to maximum which means that my display_board is incorrectly sized.

If I'm right how can I get the size of the .display_container element after the window has resized to maximum?

Should note I've tested this in Chrome and Firefox

Thanks

Answer 1

This hapened to me also and didnt knew why, till i read your post. Seems like you were right the function is fired before i pressed maximize, so to fix this i used a litle delay.

$(window).resize(function()
{   
setTimeout(function() {
    setDisplayBoardSize();
}, 100);
});

Answer 2

I was having a similar issue on a responsive site where every asset would resize and shift appropriately except for the image slideshow. This only happened in IE, and it only happened when you would start at the tablet breakpoint, then hit the maximize button and enter the desktop breakpoint.

What ended up fixing the problem was throttling the resize trigger using this handy code from Paul Irish:

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});

You can see his full post about it (from 2009) here: http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Hope that helps somebody out there.