Crossbrowser MARQUEE a BLINK v JavaScriptu

13. března 2002

•

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‘);

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.