Изменение размера динамических элементов с помощью jQuery не работает должным образом

Question

Проверьте мою проблему здесь:

http://jsfiddle.net/89sq2/

Что должно произойти, так это то, что легенда месяца должна поместиться внизу.Это происходит, если вы изменяете размер окна вручную (потому что он запускает правильный обработчик событий), но не будет работать при первой загрузке страницы.Вы можете понять, почему?

Спасибо!

Answer 1

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

$(function() {
  $(document).ready(function() {
    var resize;
    $('.interval-view').wrapInner('<div class="column" />');
    $('.column').wrapInner('<div class="inner-column" />');
    $('#contents, #footers').append('<div class="clearfix"></div>');
    $('.interval-view:even').css('background-color', '#F9F9F9');
    $('.interval-view:odd').css('background-color', '#DDD');
    $('#footers').css('background-color', '#CCC');
    resize = function() {
      $('.column').height($(window).height() - $('#filter-list').outerHeight(true) - $('#footers').outerHeight(true));
      $('#timeline-panel').width($(window).width());
      return $('#timeline-panel .scrollable-area').width("" + ($('.interval-view').length * $('.interval-view').width()) + "px");
    };
    window.onorientationchange = function() {
      return resize();
    };
    $(window).resize(function() {
        console.log("Resizing");
      return resize();
    });

      $(window).resize();
      $(window).resize();
      $(window).resize();
  });
});

Мы не видим проблемы при изменении размера окна вручную, так как событие запускается несколько раз во время изменения размера (представьте, что оно вызывается каждый раз, когда ваша мышь перемещается на один пиксель при изменении размера). Вы можете увидеть это в прямом эфире здесь http://jsfiddle.net/89sq2/14/

Answer 2

Наконец-то я нашел рабочее решение. Запустите событие изменения размера после завершения макета. Проверьте это здесь, и не стесняйтесь указывать лучший код:

http://jsfiddle.net/89sq2/19/

Спасибо всем!

Answer 3

Взгляните на это

http://jsfiddle.net/89sq2/8/

Answer 4

Вы определяете высоту нижнего колонтитула, но она становится шире и короче после установки ширины страницы