Pohyblivá lišta v DHTML

22. dubna 2002

•

Keď potrebujete vytvoriť text, ktorý by návštevníci posúvali bez nutnosti posúvať celú obrazovku, väčšinou použijete Iframe. Ukážem vám DHTML skript, ktorým Iframe nahradíte. Posúvať môžete ľubovoľné objekty a pri tom nastaviť rýchlosť pohybu. Skript je prispôsobivejší ako Iframe a podporuje ho väčšina používaných prehliadačov.

Tento skript sa skladá s viacerých častí. Celý beží pod všetkými prehliadačmi okrem IE <2 a NN <3, ktoré teraz už nie sú moc používané. Jednou z častí je obyčajný CSS. Druhá časť stále medzi hlavičkami je samotný DHTML inicializujúci funkcie. HTML kód, ktorým budete pohybovať, je oddelený <div>text</div>. Pohyb môžeme vykonať obyčajne prechodom myši cez tlačítko, dá sa však vykonať i inou akciou, napr. onclick() atď. Pohyb tým pádom môžete inicializovať pomocou hocijakého obrázku a aj textu.

Prvá časť (CSS kód):

#divUp {position:relative; left:20px; top:20px;}
#divDown {position:relative; left:20px; top:300px;}
#divScrollTextCont {position:relative; left:0px; top:0px; width:128px; height:325px; clip:rect(0px 300px 325px 0px); overflow:hidden; visibility:hidden;}
#divText {position:relative; left:0px; top:0px;}

</style>

Túto časť treba dať medzi hlavičky dokumentu. O čo ide: nastavujeme tu rôzne odskoky od okrajov dokumentu, buď relatívne, alebo absolútne. Teraz je to nastavené na taký pás 325 x 128 pixelov. Treba sa s tým pohrať, treba to zoptimalizovať.

Druhá časť (samotný DHTML skript):

function lib_bwcheck(){ // overenie typu prehliadača
    this.ver=navigator.appVersion
    this.agent=navigator.userAgent
    this.dom=document.getElementById?1:0
    this.opera5=this.agent.indexOf("Opera 5")>-1
    this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
    this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
    this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
    this.ie=this.ie4||this.ie5||this.ie6
    this.mac=this.agent.indexOf("Mac")>-1
    this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
    this.ns4=(document.layers && !this.dom)?1:0;
    this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
    return this
}
var bw=new lib_bwcheck()

var speed = 30

var loop, timer

function makeObj(obj,nest){
nest=(!nest) ? "":’document.’+nest+‘.‘
    this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+’document.’+obj):0;
    this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+’document.’+obj):0;
    this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
    this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
    this.up=goUp;this.down=goDown;
    this.moveIt=moveIt; this.x=0; this.y=0;
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}

var px = bw.ns4||window.opera?"":"px";

function moveIt(x,y){
    this.x = x
    this.y = y
    this.css.left = this.x+px
    this.css.top = this.y+px
}

// spôsobí pohyb objektu nahor
function goDown(move){
    if (this.y>-this.scrollHeight+oCont.clipHeight){
        this.moveIt(0,this.y-move)
            if (loop) setTimeout(this.obj+".down("+move+")",speed)
    }
}
// a táto funkcia zasa nadol
function goUp(move){
    if (this.y<0){
        this.moveIt(0,this.y-move)
        if (loop) setTimeout(this.obj+".up("+move+")",speed)
    }
}

// zavolá funkcie potrebné k skrolovaniu, samozrejme až potom, ako je stránka naloadovaná
function scroll(speed){
    if (scrolltextLoaded){
        loop = true;
        if (speed>0) oScroll.down(speed)
        else oScroll.up(speed)
    }
}

// zastaví pohyb
function noScroll(){
    loop = false
    if (timer) clearTimeout(timer)
}
// vytvorí objekt
var scrolltextLoaded = false
function scrolltextInit(){
    oCont = new makeObj(‚divScrollTextCont‘)
    oScroll = new makeObj(‚divText‘,’divScrollTextCont‘)
    oScroll.moveIt(0,0)
    oCont.css.visibility = "visible"
    scrolltextLoaded = true
}
// spustí celý proces, ak je stránka nahraná a prehliadač je v poriadku
if (bw.bw) onload = scrolltextInit

</script>

Teraz prichádzame k záveru. Takto by vše malo asi vyzerať, aby to fungovalo:

<html>

</style>

var speed = 30

var loop, timer

var px = bw.ns4||window.opera?"":"px";

function moveIt(x,y){
    this.x = x
    this.y = y
    this.css.left = this.x+px
    this.css.top = this.y+px
}

// zavolá funkcie potrebné k skrolovaniu, samozrejme až potom, ako je stránka nahraná
function scroll(speed){
    if (scrolltextLoaded){
        loop = true;
        if (speed>0) oScroll.down(speed)
        else oScroll.up(speed)
    }
}

// zastaví pohyb
function noScroll(){
    loop = false
    if (timer) clearTimeout(timer)
}
// vytvorí objekt
var scrolltextLoaded = false
function scrolltextInit(){
    oCont = new makeObj(‚divScrollTextCont‘)
    oScroll = new makeObj(‚divText‘,’divScrollTextCont‘)
    oScroll.moveIt(0,0)
    oCont.css.visibility = "visible"
    scrolltextLoaded = true
}
// spustí celý proces, ak je stránka nahraná a priehladač je v poriadku
if (bw.bw) onload = scrolltextInit

</script>
</head>

<body>

text, ktory bude skrolovat.

</div></div>

<!– a teraz (alebo aj predtym) hocikde do body treba dat sipky: –>

K tým šípkam (obrázkom): odkaz je na prázdny bookmark – toto sa používa preto, aby to vyzeralo ako odkaz, pritom pri klepnutí sa vykoná JavaScript. Ale to je nepodstatné. Po onmouseover(), prejdení myšou ponad obrázok, sa vykoná funkcia scroll(). Tá je zadefinovaná v hlavnej časti s parametrom 7. Číslo 7, resp. -7 znamená pohyb určitou rýchlosťou. Rozsah je od 1 do 10. Ak je číslo kladné, čím väčšie je, tým rýchlejšie pôjde text DOLE. Ak je však číslo záporné, čím je menšie, tým rýchlejšie pôjde text HORE. Aby sa však text nepohyboval aj naďalej, treba tam pridať pri odídení myši sponad obrázka zastavenie pohybu. To dosiahneme funkciou noscroll(), ktorá je taktiež zadefinovaná v hlavnej časti.

Ukážku celého príkladu nájdete zde.