Scrollujicí text na stránce pomocí JavaScriptu

15. června 2001

•

Pro dnešní den jsem připravil náročnější skript, pomocí kterého lze vytvořit vlastní scrollovací text, který se dá umístnit kamkoliv do vaší stránky. Tento postup je určen pro pokročilejší znalce JavaScriptu, ale podle tohoto návodu by jej měli vytvořit i čtenáři bez větších zkušeností. Skript byl testován v Exploreru 5 a Netscape 4.51.

Jak jsem již předeslal, jedná se o náročnější skript a tak se raději hned pustíme do práce. Zde si prohlédněte ukázku.

Jako obvykle začněme vytvořením vlastních HTML prvků, se kterými budeme pracovat. Budou to převážně tagy <div>.

<div id="top">
<a href="javascript:;">[scroll up]</a>
</div>
<div id="down">
<a href="javascript:;">[scroll down]</a>
</div>
<div id="scrollArea">
<div id="divContent">
<b>Start</b>
<p> Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</p>
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum
soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim
placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend.
Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe
eveniet ut er repudiand sint et molestia non este recusand.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</p>
<p>Et harumd dereud facilis est er expedit distinct. Nam liber a tempor cum
soluta nobis eligend optio comque nihil quod a impedit anim id quod maxim
placeat facer possim omnis es voluptas assumenda est, omnis dolor repellend.
Temporem autem quinsud et aur office debit aut tum rerum necesit atib saepe
eveniet ut er repudiand sint et molestia non este recusand.</p>
<b>End</b>
</div>
</div>

Prvky div mají definované kaskádové styly. Zde je jejich zdroj:

#top {position:absolute; width:320; left:10; top:10; z-index:1; text-align: right; background-color: #0000FF; }
#down {position:absolute; width:320; left:10; top:270; z-index:1; text-align: right; background-color: #0000FF;}
#scrollArea {position:absolute; width:320; height:240; overflow:hidden; top:30; left:10; clip:rect(0,320,240,0); visibility:hidden}
#divContent {position:absolute; top:0; left:0}

Důležitým stylem je clip prvku scrollArea. Ten v případě absolutní pozice určuje viditelný výřez prvku (top, right, bottom, left). Souřadnice 0;0 je v levém horním rohu. V našem případě bude mít tedy scrollArea viditelný celý svůj obsah. Prvek divContent je umístěn v prvku scrollArea a má vzhledem k němu absolutní souřadnice 0;0. Text, který prvek divContent obsahuje, se ale do prvku scrollArea o velikosti 320×270 bodů nevejde – divContent je delší než scrollArea. Scrollování tedy bude zajištěno vertikálním pohybem prvku divContent. Pokračujme k samotnému skriptu.

Pro kontrolu prohlížeče vytvoříme konstruktor verifyCompatibleBrowser(). Vytvořme též konstruktor ConstructObject(), pomocí kterého vytvoříme objekty, se kterými budeme ve skriptu pracovat …

function verifyCompatibleBrowser(){
this.ver=navigator.appVersion; //kontrola verze browseru
this.dom = document.getElementById?1:0; //podpora document object model
this.ie5 = (this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; //internet explorer 5+
this.ie4 = (document.all && !this.dom)?1:0; //internet explorer 4
this.ns5 = (this.dom && parseInt(this.ver) >= 5) ?1:0; //netscape 5
this.ns4 = (document.layers && !this.dom)?1:0; //netscape 4
return this
}
bw = new verifyCompatibleBrowser() //objekt browser

function ConstructObject(obj,obj2){
obj2=(!obj2) ? “ : ‚document.’+obj2+‘.‘
this.objekt = bw.dom ? document.getElementById(obj) : bw.ie4 ? document.all[obj] : bw.ns4 ? eval(obj2+’document.’+obj) : 0;
this.css = bw.dom ? document.getElementById(obj).style : bw.ie4 ? document.all[obj].style : bw.ns4 ? eval(obj2+’document.’+obj) : 0;
this.scrollHeight = bw.ns4 ? this.css.document.height : this.objekt.offsetHeight;
this.clipHeight = bw.ns4 ? this.css.clip.height : this.objekt.offsetHeight;
this.up = MoveAreaUp; this.down = MoveAreaDown;
this.MoveArea = MoveArea;
this.y;
return this
}

Protože naším požadavkem je, aby skript fungoval ve více prohlížečích, vytvoříme objekt bw pomocí konstruktoru verifyCompatibleBrowser(), který bw přiřadí logické vlastnosti podle jedinečných vlastností prohlížečů. Tyto vlastnosti budeme testovat v ConstructObject().

Vlastnosti objektu se definují pomocí klíčového slova this, ale o tom už na Intervalu bylo psáno dříve. Náš konstruktor tedy vytváří objekt s vlastnostmi:

objekt – název objektu ve stránce, druhý parametr funkce, je zde kvůli Netscape, který v názvu objektu (HTML elementu) zohledňuje umístění v jiném prvku
css – kaskádový styl objektu (v Netscape 4 nesmí být za jménem objektu vlastnost .style)
scrollHeight – vertikální rozměr objektu (IE neumi vlastnost .document.height)
clipHeight – vertikální rozměr viditelné části (IE neumi .clip.height)
MoveArea – metoda MoveArea, která bude provádět přemístění objektu (viz. níže)
up a down – metody MoveAreaUp a MoveAreaDown které budou pohybovat objektem (viz. níže)
y – vlastnost, které budeme přiřazovat vertikální souřadnici objektu (viz. níže) Vlastnosti jsou určené podle verze a typu prohlížeče. Je zde použitá zřetězená podmínka (a)?x :y – v případě, že a je pravda vrací x, v jiném případě y. Nebudu zde popisovat všechny vlastnosti, protože fungují velice podobně, popíšu jen některé, abyste si udělali obrázek, jak vlastně pracují. Např. vlastnost scrollHeight – protože Netscape používá pro určení rozměru vlastnost style.clip.height – tak v případě, že prohlížeč je Netscape (bw.ns4 je true), dostane scrollHeight tuto hodnotu, v jiném případě dostane offsetHeight, kterou podporuje naopak Internet Explorer. Některé vlastnosti jsou přiřazovány pomocí funkce eval(), ta vyhodnotí řetězec (jakýkoli) a vrací hodnotu.

Jako další vytvoříme funkci inicializuj(), kterou budeme volat při otevření stránky (událost onLoad tagu <body>). Ta vytvoří objekty pomocí našeho konstruktoru constructObject().

var initialised;
function inicializuj(){
objScrollArea=new ConstructObject(‚scrollArea‘) ;
objDivContent=new ConstructObject(‚divContent‘,’scrollArea‘); //prvrek divContent je umisten ve scrollArea
objDivContent.MoveArea(0);
objScrollArea.css.visibility=’visible‘;
initialised=true;
}

Nyní máme k dispozici objekty objScrollArea (prvek scrollArea, který hned zviditelníme) a objDivContent (prvek divContent, zavoláme jeho metodu MoveArea() viz. níže) s výše uvedenými vlastnostmi. Funkce nastavuje proměnné initialised pravdu (true), protože ji později použijeme jako podmínku. Teď je třeba definovat metody MoveArea(), MoveAreaUp() a MoveAreaDown(), abychom mohli s objektem objDivContent pohybovat – scrollovat.

function MoveArea(y){ //parametr = budouci vertikalni souradnice objektu
this.y = y; //ten se priradi vlastnosti y
this.css.top = this.y; //podle, ktereho se urci pozice objektu
}

var loop;
var odpocet = 50; //cas v ms, cim min tim se bude scrollovat rychleji
function MoveAreaDown(move){
if(this.y > (- this.scrollHeight) + objScrollArea.clipHeight){ //podminka prejeti nahoru
this.MoveArea(this.y-move)
if(loop) setTimeout("objDivContent.down("+move+")",odpocet) //pokud neni loop nescrolluje se :)
}
}
function MoveAreaUp(move){
if(this.y < 0){ //podminka prejeti dolu
this.MoveArea(this.y – move)
if(loop) setTimeout("objDivContent.up("+move+")",odpocet)
}
}

Metoda MoveArea(y) nastavuje vlastnosti y aktuálního objektu hodnotu danou parametrem a jeho vertikální pozici nastavuje dle hodnoty vlastnosti y (=parametr).

Metoda MoveAreaDown(move) dostává v parametru "krok", o který se objekt posune. První podmínkou kontroluje zda spodní hrana objektu objDivContent už není nad spodní hranou objScrollArea (jednoduše jestli už nepřejela). Pokud ne, zavolá metodu MoveArea() aktuálního objektu s parametrem vertikální pozice objektu zmenšené o move (krok objektu). Ta potom (pokud je splněna podmínka loop – tu nastavujeme funkcí scrolluj – viz. níže) zavolá sama sebe za čas určený proměnnou odpocet (50ms).

Metoda MoveAreaUp(move) funguje stejně, pouze s rozdílem, že v první podmínce kontroluje polohu horní hrany objektu (ta nesmí být víc než 0).

Tyto metody budou volány další funkcí, která už bude obsluhovat odkazy scroll up a scroll down ve stránce:

function scrolluj(speed){
if(inicializuj){
loop=true;
if(speed>0) objDivContent.down(speed) //kladny parametr -> jede se dolu
else objDivContent.up(speed) //jinak -> nahoru
}
}

Funkce zkontroluje, zdali jsou objekty inicializovány, nastaví proměnnou loop na true a podle svého parametru zavolá metodu objektu objDivContent. Pokud je parametr větší než 0, bude to metoda down(), jinak up().

V této chvíli by při zkoušce skriptu prvek objDivContent sice scrolloval, ale neustále, protože loop je true a funkce pohybu volají sami sebe pořád dokola. Je tedy třeba funkce, která ho zastaví:

function zastav(){
loop=false;
}

Tím je skript hotov. Stačí pouze zavolat funkce scrolluj() a zastav() s patřičnými parametry v prvcích <a> ve stránce.

<a href="javascript:;" onMouseOver="scrolluj(-7)" onMouseOut="zastav()">[scroll up]</a>
…
<a href="javascript:;" onMouseOver="scrolluj(7)" onMouseOut="zastav()">[scroll down]</a>

Doufám, že se vám příklad líbil a všechny vaše připomínky uvítám v diskusi pod článkem.