JQuery изменения размера() с помощью кнопки браузера

Question

максимально Это мой код, который срабатывает каждый раз, когда при изменении размера окна:

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

Пожары хорошо, когда я изменить размер окна и работает моя функция просто отлично, как и ожидалось.

Если я нажимаю кнопку максимизации, хотя она работает неправильно.

Это функция setDisplayBoardSize():

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"); 
     } 
    } 
} 

Я думаю, что проблема в том, что, когда браузер максимально нажимается кнопка это срабатывает функция, которая считывает получает ширину .display_container перед тем Изменить размер, а затем изменяет размер окна до максимума, что означает, что моя display_board имеет неправильный размер.

Если я прав, как получить размер элемента .display_container после, размер окна изменился до максимума?

Должен отметить, что я проверил это в Chrome и Firefox

Благодаря

Answer 1

EDIT для предлагаемого исправления:

Вот working jsFiddle и вот results only demo.

Как вы можете видеть, я полностью переустановил ваш исходный код jQuery. Я удалил все из Глобального, а также снял функции. .resize() ожидает функцию уже, поэтому я просто делаю все внутри этой функции, а затем сразу вызываю .resize(), чтобы вызвать ее при загрузке начальной страницы.

Еще одно изменение, которое я сделал, заключалось в том, чтобы увеличить ваш цикл цикла назад, начиная с максимально возможного размера ширины, который вы разрешаете (5), работая до минимально возможного размера ширины, который вы разрешаете (2).

Кроме того, внутри вашего цикла for я создал j и k переменные, чтобы упростить чтение этих условий.

Главным изменением было утверждение if. Если мы находимся на итерации max_column и ширина контейнера шире k, мы хотим установить ширину до k и выпрыгнуть из цикла for, иначе мы оценим исходное утверждение if, если вы находитесь на min_column iteration и ширина контейнера меньше j, мы хотим установить ширину до j.

Я проверил это в Chrome и прекрасно работает. Я надеюсь, это поможет вам.

$(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 2

некоторые браузеры, такие как IE и оперы триггера это событие с некоторыми ограничениями, этот плагин может решить проблему:

http://benalman.com/projects/jquery-resize-plugin/

Answer 3

У меня была аналогичная проблема на отзывчивым месте где бы каждый актив изменить размер и сдвиг, за исключением слайд-шоу изображений. Это произошло только в IE, и это произошло только тогда, когда вы начали с точки останова планшета, затем нажмите кнопку максимизации и введите точку останова на рабочем столе.

Что в конечном итоге фиксируя проблема была дросселирования триггер изменения размера, используя этот удобный код от 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... 
}); 

Вы можете увидеть его полный пост об этом (с 2009 года) здесь: http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Надежда что помогает кому-то там.

Answer 4

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 5

Это тоже помогло мне и не знало, почему, пока я не прочитаю ваше сообщение. Похоже, вы были правы, функция увольняется до того, как я нажал максимизировать, поэтому, чтобы исправить это, я использовал задержку litle.

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

Answer 6

Следующий код работает хорошо для меня как в Chrome и IE11: (JavaScript и 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(); 
} 

Объяснение: Я обжиг родное событие window.resize, После изменения размера закончилась. Это повторное включение события изменения размера после завершения окна.

Answer 7

Следующий код хорошо работает для меня как в Chrome, так и в IE11: (javascript и 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(); 
} 

Объяснение: Я обжиг родное событие window.resize, После изменения размера закончилась. Это повторное включение события изменения размера после завершения окна.