width dinamica ??!!

**fante92** · 12-03-2009, 23:59

Salve a tutti sono nuovo del forum e scrivo per un problemino.. ho la necessità di creare una funzione che applichi a una tabella l'effetto di modificarne la larghezza in un tot di millisecondi definiti. In sostanza è un'animazione. Ho scritto queste due funzioni (credo siano abbastanza human readables) ma.. nulla..!

Se qualcuno mi illuminasse d'immenso glie ne sarei molto grato!!
Ecco il codice:

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>WEAE</title>

</head>



<body>

<script type="text/javascript">

// id è l'ID dell'oggetto da modificare

// width è la grandezza che deve avere

function setWidth(id,width){

    document.getElementById(id).width = width;

        }; 

// id è l'ID dell'oggetto da allungare

// massimo è la massima lunghezza che deve raggiungere

// tempo è la durata complessiva dell'allungamento in millisecondi

function allunga(id,massimo,tempo){

    step = Math.round(massimo/100);

    wait = (tempo/100);

for(frame = 0; frame < 100; frame++ ) {

    setTimeout("setWidth('"+id+"',frame)",wait);

        frame++;

};

};

</script>

<table id="pippo" bgcolor="#000099"><tr height="100"><td> </td></tr></table>

<script>

allunga("pippo","100","10000");

</script>

</body>

</html>

Praticamente dalla width 0, dopo un certo tempo la tabella prende e raggiunge in un solo step width 100 quando invece dovrebbe allargarsi gradualmente :berto:

**Straystudios** · 13-03-2009, 02:56

Quello che realmente succede, è che il loop di for non attende che un wait sia trascorso, ma procede con la sua reiterazione.
Ci troviamo di fronte ad un "dito" che fa subito ripartire un timer: prima che sia trascorso il tempo di Timeout già lo reimposta, ancora e ancora; e ad ogni "colpo", gli passa un valore di frame accresciuto. Quindi frame raggiunge 100 in un istante.
Lo puoi verificare ostacolando il processo con un alert() e "dilateremo" il tempo di for:

codice:

for(frame = 0; frame < 100; frame++ ) {
alert('sospeso');

    setTimeout("setWidth('"+id+"',frame)",wait);
        frame++;
};

Studieremo un' altra via; direi la ricorsione con un setTimeout.

Bel lavoretto d' ingegno comunque, complimenti; l' hai fatto da zero?

**fante92** · 13-03-2009, 15:33

Si l'ho fatto da zero.. credo di aver capito qual è il problema:

Codice PHP:


for(frame = 0; frame < 100; frame++ ) {

alert(frame);

    setTimeout("setWidth('"+id+"',frame)",wait);

        frame++;

};

Sostanzialmente il for comincia, setta il timeout per setWidth ma aumenta frame prima che venga eseguito il timeout. Quindi teoricamente se io al posto di frame++ mettessi un setTimeout con lo stesso delay del primo che aumenta di uno frame dovrei aver risolto

Codice PHP:


for(frame = 0; frame < 100; frame++ ) {

alert(frame);

    setTimeout("setWidth('"+id+"',frame)",wait);

    setTimeout("frame++;",wait);

};

Il codice così modificato dovrebbe andare... E invece no!
La pagina si carica, dopo un secondo la width della tabella prende e si allunga di botto a 200 invece che 100

O il javascript non fa per me.. o il browser mi sta prendendo x i fondelli (come dicono le persone civili

)

**Straystudios** · 13-03-2009, 17:49

Ti stai "incartando" sui timer e sul for; ed è una fase normale nell' età evolutiva del bambino.
Rileggi la mia allegoria come fossero "Sacre Scritture", chiudi gli occhi e immagina un timer materiale attaccato al muro e l' omino for che il bottone di avvio lo pigia ripetutamente senza aspettare la fine di nessun ciclo; questo è quello che succede, perché non c'è nessun alert() che ferma la mano di for.

Questa è un' altra strada:

codice:

<script type="text/javascript">

var frame = 0;

function setWidth(id,width){
    document.getElementById(id).width = width;
 };

function allunga(id,massimo,tempo){
    step = Math.round(massimo/100);
    wait = (tempo/100);
    
    mario = setInterval("frame++; setWidth('"+id+"',frame);", wait);
 };

</script>

<table id="pippo" bgcolor="#000099"><tr height="100"><td>&#38;#160;</td></tr></table>

<script type="text/javascript">
 allunga("pippo","100","10000");
</script>

frame++; si potrebbe quindi trasferire nella function setWidth
Occorrerà poi aggiungere un IF-Statement che arresta il timer "mario" con clearInterval(mario) quando frame raggionge il valore di massimo.

step è li' inutilizzato, l' ho lasciato, magari ti serve per altro; ma qui si può anche togliere

**fante92** · 13-03-2009, 18:53

chiarissimo grazie! Ora non ho più bisogno del pediatra, la mia evoluzione si è compiuta correttamente.. ecco il codice funzionante

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento senza titolo</title>

</head>



<body>

<script type="text/javascript">



var frame = 0;



function setWidth(id,width){

    document.getElementById(id).width = width;

 };



function allunga(id,massimo,tempo){

    wait = (tempo/100);

    

    mario = setInterval("frame++; setWidth('"+id+"',frame); if (frame == 100) { clearInterval(mario);};", wait);

    

 };



</script>



<table id="pippo" bgcolor="#000099"><tr height="100"><td> </td></tr></table>



<script type="text/javascript">

 allunga("pippo","100","1000");

</script>



</body>

</html>

Grazie ancora!!!

Discussione: width dinamica ??!!

Strumenti discussione

Ricerca discussione

Visualizza

width dinamica ??!!

Permessi di invio