CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Steve
Steve

Reputation: 8293

Dynamic height of div

I have a container that has products in. But my container is only 200 displaying only a few products. There is a button which increases the height to display all products. Only problem is the height will be changing depending on how many products get added through the CMS. Is it possible to increase the height of the container so it displays all products all of the time (Without hard coding the height)

Fiddle: http://jsfiddle.net/Vx53r/1/

UP DOWN

HTML: 

    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>
    <div class="box">Product</div>

</div>

CSS:

.container{
    background:grey;
    width:500px;
    height:200px;
    overflow:hidden;
}
.box{
    width:120px;
    height:220px;
    background:pink;
    margin:10px;
    float:left;

}

JS:

$('#btn-down').click(function(){
                $('.container').animate({height:'630px'}, 500);
            });

            $('#btn-up').click(function(){
                $('.container').animate({height: '200px'}, 500);
            });

Upvotes: 0

Views: 105

Answers (6)

sree
sree

Reputation: 543

You can just use 

        $('#btn-down').click(function(){
            $('.container').animate({height:'auto'}, 500);
        });

and remove the 

height:200px;

instead so that on the button click it will assume the height to include all items. But this will give you an initial height of full length.

Or else you can use 

    $('#btn-down').click(function(){
        $('.container').animate({height:'100%'}, 500);
    });

to start from 200 px

Upvotes: 0

hahaha
hahaha

Reputation: 1037

Try with percentage. Working fiddle here

        $('#btn-down').click(function(){
            $('.container').animate({height:'100%'}, 500);
        });

Instead of a fixed pixels you get the whole height, even after adding elements

Upvotes: 0

Alien
Alien

Reputation: 3678

using the max-height and toggleClass

css:

.container{
    background:grey;
    width:500px;
    max-height:200px;
    overflow:hidden;
}
.box{
    width:120px;
    height:220px;
    background:pink;
    margin:10px;
    float:left;

}
.boxAutoHeight
{

 max-height:none;
}

javascript:

$('#btn-down').click(function(){
$('.container').addClass('boxAutoHeight');
});

$('#btn-up').click(function(){
$('.container').removeClass('boxAutoHeight');
});

demo---->http://jsfiddle.net/junkie/Vx53r/3/

Upvotes: 2

Sumit Gupta
Sumit Gupta

Reputation: 2192

Well you can try this

  1. In your down function, if you are fixed to show 3 box in a row, then take the height of one box + margin.
  2. Now count the boxes and divide by 3, and just set that your height.

Next trick is:

  1. Set the max height of your container as 200px, and set overflow hidden.
  2. On Down, just remove the max-height to 100% and it will auto adjust it.

Upvotes: 0

pavel
pavel

Reputation: 27092

You can count the total wrapper height and use that.

    $('#btn-down').click(function(){
        $('.container').animate({height: Math.ceil($('.box').length / 3) * 240}, 500);
    });

    $('#btn-up').click(function(){
        $('.container').animate({height: '200px'}, 500);
    });

http://jsfiddle.net/Vx53r/5/

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337700

To make this dynamic, you need to wrap the .box elements in another container, like this:

<div class="container">
    <div class="box-container">
        <div class="box">Product</div>
        <!-- more .box -->
    </div>
</div>

.box-container {
    overflow: hidden;
}

Then in jQuery you can set the height of .container (which has been truncated) to equal the height of .box-container, which was not truncated:

$('#btn-down').click(function () {
    $('.container').animate({
        height: $('.box-container').height()
    }, 500);
});

Updated fiddle

You could create a calculation to work out the number of rows based on 3 items per row, but this way is far easier, and quicker.

Upvotes: 0

Related Questions