Jsrimac Jsrimac - 5 months ago 35
Javascript Question

Resize is working fine but document ready function is not working properly

Resize is working but document ready function is not working.

FIDDLE

Image on load:

Image on load

After resize:

enter image description here

$(function() {
$('.left').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
]
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});

$(window).ready(function() {
//alert($(window).height());
$('.left').height(($(window).height() - 100));
});
$(window).trigger('ready');

$(window).resize(function() {
//alert($(window).height());
$('.left').height(($(window).height() - 100));
});
$(window).trigger('resize');

$(window).ready(function() {
//alert($(window).height());
$('.right').height(($(window).height() - 100));
});
$(window).trigger('ready');

$(window).resize(function() {
//alert($(window).height());
$('.right').height(($(window).height() - 100));
});
$(window).trigger('resize');
$(document).ready(function() {
redraw();
$(window).on('resize', redraw);
});

function redraw() {
var full_width = $('#container').width();
var right_width = 300;
$('.left').width(full_width - right_width);
}

Answer

Check the fiddle https://jsfiddle.net/3j7nc5qn/6/

redraw();
$(window).trigger('ready');
$(window).on('resize', redraw);
$(window).trigger('resize');

these methods call inside the functions. check the fiddle

Updated Fiddle -

https://jsfiddle.net/3j7nc5qn/7/