Dynamically determine height of div

Question

I'm using the jQuery isotope plugin for a grid layout of a news section, each news item showing the first paragraph of each with a read more button, once clicked showing the rest of the content.
Here's my example and I'll explain the problem I'm having:
jsFiddle: http://jsfiddle.net/neal_fletcher/gXukc/4/
jQuery:

$(document).ready(function () {
    var $container = $('#main-grid');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.grid-block, .grid-block-long',
            animationEngine: 'best-available',
            masonry: {
                columnWidth: 5
            }
        });
    });
});

$(document).ready(function () {
    $('.grid-block-text p').hide().filter(":first-child").show();
});

$(document).ready(function () {
    $('.read-more').click(function () {
        $(this).hide();
        $(this).nextAll('.grid-block-text')
            .children('p').fadeIn('slow');
        $(this).siblings('.read-less').fadeIn('slow');
        $(this).parent('.grid-block')
            .removeClass('grid-block')
            .addClass('grid-block-long');
        $('#main-grid').isotope('reLayout');
        $container.isotope();
    });

    $('.read-less').click(function () {
        $(this).hide();
        $(this).nextAll('.grid-block-text')
            .children("p:not(:first-child)").fadeOut('fast');
        $(this).siblings('.read-more').fadeIn('slow');
        $(this).parent('.grid-block-long')
            .removeClass('grid-block-long')
            .addClass('grid-block');
        $('#main-grid').isotope('reLayout');
        $container.isotope();
    });
});

As you can see in the example shown, clicking on the read more button loads the rest of the text content and switches the class of the div to allow the text to fit. The reason I've done this is I always want the height of the divs to fit into the grid, i.e. as in the example, the length of the longer div is equal to 2 of the shorter ones, thus always lining up.
But as this is going to be a news section, I can't negate for how much text is going to be there, so I'm trying to figure out if this can be done dynamically.
e.g. grid-block is 300px in height, if the text content is longer than 300px, it will then switch to 630px and so on and so on.
Any suggestions would be greatly appreciated!

score 1 · Accepted Answer · answered Jun 29 '13 at 19:19

1

I make copy of the object, set height to auto, calculate its height, round it to (n*330) - 30 and finally set height of original element to the calculated height.

http://jsfiddle.net/mattydsw/gXukc/9/

var $this = $(this),
    $parent = $this.parent('.grid-block');

var $copy = $parent.clone().appendTo('body').hide().css('height','auto');
var newHeight = $copy.height();
$copy.remove();
newHeight = (Math.floor((newHeight+29)/330)+1)*330-30;
$parent
    .css('height',newHeight)
    .removeClass('grid-block')
    .addClass('grid-block-long');

answered Jun 29 '13 at 19:19

mkutyba

1,417
1
10
26

wow, perfect, exactly what I was after! Thanks for that, very much appreciated. – user1374796 Jun 29 '13 at 19:35
it works even without cloning div, which is more "elegant" for me http://jsfiddle.net/mattydsw/gXukc/10/ – mkutyba Jun 29 '13 at 19:41

score 0 · Answer 2 · answered Jun 29 '13 at 18:56

If I'm understanding you correctly, try setting the .grid-block-long height attribute to auto, that way it will scale to whatever amount of text is contained within. You could add a min-height if you want to make sure it's a particular height, too.

http://jsfiddle.net/gXukc/6/

score 0 · Answer 3 · answered Jun 29 '13 at 19:23

In order to keep all divs aligned you would have to measure the height of the block with all the content displayed and determine the height that fits all of it, something like this:

$('.read-more').click(function () {
    $(this).hide();
    $(this).nextAll('.grid-block-text')
        .children('p').fadeIn('slow');
    $(this).siblings('.read-less').fadeIn('slow');
    $(this).parent('.grid-block').css('height','auto');
    var contentHeight = $(this).parent('.grid-block').height();
    var containerHeight = 300;
    while(true){
        if(contentHeight < containerHeight)
            break;
        containerHeight+=330
    }
    $(this).parent('.grid-block').css('height',containerHeight+'px');
    $('#main-grid').isotope('reLayout');
    $container.isotope();
});

If you need different classes for styling background color, etc. then you can adapt this logic to determine and apply the proper class.

Dynamically determine height of div

3 Answers3