Set parent div height to content that is not overflowing

Question

I have a slider that's in place on my website.

The basic way that it works is depicted in this jsfiddle -

http://jsfiddle.net/6h7q9/15/

I've written code to set the parent's height to the height of the content div. This worked fine, until I introduced some content that did not have a fixed height and whose height might increase while it was being shown on the page. Is there a way, I can dynamically change the height of this parent div whenever content inside it increases or decreases it's height.

HTML -

<div id="slider_container">
<div id="slider">
    <div id="slide1">
        Has content that might increase the height of the div....
    </div>
    <div id="slide2">
        Has content that might increase the height of the div....
    </div>
    <div id="slide3">
        Has content that might increase the height of the div....
    </div>    
</div>
</div>
<input type="button" value="Next" id="btnNext">
<input type="button" value="Previous" id="btnPrev">
<input type="button" value="Add text" id="btnAddText">
<div class="footer">
    I appear after the largest container, irrespective of which one is present....
</div>

JavaScript -

var currSlider = 1;
$('#btnNext').click(function(){
    debugger;
    var margin = $('#slider').css('margin-left');   
    if(parseInt(margin) <= -400) {
        return;
    }
    currSlider++;
    // Moving the slider
    $('#slider').css('margin-left', parseInt(margin) - 200 + 'px');    
    // Resetting the height...
    $('#slider').height($('#slide' + currSlider).height());
});
$('#btnPrev').click(function(){
    debugger;
    var margin = $('#slider').css('margin-left');
    if(parseInt(margin) >= 0) {
        return;
    }
    currSlider--;
    // Moving to the previous slider
    $('#slider').css('margin-left', parseInt(margin) + 200 + 'px');
    // Resetting the height...
    $('#slider').height($('#slide' + currSlider).height());

});
$('#btnAddText').click(function() {
    $('#slide' + currSlider).text('Hello World'.repeat(100));
});

String.prototype.repeat = function(times) {
   return (new Array(times + 1)).join(this);
};

Answer 1

I hope this "answer" gets you going in the right direction. Since i don't have the time to fully look this up right now, i hope to send you in the right direction. if you do find out how to do this properly, please shoot me a message, since i would really like to know ^_^

• http://www.w3.org/TR/DOM-Level-3-Events/#legacy-event-types

An example on how to use: ( DOMSubtreeModified didn't work in IE from what i read. Therefor the propertchange event)

$('#slide1').on('DOMSubtreeModified propertychange', function() {
    console.log('test',this);
});

Another option is by using the MutationObserver:

• http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers
• https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers

---

Updated 6-8-2014 15:00 CET

Since i totally misread the original post, this answer was useless to say the best. But since the problem is actually really easy to solve (or... at least i hope i understand the problem this time), i thought i'd post an answer that worked for the situation: a slider with content of different heights.

What was the problem with the original slider? You moved the content out of the container, which made it hidden. However, the container would still pick up the height of it, since it only had a fixed width. The fixed height on the '#slider' did not prevent the container of picking up the height from the '#slide-*'. Had you set the height for the container... all would be fine :-)

Here's the outline of the hidden slide, moved 'off canvas': http://i.gyazo.com/f2404e85263a7209907fdbc8f9d8e34e.png

I did not fix your fiddle by completing your code. I just rewrote it to provide you with an easier to maintain slider. Here's a fiddle with a working slider where you can add and remove stuff in the slides: http://jsfiddle.net/3JL2x/3/

Answer 2

Just remove the height properties in the .slide1, 2 and 3 and add min-height instead. Like that :

#slider > div {
    min-height:200px;
    float:left;
    width : 200px;
}
#slide1 {  
    background-color : red;   
}
#slide2 { 
    background-color: green;    
}
#slide3 {    
    background-color: blue; 
}

Live example
http://jsfiddle.net/6h7q9/27/