I have some scripting that modifies my web application. What it basically does is:
- Add dynamic elements to the DOM
- 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?