Вопрос по jquery, javascript – jQuery resize () с помощью кнопки максимизации браузера

13

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

$(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_containerbefore изменение размера, а затем изменение размера окна до максимума, что означает, что мой display_board имеет неправильный размер.

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

Следует отметить, что я проверил это в Chrome и Firefox

Спасибо

Ваш Ответ

7   ответов
6

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

В итоге проблема была устранена путем регулирования триггера изменения размера с помощью этого удобного кода от Пола Айриша:

(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/

Надеюсь, это поможет кому-то там.

Это действительно полезно.Underscore также имеетdebounce функция (возможно, та же самая функция debounce?), так что если вы используете ее, то это еще проще !! Matt Styles
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
    }
});
Пожалуйста, рассмотрите возможность добавления объяснения к коду в вашем ответе.
4

EDIT for proposed fix:

Здесьработает jsFiddle и воттолько результаты демо.

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

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

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

Основным изменением было утверждение if. Если мы находимся на итерации max_column и ширина контейнера большеkмы хотим установить ширину доски равнойk и выпрыгиваем из цикла for, в противном случае мы оцениваем исходное выражение if, которое вы имели, в противном случае, если мы находимся на итерации min_column и ширина контейнера меньше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();

});​
Только что обновил OP, чтобы сказать, что я тестировал это Chrome и Firefox. Протестировал IE и получил тот же результат, все работает отлично, но кажется, что функция срабатывает до изменения размера элемента (или до его изменения). Matt Styles
Дополнительная информация - если вы вручную очень быстро измените размер окна, тогда он не изменит размер элемента правильно (все равно будет сгенерировано событие, хотя просто так, что setDisplayBoardSize слишком рано получает ширину контейнера). Matt Styles
Fiddle is here   Скорее разочаровывающе, он изменяется совершенно идеально, когда окно максимально развернуто - попробуйте уменьшить окно вручную, чтобы мой дисплей имел ширину всего в 2 столбца, а затем развернуть его до максимума. В jsFiddle он правильно отображает 4 или 5 столбцов, в моем браузере (Chrome, Firefox или IE) он остается как 2 столбца при максимизации (он будет идти до 5 столбцов, если я увеличу его вручную). Я должен отметить, что мой экран имеет ширину 1920px, поэтому я получаю много столбцов. Matt Styles
Не могли бы вы создатьjsBin или жеjsFiddle продемонстрировать свою проблему?
Это сделано для того, чтобы IE не запускал событие изменения размера слишком часто, тем самым практически ставя себя на колени & # x2026;
1

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

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

Спасибо за ссылку, взломав плагин. Но у меня есть та же проблема, что размер элемента не изменяется моим JS, когда я нажимаю кнопку максимизации браузера, работает идеально, когда я вручную изменяю размер окна, хотя функция срабатывает, когда я нажимаю максимизировать, она просто изменяет размер элемент перед изменением размера окна, что означает, что когда окно развернуто, я оставляю элемент меньшего размера, что означает, что моя панель отображения становится галереей с 3 столбцами, а не с 4 столбцами (например) Matt Styles
26

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

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

Отлично! Я установил свой тайм-аут на пятидесятую секунды, и он отлично работает. Спасибо!
Upvoted. Хорошо сработало для меня.
Вы, сэр, единственный, кто действительно решил мою проблему. Ваше решение чрезвычайно просто и легко реализуемо. Я бы дал тебе +100, если бы мог. Большое спасибо.
0

Следующий код хорошо работает в 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, После того, как изменение размера закончилось. Это перезапуск события resize после максимизации окна закончился.

0

Следующий код хорошо работает в 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, После того, как изменение размера закончилось. Это перезапуск события resize после максимизации окна закончился.

Похожие вопросы