Just a quick tutorial for getting around the min-height glitch
Original: http://docs.jquery.com/Tutorials:Getting_Around_The_Minimum_Height_Glitch
Author: Yansky
Sometimes when you set a min-height for a div in your stylesheet, it can cause a slide effect to display the div all at once rather than in a smooth motion. You can use this as a work around to fix the glitch.
$(document).ready(function() {
var divHite = $('#hidden-div').height();
$('#hidden-div').hide();
$('#div-slide').click(function(){
if(divHite < 375){
$('#hidden-div').height(0);
$('#hidden-div').animate({height: 375}, "slow");
}
return false;
});
});
First it assigns the height of the div "#hidden-div" to the variable divHite. Then it hides the "#hidden-div" div.
Once you click on the element with the "#div-slide" id, the function checks to see if the divHite variable was less than the minimum height that you require. If true, it sets the height to 0 and then animates it to expand to your minimum height.
Replace #hidden-div with the id or class your div is using and alter the height number accordingly.
Categories: Selectors | CSS | Tutorials