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:
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
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
Le funzione può accettare i seguenti parametri:
- nome
- url
- tools
- iw
- ih
- fw
- fh
- inleft
- intop
- fileft
- fitop
- passow
- passoh
- ms
- af
- noslide
I Metodi
Ecco i quattro metodi per gestirle:
- standardpopup.play()
- standardpopup.close()
- standardpopup.location(url)()
- standardpopup.slide(fw,fh,fileft,fitop,passow,passoh,ms,af,noslide)
- fw
- fh
- fileft
- fitop
- passow
- passoh
- af
- noslide
nota: per ogni altra azione da eseguire sulla popup, occorre usare la sintassi standardpopup.pp
Esempi
1 - per modificare solo le dimensioni della popup:
2 -
addpop('fin2','pagina.html',null,250,250,440,300,'right', 'bottom','left','top')
3 -
addpop('fin3','pagina.html',null,100,100,250,250,'left', 'bottom','right','bottom',null,null,null,null,true)
4 -
addpop('fin4','pagina.html',null,250,250,440,300,'right','top','center','center',5,20,null,null,true)
5 -
addpop('fin5','',null,250,250,null,null,'right','bottom', 'center','center')
ho inserito anche uno slide successivo in cui cambio il passow:
6 -
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 - non
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(
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.
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"> |
