[JavaScript] TextScroller 1.0

Text Scroller è una semplice libreria JavaScript che permette di effettuare lo scrolling del testo di un elemento di una magina web. E’ possibile in questo modo creare un effetto "titoli di coda" o mostrare le ultime news in successione, senza dover usare troppo spazio di pagina.

Il contenuto dell’elemento prescelto verrà fatto scrollare in maniera ripetuta. Lo scrolling si arresta all’evento onmouseover, ovvero quando l’utente passa con il mouse sul testo. Questo permette di inserire permalink ed evitare che l’utente debba rincorrersi.

Come usare TextScroller?

E’ semplicissimo. Scaricate il file textScroller.js contenuto in questo archivio. All’interno troverete anche un esempio live.

Impostare lo script

Con il vostro editor di testo preferito aprite il file e modificate le preferenze seguenti:

  var orientamento = ”;
  var id = ”;
  var parent = ”;
  var duration = ;
  var l = ;
  var h = ;
  var w = ;

 

var orientamento (array)

Può assumere i valori seguenti:

  • TD: scorrimento dall’alto al basso;
  • DT: scorrimento dal basso in alto;
  • RL: scorrimento da destra a sinistra;
  • LR: scorrimento da sinistra a destra;

var id (string)

L’id dell’elemento che contiene il testo da scrollare.

var parent (string)

L’id dell’elemento padre del precedente. Ovvero l’elemento all’interno del quale id scrollerà.

var duration (integer)

Valore di durata in millisencondi di ogni spostamento. Più basso è il valore, più veloce risulterà l’effetto movimento del testo.

var l (boolean)

Se è impostato uguale ad uno attiva dei controlli automatici di stile per coordinare al meglio i due elementi della pagina interessati ed il tipo di scorrimento prescelto.

var h (integer)

Fissa l’altezza dell’elemento parent. In questo modo decidete quanto deve essere alto lo scrolling.

var w (integer)

Fissa la larghezza dell’elemento parent. In questo modo decidete quanto deve essere largo lo scrolling.

Impostare il codice HTML

Nei tag del head della pagina in cui volete usare la libreria, inserite:

<script type="text/javascript" src="textScroller.js"></script>

Tenendo a mente di dare le giuste coordinate del file js.

All’interno del tag body

<body onload="letsGo()">

All’interno della pagina dovranno esserci due elementi contraddistinti dagli id di id e parent della funzione, l’uno dentro l’altro, come nell’esempio.

<div id="parent">
  <div id="id">
    Testo da scrollare
    Testo da scrollare
    Testo da scrollare
  </div>
</div>

Un esempio volante?

Ovviamente 🙂

9 thoughts on “[JavaScript] TextScroller 1.0”

  3. dovresti renderlo xhtml compatibile (non ho controllato ma a naso mi pare pecchi) e degradabile se JS è disattivato.

  4. @ Chris: thanks 🙂

    @ NicK: grazie per la segnalazione! Errore stupido, corretto! Me lo puoi testare per favore?! Io ho IE4Linux, ma mi fido di più su una macchina windows.

    @ Tambu: xhtml valid! Per degradarlo lo si può fare solo via css o se mi suggerisci un modo migliore ti ringrazio.

  5. @ Tambu: degradato!
    Fisso altezza e larghezza del parent via javascript, se questo è disattivato si innescano le direttive di css relative e non va in conflitto con il resto del testo.

    Penso sia una buona soluzione.

Comments are closed.