Lo script che presentiamo genera un effetto molto particolare. Al posto delle solite pop up a cui siamo abituati avremo una finestra di dimensioni personalizzate che entrerà ed uscirà dallo schermo con un effetto dinamico. Lo script è compatibile con entrambi i browser ma con delle differenze: con IE non avremo nessun problema di visualizzazione mentre con Netscape si aprirà una normale pop up.
L'esempio si compone di 6 file:
- esempio.htm
- attesa.htm
- test.htm
- 01.gif
- 02.gif
- 03.gif
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, come ormai sappiamo, lo script tra i tag <head> della pagina principale:
<script language="JavaScript1.2" type="text/javascript">
<!-- Debut script
/* BeOS window par E.D Prod 1998
etiennedeb@ifrance.com
*/
var navigateur=navigator.appName;var abrege=navigateur.substring(0,2);
var ftx=450;var fty=380;
var fpx=0;var fpy=0;var fpxf=0;var fpxc=0;var tempobe=0;var toclose=0;var
decax=0;var decay=0;var deplace=0;
function Mouvement() {
Xpos = event.clientX+document.body.scrollLeft;
Ypos = event.clientY+document.body.scrollTop;
if (deplace!=0) {
if (deplace==1) {
decax=Xpos-fpx;
decay=Ypos-fpy;
deplace=2;
}
fpx=Xpos-decax;
fpy=Ypos-decay;
document.all.fenetre.style.top=fpy;
document.all.fenetre.style.left=fpx;
return false;
}
}
document.onmousemove = Mouvement;
function cliquer(flag) {
deplace=flag;
return false;
}
function beWindow(fpx,fpy,ftx,fty,ftitre,fichier) {
var ftxb=130;var hide="hidden";
fchaine=''
+'<div id="fenetre" style="position:absolute;visibility:hidden;z-
index:50;top:'+fpy+'px;left:'+fpx+'px;width:'+ftx+'px;height:'+fty+'px;bgcolor:#0000ff;">'
+'<div id="window" style="position:absolute;z-
index:50;top:21px;left:0px;width:'+(ftx)+'px;height:'+(fty)+'px;">'
+'<div id="hg" style="position:absolute;z-
index:50;top:0px;left:0px;width:6px;height:6px;"><img src="images/hg.gif" width="6" height="6"/></div>'
+'<div id="hd" style="position:absolute;z-index:50;top:0px;left:'+(ftx-
6)+'px;width:6px;height:6px;"><img src="images/hd.gif" width="6" height="6"/></div>'
+'<div id="bg" style="position:absolute;z-index:50;top:'+(fty-
6)+'px;left:0px;width:6px;height:6px;"><img src="images/bg.gif" width="6" height="6"/></div>'
+'<div id="bd" style="position:absolute;z-index:50;top:'+(fty-
6)+'px;left:'+(ftx-6)+'px;width:6px;height:6px;"><img src="images/bd.gif" width="6" height="6"/></div>'
+'<div id="h" style="position:absolute;z-
index:50;top:0px;left:6px;width:1px;height:6px;"><img src="images/h.gif" width="'+(ftx-10)+'" height="6"/></div>'
+'<div id="b" style="position:absolute;z-index:50;top:'+(fty-
6)+'px;left:6px;width:1px;height:6px;"><img src="images/b.gif" width="'+(ftx-10)+'" height="6"/></div>'
+'<div id="g" style="position:absolute;z-
index:50;top:6px;left:0px;width:6px;height:1px;"><img src="images/g.gif" width="6" height="'+(fty-10)+'"/></div>'
+'<div id="d" style="position:absolute;z-index:50;top:6px;left:'+(ftx-
6)+'px;width:6px;height:1px;"><img src="images/d.gif" width="6" height="'+(fty-10)+'"/></div>'
+'</div>'
+'<div id="titre" style="position:absolute;z-
index:50;top:1px;left:0px;width:'+(ftx)+'px;height:21px;" onmousedown="return cliquer(1);" onmouseup="return cliquer(0);">'
+'<table CELLPADDING=0 CELLSPACING=0 border="0" width="'+(ftxb)+'"
height="21"><tr><td background="images/tm.gif"><font face="verdana" size=1><strong> '+ftitre+'</stron
g></font></td></tr></table>'
+'<div style="position:absolute;z-index:50;top:0px;left:0px;"><a href="#"
onclick="javascript:return closebe();"><img src="images/tg.gif" border="0" width=21 height=21/></a></div>'
+'<div style="position:absolute;z-index:50;top:0px;left:'+(ftxb-
4)+'px;"><img src="images/td.gif" border="0" width=4 height=21/></div>'
+'</div>'
+'<div id="interieur" style="position:absolute;z-
index:50;top:27px;left:6px;width:'+(ftx-12)+'px;height:'+(fty-12)+'px;">'
+'<iframe name="inbeos" TOP=0 LEFT=0 width='+(ftx-12)+' height='+(fty-12)+'
border="0" FRAMEborder="0" scrolling=AUTO src="'+fichier+'"></iframe>'
+'</DIV>'
+'</div>'
+'</div>'
document.write(fchaine);
}
function slidebe() {
if (toclose!=3) {
fpx+=fpxc;
if ((fpx>fpxf) && (toclose==0)) {fpx=fpxf;fpxc=0;toclose=3;}
if (toclose==1) {fpxc=fpxc-20;}
document.all.fenetre.style.left=fpx;
if (fpx<-700) {
fpxc=0;fpx=700;toclose=3;
inbeos.location.href="attesa.htm";
document.all.fenetre.style.visibility="hidden";
}
}
tempobe=setTimeout('slidebe();',5);
}
function apercu(fichier) {
if (abrege=="Mi"){
self.clearTimeout();self.clearInterval();
fpy=document.body.scrollTop+(document.body.clientheight/2)-200;
document.all.fenetre.style.top=fpy;
document.all.fenetre.style.left=-700;fpx=-700;fpxf=(document.body.clientwidth/2)
-200;fpxc=100;toclose=0;
document.all.fenetre.style.visibility="visible";
inbeos.location.href=fichier;
}
else {myWindow=open(fichier, "newWindow",
"width="450",height=380,menubar=no,resizable=no,scrollbars=YES,status=no,toolbar=no");}
return false;
}
function closebe() {
fpxc=80;toclose=1;
return false;
}
function CreerFenetreBe() {
if (abrege=="Mi"){beWindow(0,0,450,380,"Pop up","attesa.htm");slidebe();}
}
// Fine script -->
</script>
Vediamo come personalizzare il codice:
var ftx=450;var fty=380;
questa stringa contiene le misure della pop up specifiche per Netscape.
if (toclose==1) {fpxc=fpxc-20;}
il valore -20 indica l'ampiezza del movimento in uscita della pop up. Può essere modificato a piacimento ma deve essere compreso tra -1 e -N. Ad un valore più basso (-1) corrisponderà una maggiore escursione della pop up prima di uscire dal browser; viceversa ad un valore più alto la finestra impiegherà meno tempo per scomparire.
inbeos.location.href="attesa.htm";
questa riga indica la pagina contenente il messaggio di attesa. È chiaro che se la pop up vera e propria è leggera, "attesa.htm" non verrà visualizzata.
fpy=document.body.scrollTop+(document.body.clientheight/2)-200;
questa stringa è importante per posizionare la pop up nel punto in cui desideriamo. -200 in questo caso indica l'altezza (in pixel) della finestra dal margine superiore del browser.
document.all.fenetre.style.left=-700;fpx=-700;fpxf=(document.body.clientwidth/2)-200
questa stringa si riferisce invece al posizionamento della pop up in senso orizzontale. Indica il punto, dal margine sinistro ed espresso in pixel, in cui si dovrà fermare la finestra.
;fpxc=100;toclose=0;
il valore 100 indica la velocità di entrata della pop up. Più è basso il valore e più sarà lenta la pop up.
else {myWindow=open(fichier, "newWindow", "width="450",height=380,menubar=no,resizable=no,scrollbars=YES,status=no,toolbar=no")
queste righe riguardano esclusivamente le misure della pop up per Netscape. In particolare, l'altezza e la larghezza, dovranno avere gli stessi valori delle variabili analizzate precedentemente (var ftx=450;var fty=380; ).
function CreerFenetreBe() {
if (abrege=="Mi"){beWindow(0,0,450,380,"Pop up","attesa.htm");slidebe();}
questa invece è la funzione che gestisce le misure della pop up esclusivamente per Explorer mentre "Pop up" è il titolo.
Altre modifiche allo script non sono richieste.
Adesso passiamo al body della pagina principale. È importantissimo inserire questo script che richiama la funzione di apertura della pop up in IE. Lo script può essere inserito in qualsiasi parte del body ma non tra i tag <head>:
<script type="text/javascript" language="javascript">CreerFenetreBe();</script>
Non resta altro che preparare il link che aprirà la finestra:
<a href="#" onclick="return apercu('test.htm')">Guarda la Pop up</a>
La pagina "test.htm" non richiede nessuna modifica particolare.
Le immagini che vedrete sono quelle originali dello script. Se non vi piacciono e amate i programmi di grafica potete crearne di personalizzate. Basterà poi sostituire il percorso delle stesse nel codice sorgente.
L'ultima operazione fondamentale ai fini di un corretto funzionamento dello script è l'inserimento di un <div> vuoto nel body:
<div id="divDescription">
<!--Div vuoto-->
</div>
Il <div> vuoto può essere posizionato in qualsiasi parte del body.
