Dynamically changing height of div element based on content

By : Tom
Source: Stackoverflow.com
Question!

I'm working on a Facebook-like toolbar for my website.

There's a part of the toolbar where a user can click to see which favorite members of theirs are online.

I'm trying to figure out how to get the div element that pops up to grow based on the content that the AJAX call puts in there.

For example, when the user clicks "Favorites Online (4)", I show the pop up div element with a fixed height and "Loading...". Once the content loads, I'd like to size the height of the div element based on what content was returned.

I can do it by calculating the height of each element * the number of elements but that's not very elegant at all.

Is there a way to do this with JavaScript or CSS? (note: using JQuery as well).

Thanks.

JavaScript:

    function favoritesOnlineClick()
{
	$('#favoritesOnlinePopUp').toggle();
	$('#onlineStatusPopUp').hide(); 
	if ($('#favoritesOnlinePopUp').css('display') == 'block') { loadFavoritesOnlineListing(); }	
}

CSS and HTML:

    #toolbar
{
    background:url('/_assets/img/toolbar.gif') repeat-x;
    height:25px;
    position:fixed;
    bottom:0px;
    width:100%;
    left:0px;
    z-index:100;
    font-size:0.8em;
}
#toolbar #popUpTitleBar
{
    background:#606060;
    height:18px;
    border-bottom:1px solid #000000;
}
#toolbar #popUpTitle
{
    float:left;
    padding-left:4px;
}
#toolbar #popUpAction
{
    float:right;
    padding-right:4px;
}
#toolbar #popUpAction a
{
    color:#f0f0f0;
    font-weight:bold;
    text-decoration:none;
}
#toolbar #popUpLoading
{
    padding-top:6px;
}
#toolbar #favoritesOnline
{
    float:left;
    height:21px;
    width:160px;
    padding-top:4px;
    border-right:1px solid #606060;
    text-align:center;
}
#toolbar #favoritesOnline .favoritesOnlineIcon
{
    padding-right:5px;
}
#toolbar #favoritesOnlinePopUp
{
    display:block;
    border:1px solid #000000;
    width:191px;
    background:#2b2b2b;
    float:left;
    position:absolute;
    left:-1px;
    top:-501px; /*auto;*/
    height:500px;/*auto;*/
    overflow:auto;
}
#toolbar #favoritesOnlineListing
{
    font-size:12px;
}
<div id="toolbar">
    <div id="favoritesOnline" style=" <?php if ($onlinestatus == -1) { echo "display:none;"; } ?> ">
       <img class="favoritesOnlineIcon" src="/_assets/img/icons/favorite-small.gif" /><a href="javascript:favoritesOnlineClick();">Favorites Online (<span id="favoritesOnlineCount"><?php echo $favonlinecount; ?></span>)</a>
        <div id="favoritesOnlinePopUp">
            <div id="popUpTitleBar">
                <div id="popUpTitle">Favorites Online</div>
                <div id="popUpAction"><a href="javascript:closeFavoritesOnline();">x</a></div>
            </div>     
            <div id="favoritesOnlineListing">
             <!-- Favorites online content goes here -->
            </div>
        </div>
    </div>
</div>
By : Tom


Answers

You should take out the CSS height:25px property in the toolbar, the contents will expand the container. Also, ID selector tags are unique and you can specify directly to them without having to reference the ancestor:

INCORRECT:

 #toolbar #popUpAction  { /*some css */ }

 #toolbar #popUpAction a  { /*some css */ }

CORRECT:

 #popUpAction  { /*some css */ }

 #popUpAction a  { /*some css */ }
By : PMG


Maybe you could remove the height property (make sure it's not set in the CSS) and let the DIV expand in height by itself.

By : mbillard


Make it a float element and don't use a clearing element after it.

By : heeen


This video can help you solving your question :)
By: admin