CODEWITHSUNDEEP
jquerylayoutresizeheight
frarees
frarees

Reputation: 2258

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 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!

Upvotes: 0

Views: 596

Answers (4)

frarees
frarees

Reputation: 2258

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!

Upvotes: 0

Janis
Janis

Reputation: 8769

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

Upvotes: 0

matdumsa
matdumsa

Reputation: 16105

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/

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69905

Take a look at this

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

Upvotes: 0

Related Questions