Lo script che presentiamo dà la possibilita di creare una popup animata che si aprirà progressivamente da sinistra verso destra e dell'alto verso il basso.
Lo script è perfettamente compatibile con Explorer 5.x, Netscape 6.x e NN 4.x.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Inseriamo il codice tra i tag <head> della pagina:
<script type="text/javascript" language="javascript">
<!--
function expandingWindow(website) {
var
windowprops='width=1,height=1,scrollbars=yes,status=no,resizable=yes,location=no'
var heightspeed = 2;
var widthspeed = 2;
var leftdist = 10;
var topdist = 10;
var lunghezza = 400;
var altezza = 400;
if(lunghezza == 0){
lunghezza = window.screen.availwidth;
}
if(altezza == 0){
altezza = window.screen.availheight;
}
if (window.resizeTo&&navigator.userAgent.indexOf("Opera")==-1) {
var winwidth = lunghezza;
var winheight = altezza;
var sizer = window.open("","","left=" + leftdist + ",top=" + topdist +","+
windowprops);
for (sizeheight = 1; sizeheight < winheight; sizeheight += heightspeed)
sizer.resizeTo("1", sizeheight);
for (sizewidth = 1; sizewidth < winwidth; sizewidth += widthspeed)
sizer.resizeTo(sizewidth, sizeheight);
sizer.location = website;
}
else
window.open(website,'mywindow');
}
// -->
</script>
Vediamo cosa personalizzare.
var windowprops='width=1,height=1,scrollbars=yes,status=no,resizable=yes,location=no'
in questa stringa possiamo impostare gli attributi della pop up (basterà mettere 'yes' oppure 'no'): sarà possibile decidere se avere le scrollbars, la barra di stato, la barra degli indirizzi, se rendere ridimensionabile la finestra.
gli attributi 'width' e 'height' invece possono essere lasciati sul valore '1'.
var heightspeed = 2;
variabile che indica la velocità verticale di apertura della finestra. più alto sarà il valore e più alta sarà la velocità.
var widthspeed = 2;
variabile che indica la velocità orizzontale di apertura della finestra. più alto sarà il valore e più alta sarà la velocità.
var leftdist = 10;
variabile che indica la distanza della finestra dal bordo sinistro dello schermo (in pixel).
var topdist = 10;
variabile che indica la distanza della finestra dal bordo superiore dello schermo (in pixel)
var lunghezza = 400;
variabile che indica la lunghezza della finestra
var altezza = 400;
variabile che indica l'altezza della finestra
Da notare che possiamo impostare i valori di "lunghezza" e "altezza" su 0 (zero) se desideriamo che la finestra occupi tutto lo spazio disponibile sullo schermo.
A questo punto inseriamo, nel corpo della pagina, il link che richiama la funzione javascript.
Ogni link dovrà essere così scritto:
<a href="javascript:;" onclick="expandingwindow('http://forum.html.it');return false">Clicca per l'esempio</a>
Altre modifiche non sono necessarie.
