Jak na rolující text v textovém políčku - Builder.cz - Informacni server o programovani

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

Jak na rolující text v textovém políčku

15. března 2001, 00.00 | V dnešním článku si ukážeme další možnost, jak oživit webové stránky - tentokrát pomocí rolujícího textu v textovém políčku.

V dnešním článku si ukážeme další možnost, jak oživit webové stránky - tentokrát pomocí posunujícího se textu v textovém políčku.

Jako již tradičně, i dnes se nejprve podíváme na to, jak to bude ve finále vypadat:

Jak na to
Nejprve vytvoříme proměnnou i, do které uložíme hodnotu 1 a jejíž význam si vysvětlíme později.

Poté si již vytvoříme samotnou funkci, která vygeneruje textové políčko:

var i = 1;

function start (msg) {
message = msg;
document.write ('<form name="nasFormular" onSubmit="return false;"><input type="text" size=' + message.length + ' name="nasText" readonly></form>');
move();
}

Text zprávy, jež má políčko obsahovat, předáváme funkci jako parametr msg a ukládáme jej do proměnné message.

V dalším kroku funkce vygeneruje potřebný HTML kód pro vytvoření políčka - všimněte si, že velikost políčka (parametr size) je stejná jako délka textu zprávy. Ještě zde používáme parametr readonly, který znemožňuje uživateli editovat text v políčku.

Funkce move()
Na konci funkce start() voláme funkci move(), která již zajišťuje pohyb textu:

function move () {
document.forms.nasFormular.nasText.value = message.substring (0 , i);
if (i != message.length) {
i++;
setTimeout ("move()" , 50);
}
else {
i = 1;
setTimeout ("roll()" , 500);
}
}

V prvním řádku funkce přiřazujeme do textu políčka první znak proměnné message (v našem případě je to "B") - toho docílíme použitím metody substring - v tomto případě požadujeme část řetězce začínající prvním znakem (číslujeme od nuly) dlouhou 1 znak (jednička je uložená v proměnné i).

Poté se otestuje, jestli hodnota i není stejná jako délka textu zprávy. Pokud je tato podmínka splněna, zvýší se hodnota i o jedničku a pokračuje se opětovným spuštěním funkce move() (po uplynutí časového intervalu).

Pokud je hodnota i stejná jako délka textu zprávy, je již celý text vypsán v políčku a spustí se větev else. Ta opět uloží do proměnné i hodnotu 1 a spustí funkci roll().

Funkce roll()

function roll () {
document.forms.nasFormular.nasText.value = message.substring (i , message.length);
if (i != message.length) {
i++;
setTimeout ("roll()" , 50);
}
else {
i = 1;
setTimeout ("move()" , 500);
}
}

Tato funkce pracuje na obdobném principu jako funkce move(). Jediný rozdíl je v řetězci požadovaném metodou substring. Ten začíná u druhého znaku řetězce message a obsahuje tento řetězec až do konce.

Poté se zvyšuje hodnota proměnné i a řetězec se zkracuje, až je hodnota i stejná jako délka textu zprávy a spustí se větev else. Ta opět přiřadí do proměnné i jedničku a spustí znovu funkci move().

Volání funkce
Pokud si tyto funkce definujeme v hlavičce stránky, stačí již pouze zavolat funkci start(), které jako parametr předáme text zprávy, v těle stránky. V našem případě to tedy bude vypadat takhle:

<script type="text/JavaScript">start("Builder - informační server o programování");</script>

Závěrem
Zde uvedený efekt funguje bez problémů v Internet Exploreru i Netscape Mavigatoru od verze 4 výše, ale podle mého názoru by neměl dělat velké problémy ani starším verzím těchto prohlížečů, které podporují JavaScript. A to je pro dnešek vše.

Tématické zařazení:

 » Rubriky  » JavaScript  

 » Rubriky  » Web  

 » Rubriky  » HTML  

Poslat článek

Nyní máte možnost poslat odkaz článku svým přátelům:

Váš e-mail:

(Není povinný)

E-mail adresáta:

Odkaz článku:

Vzkaz:

Kontrola:

Do spodního pole opište z obrázku 5 znaků:

Kód pro ověření

 

 

 

 

Nejčtenější články
Nejlépe hodnocené články

 

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

Uživatelské jméno:

Heslo: