Vlastní scrollbar pomocí JavaScriptu - Builder.cz - Informacni server o programovani

Rubriky
Odběr fotomagazínu

Fotografický magazín "iZIN IDIF" každý týden ve Vašem e-mailu.
Co nového ve světě fotografie!

 

Zadejte Vaši e-mailovou adresu:

Kamarád fotí rád?

Přihlas ho k odběru fotomagazínu!

 

Zadejte e-mailovou adresu kamaráda:



JavaScript

Vlastní scrollbar pomocí JavaScriptu

html_obecne
html_obecne

html_obecne

27. března 2001, 00.00 | V dnešním článku si ukážeme, jak lze pomocí JavaScriptu vytvořit vlastní scrollbar - ten nám pomůže nahradit jak vnořený rám (IFRAME) v Netscape, tak i na první pohled sterilní scrollbary prohlížeče.

V dnešním článku si ukážeme, jak lze pomocí JavaScriptu vytvořit vlastní scrollbar - ten nám pomůže nahradit jak vnořený rám (IFRAME) v Netscape, tak i na první pohled sterilní scrollbary prohlížeče.

Nejprve vám doporučuji podívat se na ukázku toho, co dnes budeme dělat.

Jak to funguje
Celá stránka je vytvořena pomocí absolutního pozicování. Samotný text je na stránce již při jejím nahrání, ale je skrytý pod obrázky (logo Builderu nahoře a bílý pruh dole). Když držíme stisknutý kurzor nad jednou ze šipek, tak se celý text posouvá do příslušného směru a jeho část je vždy vidět mezi jednotlivými obrázky.

S tím souvisí ještě jedna věc - text je na většině rozlišení delší než jedna obrazovka prohlížeče, a proto by se za normálních okolností na pravé straně objevil obvyklý scrollbar prohlížeče. Jeho skrytí docílíme parametrem scroll="no" v tagu BODY. Tento parametr ale akceptuje Netscape Navigator pouze pokud jsou uvedeny ještě parametry marginheight=0 a marginwidth=0. Proč tomu tak je, to opravdu netuším, ale v tagu BODY by tedy v našem případě neměly chybět tyto parametry:

<body marginheight=0 marginwidth=0 scroll="no">


Vzhůru do toho
Jak jsme si již řekli, celá stránka je vytvořena pomocí absolutního pozicování. První musíme definovat element s textem, aby mohl být překrýván později definovanými obrázky:

<span style="position:absolute;left:200px;top:120px;width:250px;font-size:9pt;font-family:HELVETICA CE, ARIAL CE, ARIAL, HELVETICA, SANS-SERIF;color:#000000;" id="myframe">

text

</span>

Z pochopitelných důvodů jsem zde místo skutečného textu uvedl jen "zkrácenou verzi" :o) Všimněte si kromě pozicování i toho, že elementu dáváme jméno myframe. Toho využijeme při pohybování textem.

Podobným způsobem si definujeme i ostatní elementy, jen zde vkládáme obrázky, případně jiný text. Zvlášť bych se ještě chtěl věnovat šipkám:

<span style="position:absolute;left:465px;top:180px;"><a href="#" onmousedown="up();" onmouseup="unup();"><img src="sipka1.gif" alt="- nahoru -" width=30 height=40 border=0></a>
<br>
<a href="#" onmousedown="down();" onmouseup="undown();"><img src="sipka2.gif" alt="- dolů -" width=30 height=40 border=0></a></span>

Samotný odkaz, který se váže k šipkám, nikam nevede. Důležité jsou zde události onmousedown (nastane v momentě přidržení tlačítka myši nad obrázkem) a onmouseup (nastane v momentě uvolnění tlačítka myši nad obrázkem). K těm se váží funkce down() a undown(), respektive up() a unup().

Funkce down() a undown()
My si vysvětlíme první dvě jmenované, druhé dvě jsou prakticky totožné. Nejdříve tedy zdrojové kódy obou funkcí:

var pos = 120;
var move = true;

function down() {
if ((move == true) && (pos != -315)) {
pos--;
if (document.all) document.all.myframe.style.top = pos;
if (document.layers) document.myframe.top = pos;
setTimeout ("down()",3);
}
else move = true;
}

function undown() {
if (pos != -315) move = false;
}

Nejdříve si inicializujeme proměnné pos (absolutní pozice elementu myframe při nahrání stránky) a move, jejíž význam si ještě vysvětlíme.

Funkce down() nejprve otestuje, jestli hodnota proměnné move je true a jestli pozice elementu myframe není -315 (což je jeho horní pozice). Poté odečte od proměnné pos jedničku a pozici textu (myframe) nastaví na tuto hodnotu (podle zápisu, jaký zná prohlížeč - document.layers pro NN, document.all pro IE). Nakonec se funkce v časovém intervalu 3 milisekund znovu sama spustí.

Poté, co pozice elementu dosáhne -315, se spustí větev else, která nastaví hodnotu proměnné move na true - to je důležité funkci up(), která se spouští u první šipky.

Další možností, kdy se může spustit větev else je, když hodnota move nebude true. To zajišťuje funkce undown() - ta se spouští při uvolnění tlačítka myši nad druhou šipkou. Kdyby tu tato funkce nebyla, běžela by funkce down() až do doby, kdy je element na pozici -315.

Ve funkci undown() je ještě jedna podmínka, jejíž význam si vysvětlíme později.

Funkce up() a unup()

function up() {
if ((move == true) && (pos != 120)) {
pos++;
if (document.all) document.all.myframe.style.top = pos;
if (document.layers) document.myframe.top = pos;
setTimeout ("up()",3);
}
else move = true;
}

function unup() {
if (pos != 120) move = false;
}

Obě funkce jsou jen málo odlišné od předchozích dvou, tyto odlišnosti jsou zvýrazněny tučným písmem.

Teď slíbené vysvětlení podmínek u funkcí undown() a unup(). Pokud se dostaneme s elementem myframe až do maximální horní (-315), respektive dolní (120) pozice, a poté klikneme na šipku znovu, spustí se funkce down(), respektive up(), jejichž větev else nastaví move na true. Poté se ale spustí i funkce undown(), respektive unup(), které by bez těchto podmínek nastavily move na false a s elementem by se již nedalo dále hnout (kvůli nesplnění jedné z podmínek na začátku funkcí down() a up()).

Závěrem
Scrollbar by měl chodit na Internet Exploreru i Netscape Navigatoru od verze 4 výše, ale budu opět rád, pokud se v diskusním fóru pod článkem podělíte o své zkušenosti s funkčností v různých prohlížečích s ostatními. Ukázku si i s obrázky můžete stáhnout zde. A to je pro dnešek vše.

Tématické zařazení:

 » Rubriky  » JavaScript  

 » Rubriky  » Web  

 » Rubriky  » HTML  

Poslat článek Diskuse (0) Tisk Přečteno: 1604x

www.builder.cz/rubriky/javascript/vlastni-scrollbar-pomoci-javascriptu-155730cz

 

 

 

Nejčtenější články
Nejlépe hodnocené články
Krátké zprávy

 

Přihlášení k mému účtu

Uživatelské jméno:

Heslo: