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

Pop up elastica

Link copiato negli appunti

Lo script che presentiamo rende una normale pop up "elastica". Una volta aperta, la finestra si ridimensionerà secondo le misure impostate con un movimento dinamico e non sarà possibile variarne la grandezza. Lo script è compatibile con Explorer 5.x e con Netscape 6.x.
Nell'esempio il codice javascript è stato messo direttamente tra gli <head> del documento ma, data la lunghezza, è consigliabile utilizzare un file .js esterno.

L'esempio si compone di 2 file:

  • esempio.htm
  • popup.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 questo codice tra i tag <head> della popup:

<script language="javascript" type="text/javascript">
<!--
function resizeWin(maxX,maxY,speed,delay,win){
this.obj = "resizeWin" + (resizeWin.count++);
eval(this.obj + "=this");
if (!win) this.win = self; else this.win = eval(win);
if (!maxX) this.maxX = 300; else this.maxX = maxX;
if (!maxY) this.maxY = 400; else this.maxY = maxY;
if (!speed) this.speed = 1/7; else this.speed = 1/speed;
if (!delay) this.delay = 30; else this.delay = delay;
this.doResize = (document.all || document.getElementById);
this.stayCentered = false;

this.initWin = function(){
if (this.doResize){
this.resizeMe();
}
else {
this.win.resizeTo(this.maxX + 10, this.maxY - 20);
}
}

this.resizeMe = function(){
this.win.focus();
this.updateMe();
}

this.resizeTo = function(x,y){
this.maxX = x;
this.maxY = y;
this.resizeMe();
}

this.stayCentered = function(){
this.stayCentered = true;
}

this.updateMe = function(){
this.resizing = true;
var x = Math.ceil((this.maxX - this.getX()) * this.speed);
var y = Math.ceil((this.maxY - this.getY()) * this.speed);
if (x == 0 && this.getX() != this.maxX) {
if (this.getX()> this.maxX) x = -1;
else x = 1;
}
if (y == 0 && this.getY() != this.maxY){
if (this.getY()> this.maxY) y = -1;
else y = 1;
}
if (x == 0 && y == 0) {
this.resizing = false;
}
else {
this.win.top.resizeBy(parseInt(x),parseInt(y));
if (this.stayCentered == true) this.win.moveTo((screen.width -
this.getX()) / 2,(screen.height - this.getY()) / 2);
setTimeout(this.obj + '.updateMe()',this.delay)
}
}

this.write = function(text){
if (document.all && this.win.document.all["coords"])
this.win.document.all["coords"].innerHTML = text;
else if (document.getElementById &&
this.win.document.getElementById("coords")) this.win.document.getElementById("coords").innerHTML = text;
}

this.getX = function(){
if (document.all) return (this.win.top.document.body.clientwidth + 10)
else if (document.getElementById)
return this.win.top.outerwidth;
else return this.win.top.outerwidth - 12;
}

this.getY = function(){
if (document.all) return (this.win.top.document.body.clientheight + 29)
else if (document.getElementById)
return this.win.top.outerheight;
else return this.win.top.outerheight - 31;
}

this.onResize = function(){
if (this.doResize){
if (!this.resizing) this.resizeMe();
}
}

return this;
}
resizeWin.count = 0;
//-->
</script>

Questo codice non richiede modifiche; tutti i parametri, infatti, possono essere impostati in seguito.

Sempre tra i tag <head> della stessa pagina inseriamo il prossimo codice:

<script type="text/javascript" language="javascript">
<!--
booyah = new resizeWin(300,150,7,30);
booyah.stayCentered();
//-->
</script>

I valori numerici tra le parentesi tonde sono i parametri che ci interessa personalizzare

300

indica la larghezza della pop up

150

indica l'altezza della pop up

7

è il grado di "elasticità" della finestra. con valore 1, ad esempio, la pop up sarà meno "elastica"

30

indica la velocità di ridimensionamento. a valore più alto corrisponde una minore velocità di movimento

Nel caso non volessimo aprire la finestra in posizione centrale basterà decommentare questa riga:

booyah.stayCentered();

Ricordo che, per decommentare una stringa, basta aggiungere due slash ad inizio riga come in questo caso:

//booyah.stayCentered();

A questo punto dobbiamo inserire due eventi nel tag <body> della finestra:

onload="booyah.initWin()" onresize="booyah.onResize()"

Il nostro <body>, quindi, sarà strutturato in questa maniera:

<body onload="booyah.initWin()" onresize="booyah.onResize()">

Non rimane altro che preparare il collegamento che lancerà la pop up dalla finestra madre:

<a href="javascript:;" onClick="window.open('popup.htm','','resizable,scrollbars')">Clicca</a>

popup.htm

è il nome della finestra da aprire

resizable,scrollbars

sono le caratteristiche attribuite alla finestra. nel caso, ad esempio, non volessimo le barre di scorrimento basterà levare la parola "scrollbars"; oppure basterà aggiungere, dopo la virgola, la parola "location" per avere la barra degli indirizzi.


Ti consigliamo anche