| ||||||||||||||||
 StaffScripts Elementi HTML fissi nella pagina | |||||||||||||||||||||||||
| Autore: Riccardo | Data: 09/01/2002 | Downloads: 1249 | Voto: 3,3/5 | Download | P r o v a | ||||||||||||||||||||
|
Elementi HTML fissi nella pagina
Uno script abbastanza semplice che mi permette però di accontentare alcune richieste ricevute per e-mail negli ultimi mesi: come avere un elemento della pagina sempre visibile, anche a seguito dello scrolling.
Nell'esempio ho scritto la data ed ora correnti, ma nulla vieta, modificando opportunamente le caratteristiche del livello, di usarlo per rendere sempre visibili un'immagine, link, e comunque qualsiasi altra cosa vi venga in mente, il risultato sarà abbastanza simile al menu che usa Geocities. Elemento fondamentale dello script è un livello che inseriremo nel documento; questa è la sintassi che ho usato io: <DIV ID="testo" STYLE="position:absolute; top:1; left:1; width:160; height:16; clip:rect(0,160,16,0); visibility:hidden"> </DIV> assolutamente banale: è posizionato in modo assoluto alle coordinate 1,1 della finestra, resta invisibile finché il documento non viene caricato. I valori cui fare attenzione sono ovviamente WIDTH, HEIGHT e CLIP che dovranno essere modificati opportunamente secondo il contenuto che inserirete nel livello. Nel nostro caso il livello non contiene nulla (solo uno spazio) perchè la data viene scritta dinamicamente dallo script, altrimenti potrete inserirci semplicemente una tabella ed eliminare la funzione scrivi() che vedremo fra poco. Come succede spesso quando si usano i livelli, nel <BODY> ci sono due event-handler: onLoad() e onResize(): <BODY onLoad="inizia();" onResize="self.location.reload()"> il primo serve ad inizializzare lo script, leggendo i livelli e facendo partire le funzioni, il secondo serve come al solito per Netscape 4.x per forzarlo a ricaricare la pagina se la finestra viene ridimensionata, dato che in tal caso gli oggetti vengono distrutti. Veniamo allo script. All'inzio troviamo due array che contengono semplicemente i testi relativi ai mesi ed ai giorni della settimana, che potrete modificare a vostro piacimento, a condizione però di modificare anche le caratteristiche WIDTH e CLIP del livello in modo che il contenuto sia visibile. Ovviamente servono solo nel mio esempio, se usate un contenuto fisso potete tranquillamente eliminarli. La riga successiva contiene semplicemente la definizione delle variabili principali che sono un flag (nn) che ci permetterà di usare la giusta sintassi prevista per il DHTML di Netscape ed Explorer, una variabile (laytext) in cui depositeremo "l'oggetto livello", un'altra che valorizzeremo all'onLoad() della pagina con la larghezza del livello, ed un'ultimo flag (NS6) che useremo solo per Netscape6 per leggere le il valore di scrolling del documento. Segue la funzione principale dello script. riposiziona(), eseguita ogni 25 millisecondi grazie al setTimeout() alla fine che la richiama, si occupa di individuare la larghezza ed altezza della finestra corrente, il numero di pixel di cui eventualmente è stata scrollata (in orizzontale e verticale) e riposizionare di conseguenza il livello. La sintassi usata forse risulterà più chiara scritta in questo modo: function riposiziona()
{
if (nn)
laytext.top=window.pageYOffset;
else
if (NS6)
laytext.style.top=window.scrollY;
else
laytext.style.top=document.body.scrollTop;
if (nn)
laytext.left=window.innerWidth+window.pageXOffset-layer_width;
else
if (NS6)
laytext.style.left=window.innerWidth+window.scrollX-layer_width;
else
laytext.style.left=document.body.clientWidth+document.body.scrollLeft-layer_width;
setTimeout("riposiziona()",25);
}
La sintassi usata è ovviamente diversa per le proprietà "top" e "left" del documento. Infatti mentre per la posizione verticale dobbiamo semplicemente posizionare il livello nel punto più alto della finestra e per far questo ci basta sapere di quanto è stata scrollata, per quella orizzontale dobbiamo tener conto della sua larghezza per posizionarlo un po' più a sinistra e quindi dobbiamo sapere quanto è larga la finestra, aggiungerci l'ammontare dello scrolling, e poi sottrarre la larghezza del livello, altrimenti verrebbe posizionato oltre il bordo destro del documento. Saltiamo un attimo la funzione successiva (scrivi()) ed andiamo a vedere velocemente l'ultima. inizia() è la funzione eseguita all'onLoad() del documento. La prima operazione che fa è assegnare alla variabile laytext il livello, ovviamente con sintassi adatta al browser su cui sta girando lo script, poi il livello viene reso visibile, e ne viene letta la larghezza. Notate che ho dovuto aggiungere 20 pixel alla larghezza del livello per Netscape: il motivo è semplice, avendo usato degli stili per scrivere il contenuto, la larghezza del testo risultante è leggermente diversa fra Netscape 4 e gli altri browser. Quest'aggiunta è sufficiente per compensare la larghezza. Ovviamente toglierete questa costante se il livello serve solo per visualizzare un'immagine o comunque qualsiasi altra cosa che abbia delle dimensioni sicuramente fisse. Fatte queste tre operazioni vengono eseguite le due funzioni principali: riposiziona() che sistema il livello al posto giusto e poi lo mantiene li, e scrivi() che nel nostro caso scrive nel livello il contenuto. Di quest'ultima funzione potrete fare a meno se il contenuto del livello è fisso e non variabile come nel mio caso (data ed ora correnti aggiornate ogni secondo). L'ultima funzione infatti è quella che si occupa di leggere la data e l'ora e scriverle nel livello. Non mi dilungherò più di tanto su questa funzione, la prima parte è semplicemente riciclata dal tutorial sull'oggetto Date(), mentre la seconda parte è una sintassi che abbiamo già abbondantemente visto e discusso in tanti altri script. | |||||||||||||||||||||||||
| |||||||||||||||||||||||||
| Per navigare correttamente il sito è necessario abilitare i cookies. |
| Enjoy Open Source! |
Stampa
Segnala 
Preferiti 
