Usare lo stesso script nella stessa pagina più volte

[pippoman]

Usare lo stesso script nella stessa pagina più volte

ho un codice che mi genera un contatore "coundown" per il mio sito. IL problema è che se uso più volte questo codice funziona solo il primo, tutti gli altri non funzionano.

Se ne parla qui:

http://www.giorgiotave.it/forum/joomla/217827-eventi-con-countdown.html

[fda]

Ciao pippoman.
Mettiamo qui lo script riusabile e nel topic linkato spieghiamo come usarlo nella visualizzazione "categoria blog" di Joomla.
Quello che scriviamo qui vale in generale, Joomla non c'entra.

Lo script per il countdown lo modifichiamo un po' in modo che sia riusabile infinite volte con parametri diversi:

<script type="text/javascript">
	function countdown(idp, var_anno, var_mese, var_giorno, var_ore, var_minuti, var_secondi)
	{
	data_scandeza= new Date(var_anno,var_mese-1,var_giorno,var_ore,var_minuti,var_secondi);
	data_oggi= new Date();
	differenza=(data_scandeza-data_oggi);
	giorni=parseInt(differenza/86400000);
	differenza=differenza-(giorni*86400000);
	ore=parseInt(differenza/3600000);
	differenza=differenza-(ore*3600000);
	minuti=parseInt(differenza/60000);
	differenza=differenza-(minuti*60000);
	secondi=parseInt(differenza/1000);
	differenza=differenza-(secondi*1000);
	var_id="countdown_" + idp;
	if (giorni <= "0" && ore <= "0" && minuti <= "0" && secondi <= "0")
	{
	document.getElementById(var_id).innerHTML="Tempo scaduto!";
	}
	else
	{
	document.getElementById(var_id).innerHTML=giorni +' giorni '+ore+' ore '+minuti+' min '+secondi+' sec ';
	setTimeout("countdown(idp)",1000)
	}
	}
</script>

Nota che adesso abbiamo separato la function dall'altra parte con l'onload e l'id, questo proprio perché lo script lo includeremo un'unica volta indipendentemente dal numero di volte che verrà utilizzato.

Per usare lo script, cioè per inserire il countdown, dobbiamo scrivere:

<div style="font-family: Verdana; font-size: 12pt; color: #006600; border: 1pt solid; padding: 2px; background-color: #DDFFDD;">
	<style onload="countdown(234, 2014, 4, 1, 0, 0, 0)"></style>
	<div id="countdown_234"></div>
</div>

dove:

• lo *style *all'interno del primo div è opzionale e riguarda soltanto lo stile applicato (ti suggerisco di creare una classe nel css e richiamarla);
• idp=234 è un codice univoco che identifica il countdown, non ce ne possono essere due identici nella stessa pagina. Quando crei un idp devi nominare l'id (guarda nel secondo div) come "countdown_idp" ... se quindi idp=234 allora scriverai id="countdown_234", mentre se idp=7681 scriverai id="countdown_7681";
• nella function countdown, oltre a idp vi sono altri 6 parametri che equivalgono a: anno, mese, giorno, ora, minuto, secondo: si tratta dei parametri che prima venivano caricati come "costanti" nello script, mentre adesso lo script è indipendente e i parametri li passi tu ogni volta che chiami la funzione.

Come puoi ben capire, il vantaggio adesso è che lo script lo includi una sola volta nella pagina (nell'altro topic ti spiego come fare per Joomla) e lo richiami quante volte vuoi con parametri diversi. Pensa ad esempio ad una pagina con delle offerte che hanno scadenze diverse: basta richiamare nella singola scheda prodotto lo script passando un *idp *univoco (ad esempio il codice della scheda articolo) e la data di scadenza dell'offerta (attraverso gli altri 6 parametri).

Francesco

[pippoman]

GrazieFrancesco sei stato gentilissimo.

[robertoleone]

Salve,
come qualcuno di voi ha già scritto ho un problema ho bisogno sulla stessa pagina di inserire più volte lo stesso script come posso fare?

questo è il codice:
<div style="border:4px solid #1d51b4;position: absolute;width:200px; height: 350px; left:0px; top:600px;background:transparent;">
<img src="percorsoimmagine1.png" id="img">
<script language="Javascript" type="text/javascript">
var secondi=10;
var num=1;
function CambiaImmagine() {
var immagini=new Array();
immagini[0]="percorsoimmagine1.png";
immagini[1]="percorsoimmagine2.png";

document.getElementById("img").src=immagini[num];
num=(num+1>=immagini.length)?0:num+1;

} setInterval ("CambiaImmagine()", secondi * 1000);
CambiaImmagine();</script>

se lo inserisco una volta sola funziona se lo inserisco più volte si blocca... sono un neofita quindi abbiate pazienza.