Joomla.it Forum
Non solo Joomla... => Sviluppo => : tomtomeight 02 Jan 2020, 11:13:36
-
Buongiorno e auguri a tutti per il nuovo decennio.
Per un mio progetto di un tabellone orario per corsi di lingua ho necessità di far partire dei countdown che scandiscono lo svolgersi delle lezioni.Ho impostato i codici javascript per far partire i countdown ma mi viene visualizzato solo il primo. Ciò è dovuto al fatto che leggo i record filtrati, in base all'orario di svolgimento, da una tabella con un ciclo "foreach".Questo il codice provvisorio e in fase di sviluppo del countdown nel ciclo:
<div id="container">
<!-- inizio panello contatore -->
<div id="countdown_dashboard">
<div class="dash hours_dash">
<span class="dash_title">hours</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">minute</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">secondi</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
<!-- fine panello contatore -->
<script language="javascript" type="text/javascript">
jQuery(document).ready(function() {
var d = <?php echo $item->durata ?>;
$('#countdown_dashboard').countDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': d,
'sec': 0
},
// onComplete function
onComplete: function RefreshWindow(){ window.location.reload(true);}
});
});
</script>Come si vede l'id è unico nel ciclo '#countdown_dashboard' e quindi mi mostra solo un countdown.
https://sisinternational.net/scuola-di-lingue/calendario-corsi-di-lingua.html (https://sisinternational.net/scuola-di-lingue/calendario-corsi-di-lingua.html)
Dovrei allora implementare un array degli id in modo che ad ogni ciclo legge quello della riga in esame, non sò ancora come muovermi e chiedo aiuto.
-
Ho fatto qualche passo in avanti, come id al posto di "countdown_dashboard" ho utilizzato una variabile associata all'id dei record e ottengo esattamente un id diverso per ogni riga dei record.
<div id="<?php echo $item->id; ?>">Il problema adesso è che non riesco ad inserire questo id nel codice javascript, ho creato una variabile jaavascript
var id = <?php echo '#'. $item->id; ?>;ma non mi viene restituita come stringa.Questo il codice:<script language="javascript" type="text/javascript">
var s = <?php echo $item->durata; ?>;
var id = <?php echo '#'. $item->id; ?>;
jQuery(document).ready(function() {
$('id').countDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': s,
'sec': 0
},
// onComplete function
onComplete: function RefreshWindow(){ window.location.reload(true);}
});
});
</script>e questo il risultato:var s = 60;
var id = #1;
jQuery(document).ready(function() {
$('id').countDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': s,
'sec': 0
},
// onComplete function
onComplete: function RefreshWindow(){ window.location.reload(true);}
});
});Intanto aggiusto i css per l'id multiplo.
Grazie
-
Finalmente sono riuscito a risolvere questo passo della mia applicazione, dunque nel selettore id javascript andava messo il codice php come lo avevo messo sopra + l'aggiunta del #, in appresso il codice completo che fa partire tutti i countdown insieme:
L'id di ogni riga del container diventa:
<div id="<?php echo 'a' . $item->id; ?>">che viene selezionato nello script:
<script language="javascript" type="text/javascript">
var s = <?php echo $item->durata; ?>;
jQuery(document).ready(function() {
$("<?php echo '#a' . $item->id; ?>").countDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': s,
'sec': 0
},
});
});
</script>nel css l'id diventa:
[id^='a'] {
height: 0;
margin-top: -100px;
}
Adesso devo aggiungere il codice per far partire gli eventi all'ora giusta, ma sarà argomento di altri post.Grazie.