.:° JsDir °:. JavaScript .:° Gli script del webmaster e dei collaboratori al sito °:. Bring Your Site To Life®

      Questo script, che si compone di due pezzi come vedremo fra poco, consente di posizionare una riga nella quale far scrollare un testo.
      Funziona come il tag <MARQUEE> introdotto da Microsoft con Internet Explorer, ma con la particolarità che anche se la pagina viene scrollata la striscia rimane visibile perché si posiziona sempre nel punto voluto.

      Lo script si compone di due pezzi. Il primo va messo nel corpo del documento immediatamente prima del tag <BODY>:

<SCRIPT>
<!--
// Questo script NON E' MODIFICABILE e va messo ALLA FINE DEL DOCUMENTO....
                                                   .... immediatamente prima del < / B O D Y >
   var layerWidth=nn?window.innerWidth:document.body.clientWidth;
   var layIE="<DIV ID='testo' STYLE='position:absolute;background:"+bgcolor+";top:"+....
      ....ttop()+";left:0;visibility:visible;width:"+layerWidth+";height:"+AltLayer+"')></DIV>";
   var layNN="<LAYER NAME='testo' position='absolute' bgColor='"+bgcolor+"' left='0' ....
      ....top='"+ttop()+"' width='"+layerWidth+"' height='"+AltLayer+"'  ....
      ...visibility='show' CLIP='0,0,"+layerWidth+","+AltLayer+"'>  </LAYER>";
   document.writeln(nn?layNN:layIE);
   var laytext=nn?document.layers.testo:document.all.testo;
//-->
</SCRIPT>

Questa prima parte serve semplicemente a scrivere nel documento il livello che poi lo script posizionerà ed aggiornerà durante il funzionamento.
La parte seguente va fra i tag <HEAD> e </HEAD>:

<SCRIPT>
<!--
// --------------------------------------------//
// ------  Inizio Sezione Configurabile  ---- //
// --------------------------------------------//
// Stringa che verra' scrollata...
var stringa = "Netscape and Netscape Navigator ...[cut]... registered in other countries.";
var car = 100; // Caratteri visualizzati della stringa...
var bgcolor="#ffff00"; // Colore di sfondo del layer
var FontBegin="<FONT FACE='verdana' COLOR='#dd0000'><B>";
var FontEnd="</B></FONT>";
var AltLayer=18 // Altezza del layer (marquee)
// --------------------------------------------//
// ------  Fine Sezione Configurabile ---- //
// --------------------------------------------//

var nn=document.layers?true:false;
var layIE=null;layNN=null;laytext=null;timer1=null;timer2=null;pos=0;

function riposiziona()
   {
   nn?laytext.top=ttop():laytext.style.top=ttop();
   }

function ttop()
   {
   return nn?window.pageYOffset+window.innerHeight-AltLayer: ....
      ...document.body.scrollTop+document.body.clientHeight-AltLayer;
   }

function scrolla()
   {
   stringa.length-pos==0?pos=0:pos++;
   str=stringa.substr(pos,car);
   str.length<car?str+="  "+stringa.substring(0,97-str.length):null;
   if (nn)
      {
      laytext.document.write("<PRE><CENTER> "+FontBegin+str+FontEnd+"</CENTER></PRE>");
      laytext.document.close();
      }else
      laytext.innerHTML="<PRE><DIV ALIGN=center> "+FontBegin+str+FontEnd+"</DIV></PRE>";
   }

function inizia()
   {
   timer1=setInterval("riposiziona()",25);
   timer2=setInterval("scrolla()",100);
   }
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="inizia();" onResize="nn?self.location.reload():null;">
. . .
. . .

Nella prima parte ("Sezione Configurabile") sono contenute le variabili da impostare, e cioè:

la stringa che verrà scrollata;
i caratteri visualizzati;
il colore di sfondo del layer
i due tag che definiscono lo stile del testo, sono due variabili da riempire come se scriveste una normale pagina HTML (v. esempio)
l'altezza del layer (questo valore in relazione all'altezza stabilita per il font).

      Seguono alcune variabili di servizio e le funzioni coinvolte.

      Cominciamo... dall'ultima: inizia() è triggerata dall'event-handler nel <BODY>: onLoad="inizia();" che si preoccupa di iniziare il funzionamento dello script quando il documento è caricato.
      Contiene due timers: il primo chiama la funzione riposiziona() ogni 25 millisecondi. Serve a seguire lo scorrimento della pagina. È un trucchetto dato che non esiste un event-handler collegato alle barre di scorrimento del browser.
      Ogni 25 millisecondi, quindi questa funzione si preoccupa di aggiornare la proprietà top dei layers alla posizione ritornatagli dall'altra funzione ttop() che effettivamente fa i conti:
            pageYOffset per Netscape e document.body.scrollTop per Explorer sono proprietà dell'oggetto window e restituiscono l'ascissa, in pixels, della parte visibile della pagina;
            ,window.innerHeight per Netscape e document.body.clientHeight per Explorer restituiscono l'altezza, sempre in pixel, dell'area visibile del browser.
      alla somma di questi due valori sottraiamo l'altezza del layer ed otteniamo il valore di top, quindi l'ascissa, in pixel, del layer.

      Il più è fatto. Ora resta solo da scrollare il testo.
      A questo pensa l'ultima funzione. In inizia() viene attivato un altro timer (timer2) che ogni 100 millisecondi esegue la funzione scrolla().
      Quest'ultima funzione estrae 100 caratteri dalla stringa da scrollare e ne scrive il contenuto nel layer.
      Ancora una differenza di funzionamento fra NN ed IE. Per il primo, i layers vengono considerati come documenti, quindi facciamo un document.write() dei valori interessati (centratura e variabili di formattazione oltre alla stringa estratta) ed un document.close() per chiudere il documento.
      Per IE basta usare il metodo innerHTML() per scrivere nel layer i tag HTML che ci servono.

      L'ultima cosa da vedere è onResize="nn?self.location.reload():null; che abbiamo messo nel <BODY>.
      Serve solo per Netscape. Dato che al ridimensionamento della finestra gli oggetti vengono distrutti, per impedire che il browser impazzisca (... o che "si pianti" se volete!) basta ricaricare la pagina.

Non sparate sul pianista!

Questo script è stato il mio primo esperimento con i Layers/DIV. Sicuramente lo script può essere migliorato, ogni suggerimento è bene accetto! :-)

Riccardo

	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à!!!