~ HTML.it ~
Guardate in basso a destra sul vostro monitor... no, non l'orologio, lo vedo che sono le
20:24 !!!
un po' più in alto... leggete una scritta rossa in corsivo? bene... provate, prima di continuare a leggere, a scrollare un po la pagina con la barra di scorrimento... vedete ancora la scritta?
Se state utilizzando Microsoft Internet Explorer o Netscape Navigator immagino di si!!!
Perdonatemi per questo "mistero" iniziale, ma sono ORE che sto pensando ad una descrizione per questo effetto Dhtml... evidentemente la giornata non è favorevole!!!
Bene, prendiamo due piccioni con una fava! impareremo ad utilizzare una serie di utili comandi che il JavaScript utilizza per la realizzazione di effetti in Dhtml, e lo faremo realizzando questo piacevole, e perchè no, in molti casi anche utile effetto.
Creiamo un file JavaScript e chiamiamolo No_Scroll_Layer.js e richiamiamolo su ogni pagina in cui vogliamo ottenere l'effetto con l'apposito comando di riferimento ad un file esterno:
</script>
Nelle pagine posizioneremo un layer (un livello). Non importa se si tratta di un <div> o di uno <span>. Il mio consiglio è quello di utilizzare il secondo per evitare problemi di ritorno a capo. Per il posizionamento assoluto utilizzeremo un CSS. Ecco il codice per la formattazione dell'effetto.
<span id="TextScroll" style="position: Absolute;left: 0px; top: 0px; visibility: Hidden;">
MA CHE CARINO CHE È QUESTO EFFETTO :-)
</span>
Nel layer potete inserire quello che vi pare, compatibilmente con gli elementi e la grafica della pagina: potreste ad esempio inserirvi un menu discreto e non troppo pesante, una piccola immagine, un logo, o qualsiasi altra cosa vi piaccia.
Esaminiamo le due impostazioni che abbiamo attrbiuito al layer:
- un identificativo univoco id
- una serie di stilizzazioni CSS
Non ci resta che dare un'occhiata di carattere generale allo script nella sua integrità, poi con calma lo scaricheremo, lo spezzetteremo e lo esamineremo nelle sue parti fondamentali.
Ecco il codice dello script:
var altezza = "";
function Inizializza() {
if (document.all) {
larghezza = TextScroll.offsetWidth;
altezza = TextScroll.offsetHeight;
setInterval("TextScroll_IE()", 1);
TextScroll.style.visibility = "Visible";
}
else if (document.layers) {
larghezza = document.TextScroll.document.width;
altezza = document.TextScroll.document.height;
setInterval("TextScroll_NN()", 1);
document.TextScroll.visibility = "Show";
}
}
function TextScroll_IE() {
TextScroll.style.pixelLeft = document.body.scrollLeft + document.body.clientWidth - larghezza - 10;
TextScroll.style.pixelTop = document.body.scrollTop + document.body.clientHeight - altezza - 10;
}
function TextScroll_NN() {
document.TextScroll.left = pageXOffset + window.innerWidth - larghezza - 10;
document.TextScroll.top = pageYOffset + window.innerHeight - altezza - 10;
}
window.onload = Inizializza;
La sua struttura è molto semplice e potremmo dividerla in quattro pezzi: il primo in cui dichiariamo le variabili relative all'altezza e alla larghezza e le impostiamo inizialmente vuote:
var larghezza = "";
var altezza = "";
La prima delle tre funzioni proposte, come il nome stesso lascia ad intendere (Inizializza()
if (document.all) { ...
e...
if (document.layers) { ...
Esaminiamole entrambe.
// Verifica che venga richiamata la funzione per Internet Explorer
if (document.all) {
// La proprietà offsetWidth imposta la larghezza "fuori campo"
larghezza = TextScroll.offsetWidth;
// La proprietà offsetWidth imposta l'altezza "fuori campo"
altezza = TextScroll.offsetHeight;
// Dopo un millesimo di secondo lasciamo partire la funzione per IE che vedermo tra breve
setInterval("TextScroll_IE()", 1);
// Rendiamo visibile il layer che ci interessa
TextScroll.style.visibility = "Visible";
}
La struttura della funzione di controllo per Navigator è strutturata in maniera analoga a quella per Explorer: cambiano solo in maniera minima la forma sintattica dei controlli da effettuare. Nella tabella successiva riporto le differenze tra le due forme in maniera schematica:
|
È possibile notare che le differenze sono notevoli nella forma nelle prime due righe della tabella, mentre è minima quella sullo visibilità dello style dell'elemento layer, ovvero Visible (IE) e Show (NN).
Nella temporizzazione invece si fa riferimento alle funzioni compatibili con i rispettivi browser, TextScroll_IE e TextScroll_NN.
Passiamo alle funzioni vere e proprie appena citate. Iniziamo con quella per Internet Explorer:
function TextScroll_IE() {
// Imposta la distanza dal bordo destro, distanziando il layer di 10 pixel
TextScroll.style.pixelLeft = document.body.scrollLeft + document.body.clientWidth - larghezza - 10;
// Imposta la distanza dal bordo inferiore, distanziando il layer di 10 pixel
TextScroll.style.pixelTop = document.body.scrollTop + document.body.clientHeight - altezza - 10;
}
Le medesime operazioni svolge la funzione ottimizzata per Navigator, propongo il codice senza commenti, valgono quelli della precedente:
function TextScroll_NN() {
document.TextScroll.left = pageXOffset + window.innerWidth - larghezza - 10;
document.TextScroll.top = pageYOffset + window.innerHeight - altezza - 10;
}
Richiamiamo il tutto con l'evento onload
window.onload = Inizializza;
Et voilà! L'effetto è servito. Ora costruite la vostra pagina con le istruzioni che vi abbiamo fornito all'inizio e adattatela alle vostre esigenze.
