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 re

Answer 1

var window_width_check_big = false, // flag true if window bigger than my_width
window_width_check_small = false,   // flag true if window smaller than my_width
my_width = 1221; // Change to your width

function get_window_size() {
    if(window.innerWidth > my_width) {
        window_width_check_big = true;
    }
    if(window.innerWidth < my_width) {
        window_width_check_small = true;
    }   
}

get_window_size();

$(window).resize(function() {

    if(window.innerWidth > my_width) {
        window_width_check_big = true;
    }
    if(window.innerWidth < my_width) {
        window_width_check_small = true;
    }
    if( window_width_check_small && window_width_check_big ) {
        window_width_check_big = false;
        window_width_check_small = false;
        get_window_size();
        // Start function that you need
    }
});

Answer 2

The following code works well for me in both Chrome and IE11: (javascript and jQuery).

var mResizeTimer;
function setWindowResizeEndEvent() {

    $(window).on('resize', setTimerForResizeEnd);
}

function setTimerForResizeEnd() {
    clearTimeout(mResizeTimer);
    mResizeTimer = setTimeout(onResizeEnd, 100);
}

function onResizeEnd() {
    $(window).off('resize', setTimerForResizeEnd);
    $(window).resize();

    setWindowResizeEndEvent();
}

Explanation: I'm firing the native window.resize event, After a resizing ended. This re-firing the resize event after maximizing the window ended.

Answer 3

EDIT for proposed fix:

Here is the working jsFiddle and here is the results only demo.

As you can see, I totally re-factored your original jQuery code. I removed everything from Global as well as taking out the functions. .resize() expects a function already, so I just do everything inside that one function and then immediately call .resize() to invoke it on the initial page load.

Another change I made was to increment your for loop backwards, starting with the widest possible width size you allow (5), working my way down to the smallest possible width size you allow (2).

Also, inside of your for loop, I created j and k variables to make it easier to read those conditions.

The main change was the if statement. If we are on the max_column iteration and the width of the container is wider k, we want to set the board's width to k and jump out of the for loop, otherwise we evaluate the original if statement you had, otherwise if we are on the min_column iteration and the width of the container is less than j, we want to set the board's width to j.

I tested this in Chrome and it works beautifully. I hope this helps you.

$(document).ready(function()
{    
    $(window).resize(function() 
    {
        var item_width = 200, 
            item_height = 300, 
            gap = 20,
            min_columns = 2, 
            max_columns = 5,
            min_width = min_columns * (item_width + gap), 
            max_width = max_columns * (item_width + gap),
            container_width = $(".display_container").width(),
            $display_board = $("#display_board"),
            $display_board_ol_li = $display_board.find("ol > li");

        //console.log("container width: " + container_width);

        for (var i = max_columns; i >= min_columns; i--)
        {
            var j = i * (item_width + gap),
                k = (i+1) * (item_width + gap);

            //console.log("j: " + j);
            //console.log("k: " + k);
            //console.log("display_board width (before): " + $display_board.css("width"));

            if (i === max_columns && container_width > k) 
            {
                $display_board.css("width", max_width + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
                break;                
            } 
            else if (container_width > j && container_width < k)
            {
                $display_board.css("width", j + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
                break;
            }
            else if (i === min_columns && container_width < j) 
            {
                $display_board.css("width", min_width + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
            }
        }

        $display_board_ol_li.css({

            "width" : item_width + "px",
            "height": item_height + "px",
            "margin": gap/2 + "px"

        });

    }).resize();

});​

Answer 4

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.

Answer 5

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 6

The following code works well for me in both Chrome and IE11: (javascript and jQuery).

function setWindowResizeEndEvent() {

    $(window).on('resize', setTimerForResizeEnd);
}

var mResizeTimer;
function setTimerForResizeEnd() {
    clearTimeout(mResizeTimer);
    mResizeTimer = setTimeout(onResizeEnd, 100);
}

function onResizeEnd() {
    $(window).off('resize', setTimerForResizeEnd);
    $(window).resize();

    setWindowResizeEndEvent();
}

Explanation: I'm firing the native window.resize event, After a resizing ended. This re-firing the resize event after maximizing the window ended.