En enkel ticker med JavaScript

En ticker är en liten remsa som skriver ut klickbara rubriker, gärna animerat och ofta i nyhetssammanhang som för att puffa innehåll. Jag skrev nyligen ett sådant script, och tycker att det är värt att dela med sig av. Min variant skriver ut en rubrik i taget, med ett tecken i taget som för att likna ett telegram. Jag har följt best practices så gott jag kunnat, och har till min hjälp använt det mycket hjälpfulla paketet Dlite.

Några huvudegenskaper:

• Appliceras med Progressive Enhancement.
• Full fallback utan JavaScript med hjälp av CSS.
• Fungerar för flera tickers på samma sida.
• Rubrik på ticketen kan slopas vid behov.
• Kräver en lista (ol eller ul) med länkar
• Tar en Elementreferens som argument, t ex document.getElementById('ticker')

Exempel på användning

var tickerElm = document.getElementById('ticker');
new Ticker( tickerElm ).init();

// dlite syntax
var tickers = elmsByClass('ticker');
for(var i=0, max=tickers.length; i<max; i++){
   new Ticker( tickers[i] ).init();
}

Ta en titt på scriptets Exempelsidor för att se ticketen verka, eller kika direkt på källkoden. Prova gärna att slå av JavaScript och CSS för att se hur dessa tickers nedgraderas.