How to compare height of nested divs?

Question

I got 2 divs, one inside another.

<div id="ads_content" class="ads_contents">
    <div id="ads_text" class="ads_text">
        ... text contents ...
    </div>
</div>

ads_content div has max-height of 230px, and it has overflow: hidden. So there will be shown a definite amount lines of text from ads_text div. I need to compare their heights, to decide, whether i need to add "Expand" button.

I do like this:

$(document).ready( function() {
    $('.ads_contents').each(function() {
        var t = $(this);
        var needed_height = t.children('.ads_text').css('height');
        var actual_height = t.css('height');
        if (actual_height < needed_height) {
            t.after('<div class="expander" onclick="expand_collapse(' + getAdId(t.attr('id')) + ', this);">Mehr</div>');
        }
    });  
});

In Opera and FF everything is fine. The problem is: actual_height and needed_height are 'auto' in IE. And in webkit their values are equal, until the whole document loads.

For a Chrome i've made a workaround, with setTimeout for 300 msec, but that is not what i want. Can anyone please tell me, how can I compare heights of those divs in webkit and IE?

Answer 1

Try using the jquery height() method, it works ok in IE as far as I remember. http://api.jquery.com/height/

Answer 2

$(document).ready( function() {
$('.ads_contents').each(function() {
    var t = $(this);
    var needed_height = t.children('.ads_text').height();
    var actual_height = t.height();
    if (actual_height < needed_height) {
        t.after('<div class="expander" onclick="expand_collapse(' + getAdId(t.attr('id')) + ', this);">Mehr</div>');
    }
});  

});