Scrolovací text na HTML stránkach v rôznych obmenách sa stal veľmi populárnou a používanou "zbraňou" webdizajnérov a programátorov na celom svete a môžeme ho dnes už nájsť na veľkom množstve web stránok.
O tom že javascriptom sa dá toho veľa vyjadriť a ukázať sme sa už mohli veľa krát presvedčiť. Veľmi názorným príkladom sú scrolovacie texty na stránkach, ktorých variabilita a rôznorodosť dokazuje silu tohoto scriptovacieho jazyka.
Prvý príklad bude scrolovací text, ktorý bude opakovane rotovať v text boxe. Veľkosť boxu, rýchlosť scrolovania a obsah textu je možné samozrejme upraviť.
Samotný script by mohol napríklad vypadať aj takto:
<script language="JavaScript">
<!--
// Na tomto mieste si upravíme bežiaci text podľa nášho želania
var msg = "sem vložte prosím váš text - bude tu scrolovať
(možno :) ..... ";
function startScroller()
{
document.scrollForm.scrolling_message.value = msg
msg = msg.substring(1, msg.length) + msg.substring(0, 1)
</script>
Ako vidíte je to jednoduché, celú obsluhu scrollera obsluhuje funkcia startScroller(). Scroller aktivujeme pomocou nasledovného form-u.
Nesmieme však zabudnúť aktivovať funciu v tagu BODY: <body onLoad="startScroller();">
<form name="scrollForm">
<!--Na tomto mieste je možné upraviť veľkosť formulárového
riadku - text boxu. -->
<input type="text" name="scrolling_message" value="" size="32">
</form>
Výsledok nášho snaženia si môžete pozrieť tu.
Ďalší príklad sa bude taktiež venovať scrolovacieho textu, ale trošku iného charakteru. A síce scrolovací text sa bude nachádzať v status bare (v spodnej lište prehliadača).
Tak sa na to teda mrknime:
<script language="JavaScript">
<!--
// Tu zmeníme text
var statBarMsg = "Tento text scroluje v status bare ..... " +
"Bude sa vždy opakovať a obnovovať po načítaní
stránky ....." +
"jasné ? " ;
function startStatusScroller()
{
window.status = statBarMsg;
statBarMsg = statBarMsg.substring(1, statBarMsg.length)
+ statBarMsg.substring(0, 1)
setTimeout("startStatusScroller()", 150)
}
//-->
</SCRIPT>
Nesmieme zabudnúť opäť na uvedenie funkcie startStatusScroller() do tela html dokumentu, teda do tagu BODY:
<body onLoad="startStatusScroller();">
Výsledok nášho snaženia si môžete pozrieť tu.
A do tretice si taktiž ukážeme pekný "poskakujúci text" v status bare. Nie som prílíž zástanca rôznych vyčačkaných a nevkusne preplnených stránok. Hlavná zásada je prehľadnosť. Sú však stránky, napríklad spravodajské, kde sa použitie scrolovacieho textu priam žiada. Je to v podstate na Vás. Ale poďme k nášmu príkladu.
Hneď na úvod si pozrime výsledok nášho scriptu aby sme vedeli "vo co go ?".
Tak čo, pekné nie ?
<script language="JavaScript">
<!--
// Tu zmeňte text.
var startMsg = "[ D E V E L O P E R . S K ] ";
var str = "";
var msg = "";
var leftMsg = "";
function setMessage()
{
if (msg == "")
{
str = " ";
msg = startMsg;
leftMsg = "";
}
if (str.length == 1)
{
while (msg.substring(0, 1) == " ")
{
leftMsg = leftMsg + str;
str = msg.substring(0, 1);
msg = msg.substring(1, msg.length);
}
leftMsg = leftMsg + str;
str = msg.substring(0, 1);
msg = msg.substring(1, msg.length);
for (var ii = 0; ii < 120; ii++)
{
str = " " + str;
}
}
else
str = str.substring(10, str.length);
window.status = leftMsg + str;
// Túto hodnotu zmeňte poďľa Vašich požiadaviek
// pre ilustráciu (1000 = 1 sekunda)
timeout = window.setTimeout('setMessage()',100);
}
// -->
</script>
Do sekcie body tradične doplníme :onload="timeout = window.setTimeout('setMessage()',500);"
.
To by bolo asi všetko z mojej strany.