Movimento DIV con Javascript

[vytheowl]

Ho trovato online uno script per far muovere un elemento nella pagina - richiamato per id - attraverso la variazione Javascript delle sue proprietà CSS.

Nell'esempio che ho trovato, lo spostamento era laterale - e la proprietà richiamata della posizione da modificare era "left" e non "top" - ma a parte questo ho riportato pedissequamente lo script funzionante.

Solo che non succede nulla. Ecco il codice:

		<script language="javascript">
		var div = null;
		var msec = 220;
		var id = 0;
		
		function init() {
div = document.getElementById(’riquadro3’); //DIV da animare
div.style.top = ‘130px’; //Punto di partenza dell’animazione
animate(); //Chiamata alla funzione che anima il div
}

function animate() {
div.style.top = parseInt(div.style.top)+1+’px’;//Sposta il div verso l'alto di un pixel alla volta
id = setTimeout(animate,msec);//Ripete lo spostamento per tot millisecondi
}

window.onload = init; //fa iniziare l'animazione al caricamento della pagina
		
		</script>

l'elemento da spostare è quel "riquadro3" le cui proprietà CSS sono le seguenti:

#riquadro3
{
float: left;
position: relative;
width: 150px;
height: 300px;
margin: 0px;
margin-right:15px;
margin-bottom: -60px;
top: -90px;
z-index: 2;
}

Secondo ciò che mi sarei aspettato, il DIV si sarebbe dovuto posizionare (come da codice Javascript) a 130 pixel dal bordo superiore del contenitore, per poi salire fino a sforarlo ed arrivare ai -90px della sua posizione CSS assegnata.

Invece non succede un bel niente.
Il div si posiziona esattamente dove c'è scritto nel CSS, ed il Javascript è come se non esistesse.

Probabilmente c'è un errore macroscopico, ma non lo vedo.
Qualcuno mi dà una mano?

[homezappa]

Ma che editor usi?
Se, ad esempio, avessi usato, per provare lo script, il caro vecchio buon Firefox con il plugin FireBug, ti saresti accorto subito che il tuo sorgente ha errori di sintassi.
Dove?
In alcuni caratteri che sono illegali: gli apici che hai messo!
Questo funziona o, perlomeno, il div si muove!
(sta poi a te farlo muovere dove vuoi!)
in rosso i caratteri sostituiti.

    <script type="text/javascript">
		var div = null;
		var msec = 220;
		var id = 0;
		
		function init() {
            div = document.getElementById("riquadro3"); //DIV da animare
            div.style.top = "130px"; //Punto di partenza dell’animazione
            animate(); //Chiamata alla funzione che anima il div
        }

        function animate() {
            div.style.top = parseInt(div.style.top)+1+"px";//Sposta il div verso l'alto di un pixel alla volta
            id = setTimeout(animate,msec);//Ripete lo spostamento per tot millisecondi
        }

        window.onload = init; //fa iniziare l'animazione al caricamento della pagina
		
    </script>

HTH
Zappa

[vytheowl]

Bene; appurato che

1) la sintassi JS non è il mio forte...
2) chi ha scritto i commenti (non io, era uno script commentato trovato online) non ha capito un tubo del suo stesso script ovvero:

la SetTimeout non determina QUANTE VOLTE la funzione viene ripetuta, ma OGNI QUANTI millisecondi...

come faccio ad impostare una "fermata" dopo un numero X di pixel di spostamento?