Anders är en webbutvecklare och hårdrockare som gillar brädspel, kaffe och öl.

Detta är ett arkiverat inlägg, som importerats hit för referens. Det kan se konstigt ut och innehålla utdaterad information eller inaktuella åsikter.

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.