Hlavná stránka · Diskusné Fórum · Pracovné príležitosti · Zoznam

 Main Menu
o Hlavná stránka
o Zoznam tém
o Zoznam
o Odporučte nás
o Užívatelia
o Vaše konto
o Pridaj článok
o Štatistiky
o Top 10

 Reklama


 Developer Zone's
o Internet
o Tools
o Linux
o CGI Zone
o ASP Zone
o ASP.net
o PHP Zone
o CSS Zone
o JavaScript
o MySQL
o WAP / WML
o WML / WMLScript
o XML / XHTML
o Tipy a triky
o Best of web
o WebServers
o WebDesign
o Grafika

 Servis
o Vyhľadávanie
o Fórum
o Workoffice
o Zoznam článkov
o Reklama
o Pridaj článok
o Pridaj novinku

Napíšte nám
Homepage Do favoritov

 LinkExpres
Interval.cz · Pc.sk
Builder.cz · Mobilmania
PCSvet.cz · Asp.cz
Webdnes · Živě.sk
Zoznam.sk · Atlas.sk
Inzine.sk · PHP.sk
Agent.sk · Lupa.cz
Code.box.sk · Root.cz
Pixel32 · Grafika.cz

 forum.developer.sk
o Fórum ::
o Markup languages
o Scriptové jazyky
o CGI
o PHP/MySQL
o Perl
o Grafika
o Webservery
o HTML Editory
o Browsery
o Bookmarx
o ASP
o Vytvor tému ::

 Pracovné príležitosti
o Ponúkate prácu?
o Hľadáte prácu?

 Autori developer.sk
o Martin Nemeček
o Sväťo Straka
o Jany Masaryk
o Jozef Murín

 
JavaScript [ 27. April 2000] - Martin_Nemecek
Scrolovací text pomocou JavaScriptu
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.

 
 Príslušné odkazy k téme
  • Javascript.sk
    Viac o téme: JavaScript | Iné články od: Admin | Pošli komentár | Stránka vhodná na tlač width=15 height=11  Pošli tento článok priateľovi, známemu width=15 height=11


    Najčítanejšie články JavaScript:
    Pulldown menu a tabuľka odkazov

    Ďalšie články v rubrike JavaScript:

  •  

    "Scrolovací text pomocou JavaScriptu" | Login / vytvor konto | 0 Komentárov
    Prah
    Za obsah komentárov je zodpovedný užívateľ, nie prevádzkovateľ týchto stránok.



    Autorské práva:   ©1999 - 2001 Developer Zone [developer@developer.sk]

    Všetky články sú vlastníctvom autorov Developer Zone. Všetky práva vyhradené. Stránky Developer.sk sú vytvorené pomocou PHP-Nuke.
    Odkazy na nové články je možné preberať pomocou:Backend.php.