Le standard Popup: le popup dinamiche – Ver. I

Come costruire finestre popup ridimensionabili e posizionabili dinamicamente

Caratteristiche della versione

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:

<script type=”text/javascript” src=”standardpop.js”></script>

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:

<script type=”text/javascript” src=”/js/standardpop.js”></script>

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.

Per il resto è una semplice popup.

La funzione

addpop(nome,url,tools,iw,ih,fw,fh,inleft,intop,fileft,fitop, passow,passoh,ms,af,noslide)

Le funzione può accettare i seguenti parametri:

  • 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:

addpop(‘fin1′,”,’status=1′,200,’max’,200,300,’center’,’center’)

2 – per modificare dimensioni e posizione:

addpop(‘fin2′,’pagina.html’,null,250,250,440,300,’right’, ‘bottom’,’left’,’top’)

3 – per modificare dimensioni, posizione ed eseguire lo sliding solo dopo la pressione del pulsante:

addpop(‘fin3′,’pagina.html’,null,100,100,250,250,’left’, ‘bottom’,’right’,’bottom’,null,null,null,null,true)

4 – per modificare dimensioni, posizione e passo dello sliding, iniziandolo dopo la pressione del pulsante:

addpop(‘fin4′,’pagina.html’,null,250,250,440,300,’right’,’top’,’center’,’center’,5,20,null,null,true)

5 – per modificare solo la posizione della popup:

addpop(‘fin5′,”,null,250,250,null,null,’right’,’bottom’, ‘center’,’center’)

ho inserito anche uno slide successivo in cui cambio il passow:

6 – per farlo consecutivamente:

addpop(‘fin5b’,”,null,250,250,null,null,’right’, ‘bottom’,’center’,’center’,null,null,null,newslide)

dove la variabile stringa newslide è stata settata così:

newslide = “fin5b.slide(‘max’,null,null,null,50)”;

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:

passo1 = “fin6.slide(‘max’,null,null,null,null,null,null,passo2);”

passo2 = “fin6.slide(null,’max’,null,null,null,null,null,passo3)”;

passo3 = “setTimeout(“fin6.close()“,2000)”;

addpop(‘fin6′,’pagina.html’,’scrollbars=1′,

   300,100,null,300,’center’,’bottom’,’center’,’top’,

   null,null,null,passo1)

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.

Generatore di standard popup

nome: url:

tools:

valori iniziali: larghezza (iw):     altezza (ih):    coordinata x (inleft): left          center     right        

coordinata y (intop):  top         center    bottom    

valori finali:

larghezza (fw):     altezza (fh):   

coordinata x (fileft):

left         

center    

right         

coordinata y (fitop):  top         center     bottom     

opzioni di sliding:

passow:        passoh:         ms:

azione finale (af):

Codice da inserire

Nella head della pagina:

Nell’evento o nel corpo delle tue funzioni:

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”>

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 […]