DHTML - Scroll-ovanje teksta

Od verzije 3 u Internet Explorer-u je veoma lako postići scroll-ovanje teksta, zahvaljujući tagu koji podržava ovaj efekat. To je tag <marquee>. Potrebno je samo da ubacite neki tekst unutar taga i sve će raditi kako treba:

<marquee>Ovo je tekst 

koji ce scroll-ovati.

</marquee>

Takođe, od verzije IE4,

moguće je u tag <marquee>,

ugnezditi i druge HTML tagove.

<marquee><big>Ovo je VELIKI tekst koji ce scroll-ovati.</big></marquee>

Sve je ovo u redu u IE4, ali šta je sa Netscape-om. Netscape ne poseduje tag kakav je "marquee", tako da se tekst koji se nađe u ovom tagu neće "kretati". Ali ovo možemo da predupredimo malom JavaScipt funkcijom.

Pošto u Netscape Navigator-u ne postoji tag za scroll teksta, iskoristićemo jedan drugi tag - tag "layer" (sloj) - koji Netscape podržava. U stvari kreiraćemo novi layer u kome će se nalaziti samo tekst, i dodavanjem kretanja sloju, omogućićemo efekat scroll-ovanja na našoj stranici. Tekst koji se nalazi na novom sloju biće u liniji sa celokupnom stranicom uz pomoć taga <ilayer>:

<ilayer name="scroll1" width=300 height=20>
<layer name="scroll2">Ovo je tekst koji scroll-uje.

Ovo je tekst koji scroll-uje....</layer>
</ilayer>

Potom ćemo koristeći jednostavan JavaScript povećavati levu poziciju sloja, i na taj način dobiti efekat kretanja. Tag <ilayer> definiše "scroll prozor" (kao na slici), tj. fizički prostor sloja koji se vidi (zeleni pravougaonik). Tag <layer> definiše sam prostor za ukupni tekst koji će da scroll-uje i na slici je predstavljen belim pravougaonikom sa crnim ivicama. Script će pomerati beli pravougaonik kontinualno na levu stranu, sve do kraja teksta, i onda će krenuti iz početka. Evo i same JavaScript funkcije:

function scrollit (){
       //duzina teksta u scroll sloju (beli pravougaonik)
scrollerlength=document.scroll1.document.scroll2.document.width
if (document.scroll1.document.scroll2.left >= scrollerlength*(-1)){
      //smanjenje leve pozicije za 6 piksela
     document.scroll1.document.scroll2.left-=6
     setTimeout("scrollit()",100)
}
else {
      //ukoliko je scroll layer dosao do kraja, resetuje se pozicija
     document.scroll1.document.scroll2.left=300
      //i scroll-ovanje krece iz pocetka
      scrollit()
}
}