NewsTicker aneb prúžok s bežiacim textom

Dlho sme bojovali proti neštandardným elementom, ktoré si v dobách „Browser Wars“ vymýšľali tvorcovia prehliadačov Explorer a Netscape. Jedným z nich bol aj MARQUEE. Niekedy však nastávajú situácie, kedy na stránkach potrebujeme mať prúžok s bežiacim textom. Ako ho urobiť tak, aby narobil viac úžitku než škody, si povieme v tomto článku.

Čo vlastne chceme?

V prvom rade sa musíme zamyslieť nad tým, čo vlastne chceme:

• Chceme urobiť jednoduchý newsticker, v ktorom sa bude pohybovať niekoľko textových správ sprava doľava.
• Chceme aby jeden dokument mohol obsahovať neobmedzené množstvo newstickerov.
• Keď sa textová správa dostane na koniec newstickeru, mala by sa na chvíľu zastaviť a až potom odísť.
• Chceme mať možnosť ovplyvniť rýchlosť pohybu textu a dĺžku pauzy.
• Skript by mal fungovať v prehliadačoch podporujúcich štandardy, pričom informácie v ňom zobrazované by mali byť prístupné vo všetkých prehliadačoch.
• Forma by mala byť oddelená od obsahu. Skript by mal byť čo najviac oddelený od dokumentu.

Je dosť dôležité, aby sme sa pred písaním skriptu vždy zamysleli nad tým, čo od neho očakávame. Vďaka tomu budeme mať už vopred dobrú predstavu o tom, čo budeme potrebovať a ako budeme postupovať. Pokiaľ vás výsledok nášho snaženia zaujíma už teraz, pozrite si malú ukážku.

Ako to urobíme?

Budeme vychádzať zo zoznamu s odrážkami. Je jednoduchý, zobrazí sa korektne vo všetkých prehliadačoch a presne vystihuje štruktúru, ktorú budeme potrebovať – element UL reprezentuje držiak (rámček), v ktorom sa pohybujú jednotlivé správy (element LI):

<ul>
  <li>prva sprava</li>
  <li>druha sprava</li>
  <li>tretia sprava</li>
</ul>

Zoznam naformátujeme pomocou CSS. Aby sme zbytočne nerozhodili vzhľad stránky v archaických prehliadačoch (v ktorých náš skript nebude fungovať), uložíme definície CSS do samostatného súboru („newsticker.css“) a ten prilinkujeme pomocou metódy @import:

<style type=“text/css“ media=“screen“>@import url(newsticker.css);</style>

Samotný skript tiež uložíme do samostatného súboru („newsticker.js“) a k dokumentu ho pripojíme štandardným spôsobom:

<script type=“text/javascript“ src=“newsticker.js“></script>

Postup bude celkom jednoduchý. Najprv si pomocou CSS naformátujeme zoznam. Jednotlivé správy umiestnime do držiaku absolútne a animovať ich budeme pomocou zmeny CSS atribútu left v pravidelných intervaloch. Pre lepšiu predstavu o tom, ako to funguje, je pripravená ilustrovaná verzia skriptu, kde to všetko pekne vidno.

Teória absolútnej relativity

Element UL si označíme triedou newsticker (<ul class="newsTicker">). Keďže chceme mať možnosť umiestniť do jedného dokumentu viac newstickerov, je vhodnejšie použiť triedu (class) namiesto unikátneho ID. Zadefinujeme si základný vzhľad držiaku. Dajme tomu, že bude rámovaný jednopixelovou čiarou. To je čisto kozmetická záležitosť. Ďalej by mal mať výšku asi tak 1,5 em, aby sa nám tam v pohode vošiel jednoriadkový text. Čo je však dôležité, je schovanie pretečeného obsahu (overflow). Chceme totiž, aby text, ktorý práve nie je v držiaku, nebolo vidno (v opačnom prípade by nám tie texty poletovali hore-dole po stránke a newsticker by nemal veľmi zmysel). A keďže máme naformátovaný odrážkový zoznam (kvôli starším prehliadačom), ale chceme ho zobrazovať ako normálne texty, zrušíme odrážky a rôzne defaultné odsadenia (padding, margin). Naša definícia teda bude vyzerať asi takto:

ul.newsTicker {
  border: 1px solid #000;
  height: 1.5em;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

Chýba nám tam však ešte jedna veľmi dôležitá vec. Aby sme mohli jednotlivé správy pohodlne animovať, potrebujeme ich umiestniť absolútne vzhľadom k držiaku. Nie je to nič komplikované, ale veľa ľudí má o absolútnom pozicovaní mylné predstavy. Myslia si totiž, že absolútna pozícia elementu sa vzťahuje k ľavému hornému rohu dokumentu. Nie je to pravda a špecifikácia CSS2 nám to potvrdí. V modele absolútneho pozicovania je blok pozicovaný vzhľadom k rodičovskému bloku.

V praxi to však vyzerá tak, že pokiaľ rodičovský blok nemá zadefinovaný typ pozicovania (t.j. relative alebo absolute), neovplyvňuje polohu absolútne pozicovaného bloku. Takže pokiaľ nášmu držiaku pridáme ešte definíciu position: relative;, sme hotoví. Náš newsticker bude normálne umiestnený v toku dokumentu a jednotlivé správy v ňom budú napozicované správne.

Vzhľad správ

Naformátovanie jednotlivých správ bude jednoduché. Už sme si povedali, že budú pozicované absolútne. Ďalej im zrušíme (podobne ako u držiaku) okraje a odsadenia vyplývajúce z toho, že pôvodne obsahovali odrážky. Nakoniec ešte vypneme zalamovanie textu (vytváralo by to veľmi škaredé efekty):

ul.newsTicker li {
  padding: 0;
  margin: 0;
  position: absolute;
  white-space: nowrap;
}

Začíname skriptovať

Newsticker máme naformátovaný. Keď sa na výsledok nášho snaženia pozrieme teraz, uvidíme, že v rámčeku sú jednotlivé správy naukladané jedna na druhú a čakajú len na to, aby s nimi niekto začal hýbať. Vpred!