Simulazione del tag <marquee>

Il tag <marquee>, con Internet Explorer, permette di far muovere quello che si trova al suo interno (sia testo che immagini. Più in generale, oggetti) all'interno dello schermo. Di default gli oggetti si muovono da destra a sinistra, anche se tramite l'attributo direction si può far scorrere verso destra oppure fargli fare un ping-pong tra i lati dello schermo. Con questo javascript cercheremo di rendere disponibile anche agli utenti di Navigator questa funzione.
Partiamo con il più semplice, riproducendo quello che succede di default con il tag <marquee>

<div id="scrscr" style="width:80px"> Io scorro </div> <script language="javascript"> var scrval=0; var larg_schermo = screen.availWidth; function scorre() { if (scrval>larg_schermo) {scrval=0} scrscr.style.position='absolute'; scrscr.style.right= scrval; scrval+=2; } setInterval("scorre()", 1); scorre(); </script>

Per prima cosa si crea l'oggetto che dovrà scorrere con div e gli assegnamo un id univoco per farlo riconoscere ai metodi javascript. Per ottenere un buon effetto è bene impostare una larghezza per l'oggetto. Per farlo basta far vedere il bordo dell'oggetto con style="border:1px solid white" ad esempio, e impostare una larghezza in base alla larghezza dell'oggetto da far scorrere. Trovata la misura giusta basta cancellare la definizione del bordo e lasciare quella della larghezza. Fatto questo si inizia lo script stando ben attenti a lasciare la variabile srcval=0 FUORI dalla funzione (altrimenti tutte le volte che viene richiamata la funzione scorre() la variabile assume il valore zero e la scritta non si muove). La varibile larg_schermo può essere inserita anche dentro la funzione, ma in questo caso verrebbe inutilmente richiamato il metodo screen.availWidth che invece basta chiamare una volta sola (la risoluzione in larghezza dello schermo non cambia di certo mentre lo usate!!!). Definire larg_schermo in questo modo invece che, ad esempio, impostarla a 800 o a 1200, garantisce che questo script funzioni bene su tutti gli schermi, indipendentemente dalla loro risoluzione. Fatto questo si arriva alla funzione che fa muovere l'oggetto. Si controlla il valore di scrval e se è maggiore della risoluzione massima dello schermo la si imposta di nuovo a zero (questo serve per farla ricomparire una volta che è uscita dallo schermo). Subito dopo si impostano due valori dell'attributo style associato all'oggetto scrscr, ovvero position='absolute' (attenzione! absolute deve essere tra apici oppure doppi apici perché è una stringa. Se viene scritto senza viene interpretato come una variabile e, non essendone dichiarata una con quel nome, si genera un errore). Il secondo attributo impostato è width=scrval (questo senza apici perché è proprio una variabile, come specificato all'inizio). Questo è il pezzo portante di tutta la funzione, perch´ assegna ogni volta che scorre() viene chiamata un nuovo valore all'attributo che controlla la distanza dal lato destro dello schermo. Dopo di questo, la variabile scrval viene aumentata di due (ovvero si allontana di due pixel dal lato destro dello schermo la scritta, alla successiva chiamata di funzione). Finita la funzione si imposta un intervallo (va bene anche il piccolo intervallo di 1 millisecondo) e infine si richiama la funzione per farla partire.

E questo è il modo di simulare il più semplice degli scorrimenti sullo schermo. In questo caso scorre una scritta ma può scorrere qualsiasi cosa.


Se vogliamo cambiare direzione all'oggetto che scorre bisogna fare qualche calcolo in più e il risultato non è esattamente lo stesso. Vi spiego subito il perché: se lasciamo lo script tale e quale, non appena il bordo sinistro dell'oggetto tocca il margine della finestra, la finestra stessa inizia ad espandersi e lo fa finché il bordo sinistro dell'oggetto non arriva al bordo visibile della finestra (ovvero fino a quando scrval non vale quanto lung_schermo). Durante questo intervallo di tempo, appare una scrollbar orizzontale che si auto-espande, creando un fastidiosissimo effetto (aumentato dal fatto che quando scrval torna a valere zero, la scrollbar scompare). Allora bisogna fare un paio di conti e usare un "trucco", ovvero fare iniziare di nuovo l'animazione un attimo prima che il bordo destro dell'oggetto tocchi lo schermo. Tutto questo casino è dovuto al fatto che come riferimento per posizionare un oggetto, viene preso l'angolo superiore sinistro dell'oggetto stesso. Vediamo come modificare lo script di prima:

<div id="dx" style="width:200px"> Scorro verso destra! </div> <script language="javascript"> var scrval=0; var larg_schermo = screen.availWidth; function scorre2() { if ((scrval>larg_schermo)||((larg_schermo-scrval)<220 )) {scrval=0} dx.style.position='absolute'; dx.style.left= scrval; scrval+=2; } setInterval("scorre2()", 1); scorre2(); </script>

Unico cambiamento all'interno dell'if e nella larghezza dell'oggetto. Dentro l'if si aggiunge la condizione che la larghezza dello schermo meno il valore delle variabile-posizione sia minore di un po' di più della larghezza dell'oggetto. In poche parole significa che l'oggetto scorre fino a che è dentro all'area visibile della finestra (non deve essere proprio la stessa larghezza ma un po' di più altrimenti la scrollbar appare ugualmente!!!). Inoltre per capire meglio la direzione ho anche cambiato più sotto il posizionamento dando la distanza dal bordo sinistro.

Ecco il risultato (ho messo solo questo perché ho notato che se si mettono più script di questo tipo, le scritte vanno più veloci! Non so perché ma non rispettano l'intervallo stabilito!):

Scorro verso destra!

Come avete visto, appena la scritta arriva al bordo destro, scompare e riappare dall'altra parte dello schermo.
Lavorerò un po' di più sullo script per vedere se mi riesce di fare di meglio.

Il rovescio (positivo) della medaglia è che questo ci aiuta nel caso si voglia creare l'effetto ping-pong, ovvero il testo che, arrivato alla fine dello schermo, rimbalza e torna indietro.
Ecco qui lo script che fa al caso nostro:

<div id="scralt" style="width:90;"> ping-pong </div> <script language="javascript"> var inc_dec =0; var lung_scherm = screen.availWidth; direzione = 0; function alternato() { if ( ((lung_scherm-inc_dec)>110)&&(direzione==0) ) { scralt.style.position='absolute'; scralt.style.left = inc_dec; inc_dec+=2; } else if ( ((lung_scherm-inc_dec)==110)&&(direzione==0) ) { direzione=1; } else if ( (inc_dec>0)&&(direzione==1) ) { scralt.style.position='absolute'; scralt.style.left = inc_dec; inc_dec-=2; } else if ( (inc_dec==0)&&(direzione==1) ) { direzione=0; } } setInterval("alternato()",1); alternato(); </script>

Come al solito mettiamo un oggetto che sarà quello che si muove (fate sempre qualche prova per mettere la giusta larghezza. In questo caso la migliore per contenere la scritta è 90 pixel). In seguito inizia lo script. Stesse variabili che tengono conto della larghezza dello schermo e della posizione che l'oggetto deve assumere (gli ho cambiato nome perché due script con variabili uguali lanciati contemporaneamente nella stessa pagina non sono il massimo!) e in più una nuova variabile direzione che tiene conto della direzione in cui va la scritta (se direzione==0 la scritta va a destra, se direzione==1 la scritta va a sinistra). Questa volta la funzione ha quattro istruzioni di controllo, derivanti dai quattro stati che assume la scritta (stai a vedere che studiare le macchine di Turing non è poi così inutile :-D). Gli stati sono questi (corrispondono ai vari if..else if in ordine): Se l'oggetto è più lontano di 110 pixel dal bordo destro (scelto 110 e non 90 per il problema della scrollbar) e direzione è uguale a zero (quindi l'oggetto va verso destra), si applica la posizione indicata da inc_dec e dopo si incrementa di due la stessa. Se invece l'oggetto è distante proprio 110 pixel (punto del cambio di direzione) si imposta soltanto la direzione 1, ovvero verso sinistra. Se, quindi, l'oggetto è più lontano di 110 pixel dal bordo destro e si muove verso sinistra (direzione==1) si aggiorna la posizione e si decrementa di due la variabile inc-dec. Se l'oggetto è posizionato all'estrema sinistra dello schermo , si aggiorna direzione facendolo così tornare verso destra. Successivamente viene dato un intervallo alla funzione e viene richiamata per farla partire.

Eccola qui sotto:

ping-pong

A questo punto mi verrebbe da fare uno script "multifunzione". Ovvero tramite un argomento passato alla funzione quando viene richiamata, stabilire la direzione in cui deve andare...
Beh, un po' di suspence ci vuole, quindi bookmarkate (?!?) questa pagina e tornate a visitarla di nuovo nel prossimo aggiornamento, quando lo script sarà pronto!