Měnící se barvy scrollbarů

1. září 2002

•

Obarvením scroolbaru jsme se na Intervalu již zabývali. Tentokrát se ale podívejme, jak lze s pomocí jednoduchého skriptu zajistit měnící se barvu scrollbarů na liště prohlížeče. Nevýhodou je snad jen to, že následující JavaScript podporuje jen Microsoft Internet Explorer verze 5.5 a vyšší.

JavaScript je rozdělen na dvě části: interní část (to je vlastní tělo dokumentu) a externí část (což je externí soubor scroll.js – vlastní tělo JavaScriptu). Toto rozdělení je provedeno kvůli zpřístupnění souboru scroll.js. Skript bude možná více používaný, a proto je lepší odkázat se k němu např. v deseti stránkách najednou, než ho rozepisovat v každém dokumentu zvlášť.

První (interní) část dokumentu scroll.htm

<html>
<head>
<title>Nějaký dokument</title>
<script language=“JavaScript“ src=“scroll.js“></script> // odkaz k externímu souboru scroll.js
</head>
<body>
libovolný text dokumentu
</body>
</html>

Druhá (externí) část dokumentu scroll.js

v=-1; wh=“#ffffff“; aa=“#ff0000″;
ab=“#f85507″; ac=“#f97906″; ad=“#fc9803″; ae=“#fcc00c“;
sb=“#f40000″; sc=“#e80000″; sd=“#d50000″; se=“#c60000″;
sf=“#9f0004″; fa=“#00008b“; fb=“#0000b0″; fc=“#0000d7″;
fd=“#0000f9″; fe=“#2020ff“; ff=“#4a4aff“; ta=“#add8e6″;
tb=“#95cddf“; tc=“#80c2d9″; td=“#65b7d1″; te=“#4fabca“;
var ie=false;
if (navigator.appName==“Microsoft Internet Explorer“) ie=true;
document.write(„<body onLoad=’scroll();‘>“);
function scroll()
{
  if (ie)
  {
     v++;
     if (v==0||v>9&&v<14) {a=aa; s=aa; f=fa; h=aa; l=aa; d=fa; t=ta;}
     if (v==1||v==9) {a=ab; s=sb; f=fb; h=sb; l=sb; d=fb; t=tb;}
     if (v==2||v==8) {a=ac; s=sc; f=fc; h=sc; l=sc; d=fc; t=tc;}
     if (v==3||v==7) {a=ad; s=sd; f=fd; h=sd; l=sd; d=fd; t=td;}
     if (v==4||v==6) {a=ae; s=se; f=fe; h=se; l=se; d=fe; t=te;}
     if (v==5) {a=wh; s=sf; f=ff; h=sf; l=sf; d=ff; t=“#3ea4c6″;}
     if (v==14) v=-1;
     with(document.body.style)
     {
        scrollbarArrowColor=a;
        scrollbarShadowColor=s;
        scrollbarFaceColor=f;
        scrollbarHighlightColor=h;
        scrollbar3dLightColor=l;
        scrollbarDarkShadowColor=d;
        scrollbarTrackColor=t;
     }
     window.setTimeout(„scroll()“,100);
  }
}

Scroll.htm

K souboru scroll.htm není co dodat, a proto si už postupně "rozpitváme" celý soubor scroll.js :

Proměnné v přiřadíme počáteční hodnotu:

v=-1; // počáteční hodnota proměnné v

Každé proměnné přiřadíme určitou barvu:

wh=“#ffffff“; aa=“#ff0000″;
ab=“#f85507″; ac=“#f97906″; ad=“#fc9803″; ae=“#fcc00c“;
sb=“#f40000″; sc=“#e80000″; sd=“#d50000″; se=“#c60000″;
sf=“#9f0004″; fa=“#00008b“; fb=“#0000b0″; fc=“#0000d7″;
fd=“#0000f9″; fe=“#2020ff“; ff=“#4a4aff“; ta=“#add8e6″;
tb=“#95cddf“; tc=“#80c2d9″; td=“#65b7d1″; te=“#4fabca“;

Proměnné ie přiřadíme hodnotu false:

var ie=false;

Když je uživatelův prohlížeč Microsoft Internet Explorer, proměnná ie získá hodnotu true:

if (navigator.appName==“Microsoft Internet Explorer“) ie=true;

Vysvětlení: Bude-li tento script spuštěn Microsoft Internet Explorerem, proměnná ie bude mít kladnou hodnotu (true), ale bude-li script spuštěn jiným prohlížečem, proměnná ie bude mít stále zápornou hodnotu (false).

Tagu body přiřadíme onLoad scroll();, zaručující start scriptu (alespoň na onLoad nemusíme myslet v interním souboru):

document.write(„<body onLoad=’scroll();‘>“);

Funkce `scroll();`

Nejprve si popíšeme druhou část této funkce, protože ta první na ni navazuje.

Druhá část funkce scroll(); :

with(document.body.style)
{
scrollbarArrowColor=a;
scrollbarShadowColor=s;
scrollbarFaceColor=f;
scrollbarHighlightColor=h;
scrollbar3dLightColor=l;
scrollbarDarkShadowColor=d;
scrollbarTrackColor=t;
}

Metoda with [ with (document.body.style) {…} ] nám zkracuje zápis ve složených závorkách. Než abychom psali před každou částí scrollbaru zdlouhavé document.body.style (např.: document.body.style.scrollbarArrowColor = a;), napíšeme tento text raději do složených závorek metody with a zkrátíme si tak zbytečně dlouhý zápis těchto částí scrollbarů.

Jak už jsem zde načtrl, každé části scrollbaru přiřadíme proměnnou, do které budeme později zadávat hodnoty určitých barev.

První část funkce scroll(); :

Na začátku funkce vidíme metodu if (podmínka) { … }: Pokud platí podmínka (ie – true), proveď { … text ve složených závorkách … }. Tato podmínka ie – true platí jen u Microsoft Internet Explorer, a proto bude s textem ve složených závorkách dále pracovat právě jen MSIE. Např. u Netscape Navigatoru nebo u Opery bude mít proměnná ie hodnotu false, a proto nebude text ve složených závorkách vůbec přečten. Tím zamezíme i neviditelným chybám v prohlížečích nepodporujících barevnost scrollbarů.

Nesmíme zapomenout i na nižší verze MSIE, které tento script také nepodporují. Zjišťovat verzi MSIE nebudeme, protože některé „starší“ verze MSIE mohou být aktualizovány na „novější“ verze, ale JavaScriptu mohou ukazovat stále staré informace o prohlížeči (např.: MSIE 4.0 je aktualizován na MSIE 6.0, ale JavaScriptu stále ukazuje informaci MSIE 4.0). Proto aktualizované verze MSIE podporující barevnost scrollbarů nemusí správně ukazovat číslo verze a tudíž bychom je metodou parseInt(navigator.appVersion) neprávem odepsali. Se staršími MSIE si ale lámat hlavu ani nemusíme, protože žádnou (ani skrytou) chybu nezobrazují.

Na začátku textu uvnitř složených závorek metody if vidíme v++; (což je zkrácená verze v = v + 1;).

v++; nám zaručuje pravidelné zvětšování proměnné v o 1, díky stálému opakování funkce scroll();, což si ukážeme nakonec.

Další metoda if, uplatněná v tomto scriptu, je velmi jednoduchá. Vysvětlím jen první a poslední if :

if (v==0||v>9&&v<14) {a=aa; s=aa; f=fa; h=aa; l=aa; d=fa; t=ta;}

Pokusím se vysvětlit v češtině: „Když je hodnota proměnné v rovna nule nebo když je hodnota proměnné v větší než devět a zároveň menší než čtrnáct, potom platí: { … text ve složených závorkách … }.

if (v==14) v=-1;

„Když je hodnota proměnné v rovna čtrnácti, tak přeměň tuto hodnotu na -1.“ Touto „přeměnou“ zabezpečíme opakovaný běh všech barev scrollbarů.

Ve složených závorkách jsou napsané hodnoty barev jednotlivých částí scrollbarů. Tyto barvy se ukládají do proměnných, které se potom používají ve druhé (už popsané) části funkce scroll();. Tady vzniká předem popisovaná návaznost první a druhé části této funkce.

Podívejme se nyní na malý příklad již dříve zmiňované návaznosti :

a = aa; // … „(a = document.body.style.scrollbarArrowColor ;; aa = „#ff0000″) =>> barva šipek scrollbarů se bude rovnat hodnotě #ff0000“

Poslední a jednou z nejdůležitějších částí funkce scroll(); je metoda window.setTimeout(); :

window.setTimeout(„scroll()“,100)
}
}

Tento window.setTimeout(); nám zajišťuje pravidelné opakování funkce scroll(); vždy po 100 ms, tedy po jedné desetině sekundy (100 ms = 0,1 s). Tímto opakováním zajišťujeme stálé přelévání barev všech částí scrollbarů. Metoda window.setTimeout("funkce()",čas) je v DOM jednou z hlavních metod objektu window, a proto není nutné window psát. Stačí jen setTimeout("funkce()",čas).

Nakonec samozřejmě nesmíme zapomenout uzavřít metodu if a funkci scroll(); druhou složenou závorkou } .

Na příklad se můžete podívat, případně lze stáhnout zdrojové soubory.