各セクションの幅を評価し、それらを合計してから、コンテナーの幅をすべての子セクションの合計に設定する関数を作成しました。これは、ページの読み込みではうまく機能しますが、サイズ変更では機能しません。以下のコード:
var sunWidth = 0;
function sizePanels(){
var sections = $("section");
sections.each(function(){
var totalWidth = 0,
select = $(this).find('.mainScroll div');
//we loop through all child content within a section and sum it's widths
select.each(function(index) {
totalWidth += parseInt($(this).outerWidth(true), 10);
});
//here we add up all of the section widths so we can set a master width for the container
sunWidth += parseInt(totalWidth, 10);
//we set the width of each section
$(this).css({ 'width' : totalWidth});
//now we set the width of the container
//this works great on page load, but not on resize! HERE IS THE PROBLEM
$("#sectionWrap").css({'width' : sunWidth});
});
}
sizePanels();
$(window).resize(sizePanels);
私が言ったように、この機能はページの読み込み時にうまく機能します。しかし、ウィンドウのサイズを変更すると、$("sectionWrap")
の幅が指数関数的に増加します。計算方法に問題があるに違いありませんsunWidth
。どうすればこれを修正できますか?