aprire div lentamente

[agenti]

ciao a tutti.

Tempo fa mi avete passato questo script che non ho potuto testare sino ad oggi.
Mi da purtropo un errore che non capisco...


Errore: d has no properties
File sorgente: /liv.htm
Riga: 35


<script>
// Suppongo che il div abbia altezza 0px
var inc = 5; // incremento graduale in pixel
var d = document.getElementById('divlenta');
function showslowly() {
h = d.style.height;
h += inc;
d.style.height = h + "px";
setTimeout("showslowly()", 100); // 100 millisecondi
}
</script>

<div id="divlenta" style="width:200px;height:0px;background-color:#000">
fff
</div>



test</p>

[fcaldera]

ci sono diversi errori:

var d = document.getElementById('divlenta');

deve essere definita dentro la funzione

Per leggere l'altezza del div usa

h = d.offsetHeight;


prova così:

function showslowly() {
   var inc = 5; // incremento graduale in pixel
   var d = document.getElementById('divlenta');

   h = d.offsetHeight;
   h += inc;
   d.style.height = h + "px";

   setTimeout("showslowly()", 100); 
}

Attento però che non stai definendo una condizione per la terminazione dello script... questo apre il div a dismisura

ciao

[agenti]

Ciao,
si nfatti lo avevo pensato.. ma come posso dare un valore di fine?

[fcaldera]

molto semplicemente con un controllo sull'altezza del div ad ogni chiamata della funzione

var cll;

function showslowly() {

   h = d.offsetHeight;
   if (h > 300) { // se l'altezza supera i 300 pixels termina
      clearTimeout(cll);
      return;
   }

   var inc = 5; // incremento graduale in pixel
   var d = document.getElementById('divlenta');

   h += inc;
   d.style.height = h + "px";


   cll = setTimeout("showslowly()", 100); 
}

ciao

[agenti]

Si ripropone lo stesso errore:

Errore: d has no properties
File sorgente: /liv.htm
Riga: 35

ma stavolta la riga 35 è :

h = d.offsetHeight;


<script>
var cll;

function showslowly() {

h = d.offsetHeight;
if (h > 200) { // se l'altezza supera i 300 pixels termina
clearTimeout(cll);
return;
}

var inc = 5; // incremento graduale in pixel
var d = document.getElementById('divlenta');
h += inc;
d.style.height = h + "px";


cll = setTimeout("showslowly()", 100);
}
</script>
<div id="divlenta" style="width:200px;height:0px;>
fff
</div>



test</p>

[fcaldera]

hai ragione, ho dimenticato di spostare anche un'altra riga:

var cll;

function showslowly() {

   var d = document.getElementById('divlenta');
   h = d.offsetHeight;

   if (h > 300) { // se l'altezza supera i 300 pixels termina
      clearTimeout(cll);
      return;
   }

   var inc = 5; // incremento graduale in pixel

   h += inc;
   d.style.height = h + "px";


   cll = setTimeout("showslowly()", 100); 
}

[agenti]

carina....

grazie mille...

[agenti]

ma per fare la funzione opposta ( riportarla a 0 )
dovrei creare un altra funzione con l'incremento negativo?

h -= inc;
d.style.height = h + "px";