Sono popup che hanno la capacità di modificare le proprie dimensioni e la propria posizione in maniera facilmente controllabile dal webmaster. Bastà inserire nelle pagine HTML un piccolo file .js (4,19 KB) che puoi trovare nel file di esempio e utilizzare i comandi descritti nell’articolo per gestirle.
Una volta scaricato il file js, basterà inserire il codice di richiamo all’interno della nostra pagina aggiungendolo tra i tag <head> </head> di ogni documento in cui volete che esso funzioni:
Naturalmente se il vostro Javascript risiede in una directory diversa da quella in cui compare il documento dovrete utilizzare il percorso specifico. Se, ad esempio, inserirete il Javascript nella directory js del vostro sito dovrete indicare il percorso in questo modo:
Per richiamare la popup all’interno della pagina (con un link o con un pulsante) bisognerà utilizzare gli eventi associati alle funzioni e i metodi che vedremo nel prosieguo dell’articolo. Per chi non sapesse cosa siano gli eventi rimandiamo alle guide su Javascript dove si parla degli eventi. Alla fine dell’articolo presenteremo anche un generatore di popup che permetterà anche ai meno esperti di generare la propria standard popup in modo semplice e veloce.
Questa versione crea semplici popup che hanno la capacità di contenere, ridimensionare e riposizionare pagine che sono incluse nello stesso dominio della pagina “madre”. Questa limitazione è dovuta a motivi di sicurezza: il metodo javascript window.open() blocca qualsiasi meccanismo di dimensionamento e posizionamento di pagine caricate da altri domini. Nella seconda versione, che vedremo a giorni, questo problema è stato aggirato.
nome – (stringa) il nome della popup, è come ci si riferirà ad essa
url – (stringa) l’URL della pagina da caricare nella popup
tools – (stringa) caratteristiche della popup (location, menubar…)
iw – (intero|’max’) larghezza iniziale della popup
ih – (intero|’max’) altezza iniziale della popup
fw – (intero|’max) larghezza finale della popup
fh – (intero|’max’) altezza finale della popup
inleft – (‘left’|’center’|’right’|intero) coordinata orizzontale iniziale della popup
intop – (‘top’|’center’|’bottom’|intero) coordinata verticale iniziale della popup
fileft – (‘left’|’center’|’right’|intero) coordinata orizzontale finale della popup
fitop – (‘top’|’center’|’bottom’|intero) coordinata verticale finale della popup
passow – (intero, 10 di default) numero di pixel cambiati per la larghezza ad ogni iterazione. Nel caso in cui la larghezza non venga cambiata diventa il numero di pixel cambiati per il ‘left’ ad ogni iterazione
passoh – (intero, 10 di default) numero di pixel cambiati per l’altezza ad ogni iterazione. Nel caso in cui l’altezza non venga cambiata diventa il numero di pixel cambiati per il ‘top’ ad ogni iterazione
ms – (intero, 10 di default) numero di millisecondi tra le iterazioni
af – (stringa) azione da eseguire alla fine dello sliding
noslide – (true|false, null di default) se false (o null) inizia automaticamente lo sliding
I Metodi
Ecco i quattro metodi per gestirle:
standardpopup.play() per far iniziare lo sliding, qualora ‘noslide’ sia settato a ‘true’
standardpopup.close() per chiudere la popup
standardpopup.location(url)() per cambiare la location della standardpopup
standardpopup.slide(fw,fh,fileft,fitop,passow,passoh,ms,af,noslide) per ulteriori slides
fw – (intero|’max’) larghezza finale della popup
fh – (intero|’max’) altezza finale della popup
fileft – (‘left’|’center’|’right’|intero) coordinata orizzontale finale della popup
fitop – (‘top’|’center’|’bottom’|intero) coordinata verticale finale della popup
passow – (intero, 10 di default) numero di pixel cambiati per la larghezza ad ogni iterazione. Nel caso in cui la larghezza non venga cambiata diventa il numero di pixel cambiati per il ‘left’ ad ogni iterazione
passoh – (intero, 10 di default) numero di pixel cambiati per l’altezza ad ogni iterazione. Nel caso in cui l’altezza non venga cambiata diventa il numero di pixel cambiati per il ‘top’ ad ogni iterazione
af – (stringa) azione da eseguire alla fine dello sliding
noslide – (true|false, null di default) se vale false (o null) comincia automaticamente lo sliding
nota: per ogni altra azione da eseguire sulla popup, occorre usare la sintassi standardpopup.pp
Esempi
1 – per modificare solo le dimensioni della popup:
7 – per fare più di 2 slide consecutivi, vi consiglio di non annidare i vari slide all’interno di una sola chiamata, ma di separare le azioni in più passi.
Nel seguente esempio, si eseguono due slide consecutivi e dopo un intervallo di 2 secondi la finestra viene chiusa:
Notate la presenza delle barre “” che dovreste usare nel caso usaste piu apici (‘) e virgolette (“) insieme.
Crea la tua standardpopup
Per creare la propria standard popup basta riempire i campi del seguente modulo e premere sul pulsante “Lancia la popup” in fondo alla pagina. Tutte le varie funzioni e metodi sono stati descritti in questo articolo. Nel campo Evento (l’ultima finestra di questa pagina) verrà mostrato il codice da inserire all”interno della propria pagina Web.
I campi segnati in rosso sono obbligatori.
Se per esempio si vuole lanciare la standard popup con un click su un pulsante basterà inserire all’interno della pagina HTML il seguente codice:
<input type=”button” name=”stanpopup” value=”Apri popup” onclick=”codice che compare nella finestra superiore”>
Se vuoi aggiornamenti su Le standard Popup: le popup dinamiche - Ver. I inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni
relative ai servizi di cui alla presente pagina ai sensi
dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i
seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni
relative ai servizi di cui alla presente pagina ai sensi
dell'informativa sulla privacy.
I Video di HTML.it
Creare un riproduttore audio in HTML5
In questo video vedremo come arricchire una pagina web di un riproduttore audio realizzato in HTML5. Per questo tutorial avremo […]
Guida a Red Hat Quarkus, uno stack Java Kubernetes nativo pensato per applicazioni serverless e per la realizzazione di microservizi rapidi ed ottimizzati. Una piattaforma concepita per accedere in ambiente Cloud mettendo a disposizione un framework orientato ai microservizi, come ad esempio Spring Boot o Micronaut