PROBLEMA Verifica codice

Pubblicità

SmoonStyle

Utente Attivo
Messaggi
217
Reazioni
148
Punteggio
53
Devo inserire questi codici all'interno di un sito:

JavaScript:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script>
            $(function() {
          
            var oggi = new Date();
             var oggi = oggi.getDate()+"/"+(oggi.getMonth()+1);
             // Creo gli eventi
             var evento = {
                  // Evento : Giorno/Mese
                  'Onomastico' : '7/8',
                   //Al ultimo evento non si mette la ,
                  'Compleanno' : '15/2'
              }
              //Controllo se c'è un evento
              for(i in evento) {
                    // Se ci sono più eventi, avrai più eventi
                    if(evento[i] == oggi) {
                        $('.events_popup').prepend('Oggi é '+i+'.<br />');
                    }
               }
              });
        </script>

HTML:
...
<div class="events_popup"></div>
...
CSS:
.events_popup {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    background: #222;
    color: #FFF;
}

Il problema è che una volta inseriti questi codici non mi appare niente anche se imposto la data tra gli eventi con quella di oggi. Come posso fare? Ah dimenticavo il mio sito non supporta i link http (possibile che sia la libreria di jquery? Ho provato mettendo https e la libreria è lo stesso però senza risultato) oppure se avete qualche altro tipo di codice simile a quello postato..
 
Senza usare jQuery, il codice di per sè funziona :
JavaScript:
            var oggi = new Date();
             var oggi = oggi.getDate()+"/"+(oggi.getMonth()+1);
             // Creo un oggetto
             var evento = {
                  // Il nome della proprietà è l'Evento, il suo valore è Giorno/Mese
                  'Onomastico' : '7/8',
                   // Si mette la virgola se dopo ci sono altre proprietà
                  'Compleanno' : '26/7'
              }
              // Scorro tutte le proprietà dell'oggetto e confronto il loro valore
              for(i in evento) {
                    if(evento[I] == oggi) {
                        alert('Oggi é ' + i);
                    }
               }
Ho cambiato i commenti scrivendo cosa stai veramente facendo, visto che gli eventi esistono evita la confusione.
 
Senza usare jQuery, il codice di per sè funziona :
JavaScript:
            var oggi = new Date();
             var oggi = oggi.getDate()+"/"+(oggi.getMonth()+1);
             // Creo un oggetto
             var evento = {
                  // Il nome della proprietà è l'Evento, il suo valore è Giorno/Mese
                  'Onomastico' : '7/8',
                   // Si mette la virgola se dopo ci sono altre proprietà
                  'Compleanno' : '26/7'
              }
              // Scorro tutte le proprietà dell'oggetto e confronto il loro valore
              for(i in evento) {
                    if(evento[I] == oggi) {
                        alert('Oggi é ' + i);
                    }
               }
Ho cambiato i commenti scrivendo cosa stai veramente facendo, visto che gli eventi esistono evita la confusione.

Però anche togliendo il richiamo a jQuery non si attiva la barra "events_popup".. e nemmeno mettendo l'alert e le altre modifiche che hai apportato

Utilizzando l'html e scrivendoci qualcosa all'interno compare secondo il codice css, quindi è proprio un problema di javascript
 
Ultima modifica:
EDIT: Allora sono riuscito a farlo funzionare è bastato inserire tutto il codice Javascript all'interno del div. Adesso la domanda si tramuta in: Se io volessi inserire un'immagine assieme al nome dell'evento, come dovrei fare?

ps appena ho visto che funzionava, ho preso in mano subito il codice css :sisi:
 
Ultima modifica:
Sarebbe da vedere come hai fatto l'intera pagina, perche' se metti quello che ho scritto io in un tag script deve funzionare per forza.

Senza usare jQuery, il popup lo puoi fare con un tuo div che usa la classe events_popup.

Per aggiungere un'immagine all'oggetto puoi fare
JavaScript:
var evento = {
   Onomastico : {
      data: '7/8',
      immagine: 'https://www.tomshw.it/forum/data/avatars/l/102/102655.jpg'
   },
   Compleanno : {
      data: '26/7',
      immagine: 'https://www.tomshw.it/forum/data/avatars/l/102/102655.jpg'
   }
}
Ovviamente la ricerca diventa
JavaScript:
for(i in evento) {
   if(evento[I].data == oggi) {
      alert('Oggi é ' + i);
      // l'url dell'immagine si trova in evento[I].immagine
   }
}
 
Sarebbe da vedere come hai fatto l'intera pagina, perche' se metti quello che ho scritto io in un tag script deve funzionare per forza.

Senza usare jQuery, il popup lo puoi fare con un tuo div che usa la classe events_popup.

Per aggiungere un'immagine all'oggetto puoi fare
JavaScript:
var evento = {
   Onomastico : {
      data: '7/8',
      immagine: 'https://www.tomshw.it/forum/data/avatars/l/102/102655.jpg'
   },
   Compleanno : {
      data: '26/7',
      immagine: 'https://www.tomshw.it/forum/data/avatars/l/102/102655.jpg'
   }
}
Ovviamente la ricerca diventa
JavaScript:
for(i in evento) {
   if(evento[I].data == oggi) {
      alert('Oggi é ' + i);
      // l'url dell'immagine si trova in evento[I].immagine
   }
}
Il problema con le immagini rimane non riesco ad associare l'immagine con quell'evento, nemmeno come l'hai imposto..
stavo pensando se si potesse creare un'array con le immagini.
 
HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Tester</title>
    <style>
        .events_popup {
            width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            background: #222;
            color: #FFF;
        }
    </style>
</head>
<body>
    <div id="popup" class="events_popup" style="display:none;">
        Oggi è <span id="evento"></span><br />
        <img id="immagine" />
    </div>
    <script>
        var oggi = new Date().getDate() + "/" + (new Date().getMonth() + 1);

        var evento = {
            Onomastico: {
                data: '26/7',
                immagine: 'https://www.tomshw.it/forum/data/avatars/l/102/102655.jpg'
            },
            Compleanno: {
                data: '27/7',
                immagine: 'https://www.tomshw.it/forum/data/avatars/l/341/341935.jpg'
            }
        };

        for (i in evento) {
            if (evento[i].data === oggi) {
                document.getElementById('evento').innerHTML = i;
                document.getElementById('immagine').src = evento[i].immagine;
                document.getElementById('popup').style.display = 'block';
                break;
            }
        }
    </script>
</body>
</html>
Questo è un esempio di pagina funzionante, se lo incolli in un notepad e lo salvi come .html lo puoi testare.

Funziona però con un solo evento, perchè andrebbe implementato un sistema di popup multipli.
Mi sono concentrato solo sul recupero dell'immagine.
 
ho provato con notepad++ e funziona tranne che per l'immagine, quindi mi mostra semplicemente la barra colorata e il test "Oggi è", senza inserire in nome dell'evento.
33d8l02.jpg
zrhtmuk.jpg
 
Ultima modifica:
ho provato con notepad++ e funziona tranne che per l'immagine, quindi mi mostra semplicemente la barra colorata e il test "Oggi è", senza inserire in nome dell'evento.
33d8l02.jpg
zrhtmuk.jpg
Il pc su cui lo provi è connesso a internet ?
Perchè sto usano i nostri avatar del forum.

Semmai in locale prova mettendo il percorso di tue immagini.

EDIT: lo ho appena provato su Firefox, IE, Chrome ed Edge e funziona.
 
Il pc su cui lo provi è connesso a internet ?
Perchè sto usano i nostri avatar del forum.

Semmai in locale prova mettendo il percorso di tue immagini.

EDIT: lo ho appena provato su Firefox, IE, Chrome ed Edge e funziona.
Si è vero funziona, più che mai, ma per modificare le immagini con dei codici css dovrei creare un nuovo tag e metterlo con i div vicino a <img id="immagine" />, giusto?
Niente domanda stupida, ci sono arrivato da solo.

Adesso stò cercando di allineare il testo con l'immagine in modo che risulti tutto su una linea
 
Ultima modifica:
Codice:
<!DOCTYPE html>
<html>
<head>
    <title>Tester</title>
    <style>
        .events_popup {
            width: 100%;
            height: auto;
            position: absolute;
            top: 0;
            background: #222;
            color: #FFF;
        }
        </style>
        <style>
        .image {
            border-radius: 100px;
            width: 70px;
            position: absolute;
            -webkit-transition: opacity 0.5s ease-in-out;
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
        }
        </style>
</head>
<body>
    <div align="center" id="popup" class="events_popup">
        Oggi è <span id="evento"></span> <span></span><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" class="image" id="immagine"/>
    </div>
    <script>
        var oggi = new Date().getDate() + "/" + (new Date().getMonth() + 1);

        var evento = {
            Onomastico: {
                data: '26/7',
                immagine: 'https://www.tomshw.it/forum/data/avatars/l/102/102655.jpg'
            },
            Compleanno: {
                data: '28/7',
                immagine: 'https://www.tomshw.it/forum/data/avatars/l/341/341935.jpg'        
            }
        };

        for (i in evento) {
            if (evento[i].data === oggi) {
                document.getElementById('evento').innerHTML = i;
                document.getElementById('immagine').src = evento[i].immagine;
                document.getElementById('popup').style.display = 'block';
                break;
            }
        }
    </script>
    <script>
function bigImg(x) {
    x.style.height = "84px";
    x.style.width = "84px";

}

function normalImg(x) {
    x.style.height = "17px";
    x.style.width = "17px";
}
</script>
</body>
</html>

Ho aggiunto un'altro script per il passaggio del mouse, quindi mi confermi che posso inserire molti più eventi che il codice funge?! Appena cambio il link dell'immagine (link diretti) mi mostra solo il testo come prima <.<
 
Ultima modifica:
Appena cambio il link dell'immagine (link diretti) mi mostra solo il testo come prima <.<
Il link se è locale deve fare riferimento a dove apri il .html, la prova più semplice è mettere l'immagine nella stessa cartella e referenziarla solo con il suo nome senza nessun percorso.

Altri suggerimenti per la scrittura del codice:
  • tutti gli stili si possono mettere sotto un unico tag style
  • se nello stile .image metti height: 17px; e width: 17px; l'immagine parte gia' piccola
  • quando usi una classe di stile metti tutto dentro di lei, ad esempio align di popup
  • gli eventi funzionano anche senza mettere i doppi apici
  • tenta di far funzionare il tuo codice su più browser possibili, questo ad esempio non gira su IE
Puoi mettere tutti gli eventi che vuoi però implementato in questo modo vedrai solo il primo trovato.
 
Il link se è locale deve fare riferimento a dove apri il .html, la prova più semplice è mettere l'immagine nella stessa cartella e referenziarla solo con il suo nome senza nessun percorso.

Altri suggerimenti per la scrittura del codice:
  • tutti gli stili si possono mettere sotto un unico tag style
  • se nello stile .image metti height: 17px; e width: 17px; l'immagine parte gia' piccola
  • quando usi una classe di stile metti tutto dentro di lei, ad esempio align di popup
  • gli eventi funzionano anche senza mettere i doppi apici
  • tenta di far funzionare il tuo codice su più browser possibili, questo ad esempio non gira su IE
Puoi mettere tutti gli eventi che vuoi però implementato in questo modo vedrai solo il primo trovato.
ho inserito tutto in un unico style con l'inserimento dei 17px e dell'align...ho inserito una decina di eventi però non mi appare nè il nome dell'evento nè l'immagine...
 
Pubblicità
Pubblicità
Indietro
Top