JQuery Height Doesn't work with Floated Elements

Question

I'm trying to animate in a piece of content (a list of items) from the top of the window in an ajax based application I'm working on. The way I do it is by making an ajax call and prepending the resulting HTML to the top of the body. The css of the element has a negative top margin of 100%. I then use element.animate to animate the content down by giving it a top margin of 0.

The issue is the content, which is dynamic in height, needs to slide back up and be hidden when the user clicks a button. I tried using marginTop: '-100%' but I get some really strange behaviour where the entire body's content slides up and disappears, then instantly reappears (without the ajax'd in content that was at the top). I also tried using the element.outerHeight() to get the height of the container and then just apply that as a negative top magin, but the outerHeight function returns only the height of the padding (40px) and ignores the content inside. However, it will return a proper height IF the list items are NOT floated in the unordered list.

Any ideas on how to get this working?

Thanks!

Here is the CSS of the element that is ajax'd in and the Javascript I'm using to animate everything:

CSS (I'm using LESS):

#lists-container{
width: 960px;
padding: 20px;
margin: -100% auto 10px auto;

#lists-list{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 980px;

    li{
        float: left;
        background: #FFF;
        border: 1px solid #CCC;
        padding: 2px 5px;
        width: 310px;
        .border-radius();
        margin: 0 10px 10px 0;
        position: relative;

        p{
            margin: 0;
            padding: 0; 
        }
        .list-name{
            text-decoration: none;
            font-size: 18px;
            color: #333;

            &:hover{
                color: rgba(230,39,39,1);
            }
        }
        span{
            position: relative;
            top: -2px;
            padding: 0 0 0 10px;
        }
        a.delete-list{
            color: #ccc;
            font-weight: bold;
            font-size: 18px;
            text-decoration: none;
            position: absolute;
            right: -20px;
            top: 3px;

            &:hover{
                color: #333;
            }
        }
    }
}   

}

Javascript:

$('#lists-toggle').live('click', function(){

    showLoader();

    if($('#lists-toggle').hasClass('open')){
        $('#lists-container').animate({
            marginTop: '-100%'
        }, 500, function(){
            $('#lists-container').remove();
            hideLoader();
        });
        $('#lists-toggle').removeClass('open');
    } else {
        $.ajax({
            url: $(this).attr('href'),
            async:true,
            type:'GET',
            dataType:'json',
            success:function (data, textStatus) {
                hideLoader();
                console.log(data);

                var template = Handlebars.compile($("#listsTemplate").html());
                var context = {lists: data['result']['lists']};
                Handlebars.registerPartial('singleList', $("#singleListTemplate").html());
                var result = template(context);

                $('.page').prepend(result);
                $('#lists-container').animate({
                    marginTop: 0
                }, 500, function(){
                    // After appending the lists list, make the task list sortable.
                    $('#lists-list').sortable({
                        cursor: 'move',
                        update: function(event, ui) {
                            var newOrder = $(this).sortable('serialize');
                            $.ajax({
                                url: siteUrl+"lists/reorder/"+data['result']['user_id']+"?"+newOrder,
                                async:true,
                                type:'GET',
                                dataType:'json',
                                success:function (data, textStatus) {
                                    console.log(data);
                                }
                            });
                        }
                    });

                    // Ensure to add the open class.
                    $('#lists-toggle').addClass('open');
                });
            }
        });
    }
    return false;
});

Answer 1

The issue was that all the list items are floated. Clearing the parent element fixes the issue and allows me to grab the height with $(element).outerHeight();