Crossbrowser MARQUEE a BLINK v JavaScriptu

    0

    Následující skript jsem vytvořil jako náhradu běžícího textu, který pracuje pouze v IE, a blikajícího textu, který naopak pracuje pouze v NN.

    Pomocí absolutního pozicování a změny pozice JavaScriptem můžete vytvořit proužek, který bude běžet po obrazovce nebo bude blikat. Pomocí JavaScriptu pak uděláte cyklus, který bude vždy daný text (ve skutečnosti celý element DIV) posouvat – bude se měnit jeho pozice anebo ho pro blikání skryje / zviditelní.

    Příklad stránky s běžícím a blikajícím textem najdete zde. Kód vypadá takto:

    <html>
    <head>
    </head>
    <body onload="DoMove();blink();" text="#000000">
    <span id="ticker" style="position:relative; left:2000px; top:220px; height:18px; width:1000; background-color:#800000;"> // pozicování proužku běžícího textu
    <a href="http://interval.cz">http://interval.cz</A> tvorba webu, tipy a triky… <A HREF="interval.cz">Klikněte zde!</A>
    </span>
    <p>
    <span id="blinktext" style="position: relative;"> // vymezení blikajícího textu
    Blikající text
    </span>
    <script language="JavaScript" type="text/javascript" src="animtext.js"></script>
    </body>
    </html>

    Skript animtext.js, který obsahuje potřebné funkce:

    var DHTML = (document.getElementById || document.all || document.layers);
    function ap_getObj(name) { // zjisti dostupný objekt pro práci se stylem dokumentu
      if (document.getElementById)
        return document.getElementById(name).style;
      else
        if (document.all)
          return document.all[name].style;
        else
          if (document.layers)
            return document.layers[name];
    }

    // nastavení pro marquee
    nStart = 800; // počáteční pozice textu
    nEnd = -950; // koncová pozice textu
    nTimeOut = 50; // rychlost
    nInc = 5; // počet znaků v jednom kroku
    nLeft = nStart;
    var tc = ap_getObj(‚ticker‘);

    function DoMove(){ // posuň text
      if (DHTML) {
        nLeft = nLeft – nInc;
        if (nLeft < nEnd) {
          nLeft = nStart;
        }
        tc.left = nLeft;
        setTimeout(‚DoMove()‘,nTimeOut);
    }
    }

    // nastavení pro blikající text
    var a=0;
    var ok=true;
    var btx = ap_getObj(‚blinktext‘);
     

    function blink() {
      if (!DHTML)
        return; // pokud nepodporuje prohlížeč funkce pozicování, ukončit
      k=true;
      if (a==0 && ok==true){
        btx.visibility="hidden";ok=false;a=1
      }
      if (a==1 && ok==true){
        btx.visibility="visible";ok=false;a=0
      }
      setTimeout(‚blink()‘,300);
    }

    Nevýhodou může být, že se text roluje v celé šířce okna, zdatnější programátoři si ale jistě podle tohoto tipu skript přizpůsobí pro svou potřebu. Na stránce může být jen jeden běžící nebo blikající text – nechtěl jsem zbytečně komplikovat kód. Jistě to však v řadě případů vyhoví, ona kompletně blikající stránka asi nebude až tak dobrá. Uvedený skript pracuje ve většině nejpoužívanějších prohlížečů – IE, NN a Opera.

    Starší komentáře ke článku

    Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

    Žádný příspěvek v diskuzi

    Odpovědět