Mantenere fisso un layer nonostante lo scroll in Javascript

Autore: Luca Ruggiero | Tell a Friend Corso Java Impara a programmare col linguaggio OOP della Sun. Corso Javascript e DHTML Impara a creare controlli ed animazioni! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

Comparso su HTML.it il 13 Novembre 2002 - E' vietata la riproduzione, anche parziale, senza esplicito consenso dell'autore

~ lukeonweb.net ~ Guardate in basso a destra sul vostro monitor... no, non l'orologio, lo vedo che sono le 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 language="javascript1.2" src="No_Scroll_Layer.js"></script>

<span id="TextScroll" style="position: Absolute; left: 0px; top: 0px; visibility: Hidden;">
   MA CHE CARINO CHE E' QUESTO EFFETTO :-)
</span>

var larghezza = "";
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;

var larghezza = "";
var altezza = "";

if (document.all) { ...

if (document.layers) { ...

// 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";
}

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;
}

function TextScroll_NN() {
   document.TextScroll.left = pageXOffset + window.innerWidth - larghezza - 10;
   document.TextScroll.top = pageYOffset + window.innerHeight - altezza - 10;
}

window.onload = Inizializza;

TAGS - javascript, layer, scroll, dhtml, monitor, effetto dhtml