CODEWITHSUNDEEP
jquery
Xareyo
Xareyo

Reputation: 1377

jQuery dynamic height on list items

Scenario

I have a container (there will be more), with list items inside, each containing an image. The height of the container is dynamic relative to the height of the list items, which themselves change within a media query. The container has a min-height, so when the images are larger the idea is to adjust the size of the container, to slide down.

I'm currently getting the height of the images list item when the page loads, but this isn't great as they are quite a few images so it can take a while for it to adjust.

Unfortunately it's quite a large project and I wouldn't be able to replicate the scenario in jsfiddle exactly, I think this is close enough.

Solution

I need some way of getting the height of the first images' list item that loads and then making the container the same height.

Code

HTML

<ul class="container">
    <li class="img">
        <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />
    </li>
    <li class="img">
        <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />
    </li>
    <li class="img">
        <img src="http://www.lorempixel.com/50/100" width="100%" height="100%" />
    </li>
...so on
</ul>

CSS

li {
    list-style: none;
}
.img {
    float: left;
    height: 100px;
    overflow: hidden;
    width: 50px;
}
.container {
    border:5px solid green;
    width:100%;
    overflow: hidden;
    min-height:100px;
}
@media only screen and (max-width: 500px) {
    .img {
        width: 25%; height: auto;
    }

}

Js

$(window).load(function() {

    $('.container').each(function() {
        $(this).animate({
            height: $('.img').height(),
            slideDown: 'fast'
        });
    }); 

});

Demo

http://jsfiddle.net/ZwQu7/1/

Thankyou for your time.

Upvotes: 1

Views: 428

Answers (3)

Xareyo
Xareyo

Reputation: 1377

This is the solution I managed to get working (if anyone is interested), thanks to putvande:

$('.container').each(function() {
    $(this).find('img').load(function(){
        $(this).closest('.container').animate({
            height: $('.img').height(),
            slideDown: 'fast'
        });
    });
});

Once again, thankyou all for your input. Y.

Upvotes: 0

Virus721
Virus721

Reputation: 8315

Images must be loaded before you can access their real dimensions, but you can use getimagesize() to compute the total initial size on server side (assuming you're using php).

Or if you know the size of all the images (i see you wrote 100px), you can multiply their initial number to get the total height.

Or add pixels to the container's height as images load :

$('.container img').on('load', function() {
    var $c = $(this).parents('.container');
    $c.css('height', (($c.height() || 0) + this.height) + 'px');
});

Upvotes: 1

putvande
putvande

Reputation: 15213

Or you could do it like this :

$('.container').each(function() {
    $(this).find('img').load(function(){
        $(this).closest('.container').animate({
            height: $(this).height(),
            slideDown: 'fast'
        });
    })
});

This way you wait for the images to load (so you will know the height of the images) and animate it after that.

(The li won't have a height, the img will.)

If you only want to animate the container once you could check it like:

$('.container').each(function() {
    $(this).find('img').load(function(){
        $(this).closest('.container:not(.animated)').animate({
            height: $(this).height(),
            slideDown: 'fast'
        }).addClass('animated');
    })
});

But that will animate as soon as the first image is loaded and won't animate after that.

Upvotes: 0

Related Questions