Drupal, Ubuntu, jQuery, CSS
Hacer que un slideToggle() tenga un min-height
Si queres hacer que un slideToggle() en jQuery que tenga un alto mínimo, te vas a dar con el siguiente problema:
Primero que slideToggle() lo que hace es partir de un div con display:none hasta el alto máximo que tenga, y no desde un alto mínimo. Segundo que si le pones un min-height la animación pega un salto de cero al min-height y desde ahí comienza la animación. por consiguiente pega un salto que no queda bien y no logramos que quede en un mínimo porque cuando lo cierres va a obviar el min-height y se va a cerrar completamente.
Resumiendo slideToggle() no nos sirve. En su lugar vi en Spoonfed Project un articulo que da el siguiente script para poder crear animación tipo slideToggle() pero con min-height:
<script type="text/javascript" src="/includes/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(function(){
var slideHeight = 75; // px
var defHeight = $('#wrap').height();
if(defHeight >= slideHeight){
$('#wrap').css('height' , slideHeight + 'px');
$('#read-more').append('<a href="#">Click to Read More</a>');
$('#read-more a').click(function(){
var curHeight = $('#wrap').height();
if(curHeight == slideHeight){
$('#wrap').animate({
height: defHeight
}, "normal");
$('#read-more a').html('Close');
$('#gradient').fadeOut();
}else{
$('#wrap').animate({
height: slideHeight
}, "normal");
$('#read-more a').html('Click to Read More');
$('#gradient').fadeIn();
}
return false;
});
}
});
</script>
Esta excelente la solución que usa aquí, pero lo convertí en plugin para los que utilizamos cositas así constantemente.
Para usarlo hacemos lo siguiente:
$('#pestania').slideToggleMinHeight({
desplegable:"desplegable",
min_height:80,
});
Descargar codigo + ejemplo.
| Print article | This entry was posted by Capy on 22/01/2010 at 10:11 am, and is filed under jQuery. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |


