Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Pop up animata

Link copiato negli appunti

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.


Ti consigliamo anche