Ho avuto un problema con jQuery e il suo metodo animate() per cambiare l'altezza di un div da 70px a 100%. Vi spiego brevemente il problema che avevo e il trick usato per risolverlo, nella speranza che sia utile a qualcuno ^^
Praticamente avevo il seguente codice:
/*** CSS **/
.ex {
width: 90%;
margin-left: 20px;
height: 70px;
overflow-y: hidden;
padding-bottom: 9px;
}
/*** FINE CSS **/
/*** SCRIPT **/
function expand(id) {
$("#expand"+id).animate({"height": "100%"},1500);
$("#readmore"+id).html('<a h ref="#expand'+id+'">Close</ a>');
$("#readmore"+id+" a").click(function() { closeSlider(id) });
}
function closeSlider(id) {
$('#expand'+id).animate({"height": "70px"}, 1500);
$("#readmore"+id).html('<a h ref="#expand'+id+'">Read More</ a>');
$("#readmore"+id+" a").click(function() { expand(id) });
}
/*** FINE SCRIPT **/
<div class='ex' style='' id='expand<?php echo $data['id']; ?>'><?php echo $data['messaggio']; ?></di v>
<div class='readmore' id='readmore<?php echo $data['id']; ?>' >
<a href="#expand<?php echo $data['id']; ?>" onclick='expand(<?php echo $data['id']; ?>)'>Read More</a>
</div>
Come si nota il div con id expand+"un numero di id" (expand1, expand2,ecc) inizialmente era impostato tramite div con height=70px e overflow-y in modo da nascondere il testo. Cliccando su "Read More" si doveva allargare a 100% con la funzione animate di jQuery, ma non funzionava correttamente. L'allargamento avveniva istantaneamente, senza animazione quindi. Ho fatto diverse prove e praticamente ogni volta che si voleva allargare un componente da una misura fissa in pixel ad una in percentuale si veniva a creare questo problema. Così per ovviare a ciò ho modificato il codice come di seguito (il div expand e lo script):
function expand(id) {
altezza = $("#testo"+id).height();
$("#expand"+id).animate({"height": altezza},1500);
$("#readmore"+id).html('<a h ref="#expand'+id+'">Close</ a>');
$("#readmore"+id+" a").click(function() { closeSlider(id) });
}
<d iv cl ass='ex' style='' id='expand<?php echo $data['id']; ?>'>< p id='testo<?php echo $data['id']; ?>'><?php echo $data['messaggio']; ?></ p></ di v>
Il codice JS a questo punto tramite jQuery mi legge l'altezza del <p> che è quella del testo e uso la misura in pixel per allargare il div con overflow.
Spero di essermi spiegato bene anche se un pò di fretta ed aver contribuito... ciauz
