How to prevent jQuery slidetoggle stop “jumping”? – Part II

A few mounts ago I wrote an article on the Base22.com public knowledge wiki about How to prevent JQuery slidetoggle stop “jumping”?. At that moment I was sure that it will be more easy to find a solution if I cross with the same problem, well, I was totally wrong. I’m creating this new post because non of the previous solutions that I found and share works this time. In this particular case the “bug” only persist on IE8, all works perfect on IE7 and FF, weird doesn’t it?

My “new” scenario is very similar to the previous:

In a resent project I use jQuery slidetoggle function to hide/show an error/success message inside of a <div>, the slidetoggle animation works almost fine just that at the end of it, suddenly the animation “jumps” and recalculate it correct height.

Note: Here is the CSS, HTML and JavaScript code of my particular scenario, perhaps if you use the same code you will not be able to reproduce the same error, since as you can see, should work without any problem, that made me take longer than expected to find a way to solve this problem once more time:

CSS style of the parent div

.parentDiv {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #A3B0EA;
    border-radius: 10px 10px 10px 10px;
    display: block;
    margin-top: 25px;
    padding: 5px;
}

Original CSS style of the error/success message div:

#message{
    background-color: #C2E8B2;
    text-align: center;
    height: 15px;
    margin:5px;
}

HTML + CSS

<div class="parentDiv">
	<div style="clear: both; padding: 5px 0;">
		...more HTML code
	</div>
	<form style="display:inline-block;width:100%">
		... more HTML code
	</form>
	<div id="message" style="display: none;">
		The new post has been sent.
	</div>
</div>

JavaScript code:

$("#message").slidetoggle("slow",function(){
    setTimeout(function() {
        $("#message").fadeOut('fast');
    }, 2000);
});

New solution:
Using the above code I couldn’t understand why my div (message) recalculated again the height values when the slidetoggle call ended, but this time, only persist on IE8, after trying some possible solutions (see the links below) nothing seems to works, so I asked myself, What can I do to “force” an element to have a maximum height?, you have the answer?……. yeap, using the CSS max-height property!!!…

So, if you stop with a similar situation, try to define a max-height to the element, in this case, was the only solution that I found to solve the problem on IE8.

Final version of the CSS style:

#message{
    background-color: #C2E8B2;
    text-align: center;
    height: 15px;
    max-height:15px; /* solution */
    margin:5px;
}

List of other alternatives that you can look to solve the same problem:

I really hope you find this information useful.

Joaquin Arellano

carpe diem…

How to prevent jQuery slidetoggle stop “jumping”? – Part II