In jQuery, how can I make slide animations in a fixed height parent?

Question

I'm having a problem using the jQuery slide animations on elements that are inside a container with a fixed height. I have a page in my application on which there is a large, scrollable div, inside which are contained many smaller divs, each of which represents a 'message' in a user's inbox. Within each message div is a 'delete' button, which when clicked, hides the message from the larger frame by using jQuery's slideUp() function.

This was working fine until I added a max-height property to the container div. Now, when the delete button is clicked, there is no animation and instead the div immediately snaps out of sight. If I remove the max-height property from the frame, the animation works fine, but as the frame could contain any number of messages, I really need it to have a max height and to be scrollable when it exceeds that height.

I've tried replacing the built in slideUp() function with my own animate function, and replacing max-height with a fixed height, but neither of those work.

These are some relevant CSS and JS samples:

//css  
div.messageList  
    {  
        border: solid 1px #B22222;  
        cursor: default;  
        color: #000000;  
        max-height: 800px;  
        overflow: auto;  
        width: 100%;  
    }  

.unreadMessage  
    {  
        margin: 2px;  
        border: solid 1px #B22222;  
        text-align: left;  
        background-color: #98FB98;  
    }  

//js  
function hideMessage(id) {  
        $('#' + id).slideUp(500);  
    }

Answer 1

I'm assuming when you write frame you don't mean an actual frame and are referring to your containing DIV (.messageList)

        <style type="text/css">
            div.messageList  
            {  
                border: solid 1px #B22222;
                cursor: default;  
                color: #000;  
                max-height: 200px;
                overflow: auto;  
            }

            div.messageListContainer  
            {

            }

            .unreadMessage  
            {
                padding: 5px;
                margin: 2px;
                cursor: pointer;
                border: solid 1px #B22222;  
                text-align: left;  
                background-color: #98FB98;  
            }  
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                $(".unreadMessage").click(function(){ $(this).slideUp(500); });
            });
        </script>
        <div class="messageList">
            <div class="messageListContainer">
                <div class="unreadMessage">Lorem ipsum dolor sit amet, consectetur dipiscing elit. Nullam tempus.</div>
                <div class="unreadMessage">Lorem ipsum dolor sit amet, consectetur dipiscing elit. Nullam tempus.</div>
                <div class="unreadMessage">Lorem ipsum dolor sit amet, consectetur dipiscing elit. Nullam tempus.</div>
                <!-- Add more messages to test -->

            </div>
        </div>

This worked for me in IE7 and FF3, but I can't say that max-height is cross-browser compatible, but I think what I have for you is what you were going for.

Answer 2

Thanks for the suggestion Hunter. I tried this and I'm afraid it didn't work for me. I have the event binding, css and div layout more or less exactly as you suggested and the animation is still jumpy. Some more details, though I'm not sure how relevent:

• The content on the page is loaded asynchronously with JQuery's load() function.
• This is an ASP.NET MVC application
• I'm using IE7.

For now I've replaced the slide with a flash-and-fade animation, which isn't the end of the world, but I'm intrigued as to how I could get this fixed.

P.S I'm not sure if I should've posted this as an answer to my own question, I'm very new to this site and it's telling me I don't have enough reputation to leave a comment.

Thanks.

Answer 3

My guess is that the dom is getting overloaded and you are just seeing a 1 frame animation. Try .slideUp(20000) to determine if there is a real issue.

Answer 4

I currently have the same problem and working on how to fix it. I'll post the answer here if I figure it out.

Answer 5

This is not a solution but rather a workaround, have you considered allowing the entire page to scroll (rather than just that div)?

Answer 6

like john c I also assume your handlers are not bound to the .load()-ed dom. Try using livequery to work around this. I have an example here: http://www.madnet.ch/2009/02/28/gallery-included/

Answer 7

I tried the first answer and it works for me too at least on firefox: you can see it here.

Suggestions: Check your doctype. Try this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

try binding your events via the "live('click',callback)" function instead of "bind('click',callback)". Since your content is loaded via ajax, this makes sure the events get attached to elements not present in the DOM at page load time.