Resizing dynamic elements with jQuery not working properly

Check out my problem here:

http://jsfiddle.net/89sq2/

What should happen is that the months legend should fit at开发者_JAVA技巧 the bottom. It happens if you resize the window manually (cause it triggers the proper event handler), but won't do at the first page load. Can you figure out why?

Thank you!

This is weird.. I think there is a problem in your resize function.. For whatever reasons, it doesn't work when I call it once.. Twice doesn't produce quite the result but 3 times works:

$(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();
  });
});

We don't see the problem while resizing manually the window since the event is trigered several time during a resize (think of it being triggered every time your mouse move one pixel while resizing). You can see it live here http://jsfiddle.net/89sq2/14/

Take a look at this

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

You determine the height of the footer, but it gets wider and shorter after you set page width

Finally, I found a working solution. Manually triggering a resize event after the layout completion will do. Check it out here, and feel free to aport better code:

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

Thanks everybody!