.:° JsDir °:. JavaScript .:° Tutorials: piccoli corsi concentrati su un argomento per imparare di piu'. °:. Bring Your Site To Life®

      Con l'avvento dei nuovi browser , (Netscape 6 e Internet Explorer 5+) la necessità di realizzare script "cross-browser" si sente maggiormente in quanto se prima era sufficiente distinguere Netscape da Explorer , ora bisogna distinguere Netscape 4 , Netscape 6 , Explorer 4+ ed eventualmente IE5, vediamo perchè.
      Nel tentativo di avvicinarsi aglistandard W3C , per i browser di nuova generazione , sono state introdotte nuove specifiche.
      Chi ha già realizzato script per DHTML sà che per accedere agli oggetti di un documento, si utilizzava document.layers per Netscape e document.all per Explorer.Se pur Explorer ha mantenuto la compatibilità con document.all introducendo il nuovo metodo , stessa cosa non ha fatto Netscape che ha deciso di tagliare i ponti col passato, infatti Netscape 6 non riconosce più document.layers .
      Il nuovo metodo del DOM introdotto per entrambi i browser è document.getElementById vediamo come utilizzarlo:
      in NN4: mioDiv= document.layers['div_id']
      in IE: mioDiv= document.all['div_id']
      in IE5 e NN6: mioDiv= document.getElementById('div_id')
      Questo semplifica le cose soprattutto per Netscape in quanto non si dovrà più usare document.layers['div1'].document['div2'] con i nuovi browser per accedere a livelli interni.
      Inoltre NN6 supporta anche <IFRAME></IFRAME>.

      Vediamo ora come utilizzare document.getElementById.

      Visibility:
      In NN4: document.layers["div_id"].visibility= "hide";
      In IE: document.all["div_id"].style.visibility= "hidden";
      In IE5 e NN6: document.getElementById("div_id").style.visibility= "hidden";

      Posizionamento:
       - orizzontale NN4: element.left
       - orizzontale IE4: element.style.pixelLeft
       - orizzontale IE5 e NN6: parseInt(document.getElementById("div_id").style.left)
       - verticale NN4: element.top
       - verticale IE4: element.style.pixelTop
       - verticale IE5 e NN6: parseInt(document.getElementById("divID").style.top)

      Movimento
      In Netscape: document.layers["div_id"].moveTo(x,y);
      in Explorer: document.all.["div_id"].style.pixelLeft= x;
      document.all.["div_id"].style.pixelTop = y;
      In IE5 e NN6: (esempio)
            ogg = document.getElementById("div_id");
            ogg.style.left = 200 + "px";
            ogg.style.top = 300 + "px";

      Stili:
      - document.getElementById("div_id").style.backgroundColor="red";
      - document.getElementById("div_id").style.fontSize = "18pt";

      Esempio:
      <style type="text/css">
      A { color:red }
      P { color:blue }
      </style>

      Per cambiare il colore dell'ancora:
      document.styleSheets[0].cssRules[0].style.color = "lime"

      Per cambiare il colore del paragrafo:
      document.styleSheets[0].cssRules[1].style.backgroundColor = "green"

Esempio

Realizziamo insieme un piccolo script che posiziona un livello (div) al centro del documento del browser qualunque sia la dimensione del documento stesso.
Creiamo innanzitutto il livello nel body del nostro documento,stabilendo altezza e larghezza dello stesso ed eventualmente altre caratteristiche di stile,

<body>
<div id="div1" style="position:absolute;height:40;width:300;background:red;"><strong><p align="center">text</strong>
</p></div>
</body>

Ora iniziamo a realizzare lo script che dovrà effettuare il posizionamento in base alle dimensioni del documento.
La prima cosa da fare è distinguere i browser , quindi si utilizzerà: document.layers per NN4 , document.all per IE4 e document.getElementById per IE5+ e NN6 come abbiamo già spiegato sopra.
Chiamiamo la nostra funzione centradiv(id) dove id sarà il nome del livello e verrà inserito nell'evento onLoad per richiamare la funzione.

Iniziamo con il codice per NN4:
function centradiv(id){
if (document.layers){
impostiamo ora la larghezza del livello nello script:
document.layers[id].width = 300;
posizioniamo ora il livello orizzontalmente con pageX , per fare questo bisogna effettuare un semplice calcolo che consiste nel verificare la dimensione del documento in larghezza, dividendo a metà (window.innerWidth/2) e sottrarre la metà della larghezza del livello (document.layers[id].width/2):
document.layers[id].pageX = (window.innerWidth/2)-(document.layers[id].width/2);
impostiamo ora l'altezza del livello nello script:
document.layers[id].height = 40;
posizioniamo ora il livello verticalmente con pageY , per fare questo bisogna effettuare un semplice calcolo che consiste nel verificare la dimensione del documento in altezza, dividerdo a metà (window.innerHeight/2) e sottrarre la metà della larghezza del livello (document.layers[id].height/2).
document.layers[id].pageY = (window.innerHeight/2)-(document.layers[id].height/2);
}
Passiamo al codice per IE4:
else if (document.all){
impostiamo ora la larghezza del livello nello script:
document.all[id].width = 300;
posizioniamo ora il livello orizzontalmente con posLeft , per fare questo bisogna effettuare un semplice calcolo che consiste nel verificare la dimensione del documento in larghezza, dividerdo a metà (document.body.clientWidth/2) e sottrarre la metà della larghezza del livello (document.all[id].width/2):
document.all[id].style.posLeft = (document.body.clientWidth/2)-(document.all[id].width/2);
impostiamo ora l'altezza del livello nello script:
document.all[id].height = 40;
posizioniamo ora il livello verticalmente con posTop , per fare questo bisogna effettuare un semplice calcolo che consiste nel verificare la dimensione del documento in altezza, dividerdo a metà (document.body.clientHeight/2) e sottrarre la metà della larghezza del livello (document.all[id].height/2):
document.all[id].style.posTop = (document.body.clientHeight/2)-(document.all[id].height/2);
}
Passiamo al codice per IE5+ e NN6:
else if(document.getElementById){
impostiamo ora la larghezza del livello nello script:
document.getElementById(id).width = 300;
posizioniamo ora il livello orizzontalmente con left , per fare questo bisogna effettuare un semplice calcolo che consiste nel verificare la dimensione del documento in larghezza, dividerdo a metà (window.innerWidth/2) e sottrarre la metà della larghezza del livello (document.getElementById(id).width/2):
document.getElementById(id).style.left = (window.innerWidth/2)-(document.getElementById(id).width/2);
impostiamo ora l'altezza del livello nello script:
document.getElementById(id).height = 40;
posizioniamo ora il livello verticalmente con top , per fare questo bisogna effettuare un semplice calcolo che consiste nel verificare la dimensione del documento in altezza, dividerdo a metà (window.innerHeight/2) e sottrarre la metà della larghezza del livello (document.getElementById(id).height/2):
document.getElementById(id).style.top = (window.innerHeight/2)-(document.getElementById(id).height/2);
}
}
Richiamiamo la funzione con due event-handler uno OnLOad al caricamento e OnResize al ridimensionamento del documento in modo da avere il livello sempre al centro:
<body onLoad="centradiv('div1')" onResize="location.reload()">

Script Completo

<html> 
<head> 
<script language="JavaScript"> 
//--------------------------------------- 
//--Sample Script by Andreotta Fabiano-- 
//--fabianoATjsdir.com-- 
//--------------------------------------- 
function centradiv(id){ 
if (document.layers){ 
document.layers[id].width=300; 
document.layers[id].pageX =(window.innerWidth/2)-(document.layers[id].width/2); 
document.layers[id].height=40; 
document.layers[id].pageY =(window.innerHeight/2)-(document.layers[id].height/2); 
} 
else if (document.all){ 
document.all[id].width=300; 
document.all[id].style.posLeft =(document.body.clientWidth/2)-(document.all[id].width/2); 
document.all[id].height=40; 
document.all[id].style.posTop =(document.body.clientHeight/2)-(document.all[id].height/2); 
} 
else if(document.getElementById){ 
document.getElementById(id).width=300; 
document.getElementById(id).style.left =(window.innerWidth/2)-(document.getElementById(id).width/2); 
document.getElementById(id).height=40; 
document.getElementById(id).style.top =(window.innerHeight/2)-(document.getElementById(id).height/2); 
} 
} 
 
</script> 
 
<title></title> 
</head> 
 
<body onLoad="centradiv('div1')" onResize="location.reload()"> 
<div id="div1" style="position:absolute;height:40;width:300;background:red;"><strong> 
<p align="center">text</strong> </p> 
</div> 
</body> 
</html>

	Parli JavaScript? Non tenerlo per te! JsDir cerca collaboratori. Se gli UserScript ti stanno stretti e vuoi inserire delle FAQ, dei Tips&Tricks, o anche uno StaffScript, se vuoi scrivere un tutorial o recensire un libro... insomma se parli JavaScript segui questo link. È un'occasione per farti conoscere e dimostrare le tue capacità!!!