1

I created a function which assesses the width of each section, adds them up and then sets the container width to be the sum of all child sections. This works great on page load, but not on resize. Code below:

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);

Like I said, this function works great oon page load. But on window resize, $("sectionWrap")'s width increases exponentially. There must be a problem with how I am calculating sunWidth. Any idea how I can fix this?

JCHASE11
  • 3,901
  • 19
  • 69
  • 132

1 Answers1

2

You did declare the sunWidth only once and intialised it with zero, but you keep adding to it every time sizePanels is called. It should be

function sizePanels(){
    var sunWidth = 0; // reset!
    $("section").each(…
Bergi
  • 630,263
  • 148
  • 957
  • 1,375