Question

I have some scripting that modifies my web application.
What it basically does is:

1. Add dynamic elements to the DOM
2. Resize some DOM elements to fit the window height and other stuff…

So, I do:

$(document).ready ->
  $('.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'

  resize = ->
    $('.column').height                         $(window).height() - $('#filter-list').outerHeight(true) - $('#footers').outerHeight(true)
    $('#timeline-panel').width                  $(window).width()
    $('#timeline-panel .scrollable-area').width "#{$('.interval-view').length * $('.interval-view').width()}px"

  window.onorientationchange = ->
    resize()

  $(window).resize ->
    resize()

  resize()

But, I don’t get the proper height value on $('.column').height. The script retrieves to me the height value as if I didn’t append the clearfix element. It’s like it doesn’t take into account that part when it calculates the final height.

I’ve even tried with deferred object, but no success. It still takes the height without the clearfix element consideration.

For not CoffeeScript folks, here I paste the generated Javascript:

  $(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');
    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() {
      return resize();
    });
    return resize();
  });

Any way to fix that?

Answer 1

this might be resolved by using jquery .live

The .live() method is able to affect elements that have not yet been
added to the DOM through the use of event delegation: a handler bound
to an ancestor element is responsible for events that are triggered on
its descendants. The handler passed to .live() is never bound to an
element; instead, .live() binds a special handler to the root of the
DOM tree.