Changing sidebar height when dynamic content is added

Question

I have a 'sticky sidebar nav' that is positioned absolutely relative to the #sidebar div, so it follows the page down on the left hand side and is always available. To make this work I had to add a height to the sidebar, so I used some code to find the height of the container dynamically. This is the code i used:

<script type="text/javascript">
    function matchColHeights(col1, col2) {
        var col1Height = $(col1).height();
        var col2Height = $(col2).height();
        if (col1Height > col2Height) {
            $(col1).height(col2Height);
        } else {
            $(col1).height(col2Height);
        }
    }

    $(document).ready(function() {
        matchColHeights('#sidebar', 'section#main-container');
    })
</script>

Currently the #sidebar div sits inside the section called section#maincontainer. A very simplified version of the html is below.

<body>
    <header>Header content</header>
    <section id="main-container">
        <div id="sidebar">
            <ul>
                This is the floated ul
            <ul>
        </div>
        <div class="content">
            This is where the content of the page sits
        </div>
        <div class="content2">
            This is where the content of the page sits (because of the design there are often more than one divs floated right
            <div>Within the content divs are potential expanding divs (accordions and tabs that change size)</div>
        </div>
    </section>
    <footer>Footer content</footer>
</body>

So the problem I have is that there is expandable content (tabs and accordions) in the content area, and when the content expands, the jQuery does not update the height of the sidebar to the new height (this new height could be shorter or longer than the original height). I have tried adding the function to my .click() handler of the accordion (haven't yet tried with the tabs) but here is the code that is used to drop my accordion down:

<!--Content Accordion-->
<script type="text/javascript">
    $(document).ready(function() {
        $('div.content-accordion> div').hide();  
        $('div.content-accordion> h4').click(function() {
            var $nextDiv = $(this).next();
            var $visibleSiblings = $nextDiv.siblings('div:visible');

            if ($visibleSiblings.length ) {
                $visibleSiblings.slideUp('fast', function() {
                    $nextDiv.slideToggle('fast');
                    $matchColHeights('#sidebar', 'section#main-container');
                });
            } else {
                $nextDiv.slideToggle('fast');
                $matchColHeights('#sidebar', 'section#main-container');
            }
        });
    });
</script>

As you can see I can add the $matchColHeights('#sidebar', 'section#main-container'); function into the click function and it doesn't refresh to the new height still. I have tried a few other possibilities with no luck.

score 2 · Accepted Answer · answered Dec 01 '11 at 12:29

Just to let everyone know i found a solution...Took alot of messing about but code is below.

I essentially on the click had to set sidebar height back to 0, and create a function that finds the new height of the section#main-container, and then applys that as a css height to the sidebar. This changed the height of the sidebar just fine, but then the sticky sidebar wasnt readjusting to the new height, so i just pasted the code that works my sticky sidebar (the code that starts with $("aside") into the function and it refreshes just fine. Thanks to those that helped.

<!--Content Accordian-->
<script type="text/javascript">
$(document).ready(function() {
  $('div.content-accordian> div').hide();  
  $('div.content-accordian> h4').click(function() {
    var $nextDiv = $(this).next();
    var $visibleSiblings = $nextDiv.siblings('div:visible');

    if ($visibleSiblings.length ) {
      $visibleSiblings.slideUp('fast', function() {
        $nextDiv.slideToggle('fast', function() {
// START CHANGE SIDEBAR HEIGHT      
        $("#sidebar").css({ height: 0});
        newheight = $("section#main-container").height();
         $("#sidebar").css({ height: newheight});
         $("aside").stickySidebar({
            timer: 500
          , easing: "easeInOutQuint"
          , constrain: true
        });

      });
// END CHANGE SIDEBAR HEIGHT    
      });
    } else {
       $nextDiv.slideToggle('fast', function() {

// START CHANGE SIDEBAR HEIGHT      
        $("#sidebar").css({ height: 0});
        newheight = $("section#main-container").height();
         $("#sidebar").css({ height: newheight});
         $("aside").stickySidebar({
            timer: 500
          , easing: "easeInOutQuint"
          , constrain: true
        });

      });
// END CHANGE SIDEBAR HEIGHT
    }
  });
});
</script>

Manticore · Answer 2 · 2011-11-29T13:52:16.943

0

I believe you could write

if (col1Height !== col2Height) {
    $(col1).height(col2Height);
}

instead of

if (col1Height > col2Height) {
    $(col1).height(col2Height);
} else {
    $(col1).height(col2Height);
}

But that won't solve your problem.

You probably have to fire that matchColHeights() function from inside a callback like this:

if ($visibleSiblings.length ) {
    $visibleSiblings.slideUp('fast', function() {
        $nextDiv.slideToggle('fast', function() {
            $matchColHeights('#sidebar', 'section#main-container');
        });
    });
} else {
    $nextDiv.slideToggle('fast', function() {
        $matchColHeights('#sidebar', 'section#main-container');
    });
}

Let me know if it worked.

edited Nov 29 '11 at 13:52

answered Nov 29 '11 at 13:38

Manticore

1,262
15
35

Hi manticore Thanks for the help, but unfortunately this didnt work. It does not trigger the new height and also the toggle on the Accordian breaks. I see what you mean though i thought it wasnt triggering properly. Perhaps i need to write a statement that finds the height before the .click, and then after the .click, and then amends the css accordingly. I actually got the change to almost work with 'var curHeight = parseInt($("section#main-container").height()), newHeight = Math.ceil(curHeight/10) * 10 - 5; $("#sidebar").height(newHeight );' but not as i dont understand curHeight – Tom Nov 29 '11 at 14:33
Oh and also you were correct about the first part manticore! Thanks for the simplified code – Tom Nov 29 '11 at 14:42

Changing sidebar height when dynamic content is added

2 Answers2