Autore Topic: [Risolto] Array id in css.  (Letto 462 volte)

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 31264
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
[Risolto] Array id in css.
« il: 02 Gen 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:
Codice: [Seleziona]
<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
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.
« Ultima modifica: 22 Gen 2020, 18:53:34 da tomtomeight »

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 31264
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Array id in css.
« Risposta #1 il: 10 Gen 2020, 12:57:05 »
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.
Codice: [Seleziona]
<div id="<?php echo $item->id?>">Il problema adesso Ŕ che non riesco ad inserire questo id nel codice javascript, ho creato una variabile jaavascript
Codice: [Seleziona]
var id = <?php echo '#'.  $item->id?>;ma non mi viene restituita come stringa.Questo il codice:
Codice: [Seleziona]
<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:
Codice: [Seleziona]
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



Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 31264
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:[Risolto] Array id in css.
« Risposta #2 il: 22 Gen 2020, 19:03:08 »
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:
Codice: [Seleziona]
<div id="<?php echo 'a' $item->id?>">che viene selezionato nello script:

Codice: [Seleziona]
<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:
Codice: [Seleziona]
[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.
« Ultima modifica: 22 Gen 2020, 19:05:36 da tomtomeight »

 

Host

Torna su