How to let the div grows based on Jquery sortable grid's height?

Question

Hi, I am new to Jquery, and trying to follow an example on JqueryUI Display Grid, and putting it on a div.

So the code basically looks like this:

JS code:

$('#demoList').sortable();
$('#demoList').disableSelection();
var contentHeight  = $('#demoContent').height() + 200; 
$('#demoContent').animate({height: contentHeight});

HTML code:

<div id="demoContent">
        <ul id="demoList">
            <!-- <li> items generated based on the items from MySql -->
            <li class="ui-state-default"><img src="1.jpg" width="100px" height="100px"></li>
            <li class="ui-state-default"><img src="2.jpg" width="100px" height="100px"></li>
            <li class="ui-state-default"><img src="3.jpg" width="100px" height="100px"></li>
            <li class="ui-state-default"><img src="4.jpg" width="100px" height="100px"></li>
            <li class="ui-state-default"><img src="5.jpg" width="100px" height="100px"></li>
            <!-- There could be more than 5 images... -->
        </ul>
</div>

Currently I could only add a fixed 200px to my contentHeight, but I need it to be more specify based on the rows of items that I could have generated from the database. My question is, how is it possible to let demoContent "grow" its height based on the number of rows of images there could be (say if each row could contain up to 5 images)?

Thank you very much.

Answer 1

You should call the slideDown animation, like this:

$('#demoContent').slideDown();

If you want to get the height of the grid, call $('#demoList').height().

Answer 2

if ive understand you correctly this has nothing to do with javascript :) you just need a clearer and remove this height() stuff.

    <div id="demoContent">
           <ul id="demoList">
                    <!-- items -->
           </ul>
           <div style="clear: both;"> </div>
    </div>