spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 10.10.2013
Hodnoť článok:
3 0

jQuery: Ako na jednoduchý NEWS ticker?

Tak, ako väčšina mojich článkov, tak aj tento vzniká práve z dôvodu aktuálneho hľadania riešenia pre klienta. Prinášam veľmi jednoduché riešenie efektného newstickeru.

Základnou prípadovou štúdiou a teda niečím, čo som musel vyriešiť pre klienta - aj keď je na to miliarda rôznych pluginov, ktoré majú zbytočne veľa riadkov kódu, - newsticker, alebo inými slovami novinkový pás, v ktorom sa obmieňajú najaktuálnejšie novinky či udalosti.

Príprava HTML kódu

Tak, ako sme sa naučili robiť pekné navigácie a bloky v rôznych divoch či UL LI tagoch, tak tomu bude aj v tomto našom prípade. Pripravíme si teda HTML, ktoré bude reprezentovať zoznam noviniek, ktoré chceme "rotovať".

<ul id="newsticker">
    <li>TÉMA: <a href="#">Titulok pre tému...</a></li>
    <li>TÉMA: <a href="#">Titulok pre tému...</a></li>
    <li>TÉMA: <a href="#">Titulok pre tému...</a></li>
    <li>TÉMA: <a href="#">Titulok pre tému...</a></li>
    <li>TÉMA: <a href="#">Titulok pre tému...</a></li>
</ul>

Ako vidíte, je to skutočne jednoduché HTML s nejakým tým preklikom a tak podobne. Proste čisté a simple. Dôležité bude všetko ostatné - CSS, jQuery a tak podobne.

Príprava CSS štýlov

Nakoľko chceme mať kontrolu nad tým, čo je zobrazené a čo je skryté, budeme samozrejme čo-to skrývať. Na to nám pomôže práve CSS v ktorom určíme presné rozmery, ktoré má newsticker mať.

#newsticker {
   list-style:none;
   padding:0;
   margin:0;
   height: 20px; /* je nutné dávať rozmer podľa výšky, ktorú potrebujete */
   overflow: hidden;
}

#newsticker li {
   display:none;
}

V CSS vidíte, že sme nastavili výšku na 20 px. Samozrejme je nutné nastaviť výšku tak, aby ste mali zobrazený vždy len jeden riadok a teda prispôsobiť si to pre vlastné potreby. Ďalej máte možnosť vidieť, že všetky vnorené LI sú skryté. V úvode ich fakt nepotrebujeme zobraziť, nakoľko chceme aby mal ticker pekný FADE-IN a FADE-OUT efekt.

Pripraviť sa... POZOR! Interval!

Keď si zobrazíte to HTML s CSS, tak nič neuvidíte. Samozrejme. Na to, aby to všetko ožilo je nutné aby ste pridali aj to kúzelné JavaScriptové peklo.

var eventsInterval = null, // pre reset intervalu
	intervalLimit = 5000; // dĺžka pauzy medzi animáciami

$(document).ready(function(){
        // zistíme si, či je niektorý slide nastavený ako úvodný
	if($('#newsticker li.next').length === 0) {
                // prvému elementu v zozname nastavíme triedu pre animáciu
		$('#newsticker li:first').addClass('next');
	}
	rotateEvents();
	// spustíme interval, ktorý nám bude vykonávať proces
	eventsInterval = setInterval(rotateEvents,intervalLimit);
});

function rotateEvents() {
	// skryjeme aktuálny slide, ktorý dostal triedu "prev"
	$('#newsticker li.prev').animate({
		opacity: 0
	},300,function(){
                // naklonujeme si element, aby sme ho vedeli opäť
                // pridať do zoznamu a my sme tak vytvorili nekonečnú
                // slučku
		var cl = $(this).removeClass('prev').clone();

		$('#newsticker').append(cl);
                // odstránime ho z prvej pozície, aby sa na jeho miesto
                // dostal ďalší "slajd" s novinkou
		$(this).remove();

	});
	// keďže sme mali všetky elementy v CSSku ako display:none musíme to napraviť
	$('#newsticker li.next').css({
		'opacity':0,
		'display':'block'
	});

        // nájdeme .next objekt, aby sme ho zviditeľnili
	$('#newsticker li.next').animate({
		opacity: 1
	},300,function(){
		// po zviditeľnení ho označíme ako "prev" aby sme
                // ho mohli v ďalšom obnovení opäť skryť a presunúť
                $(this).removeClass('next').addClass('prev').next().addClass('next');

	});

}

A čo záverom?

Na záver je úplne zbytočné dodávať akékoľvek kecy. Využiteľnosť je samozrejme čisto na Vás a berte to ako veľmi rýchlu cestu ako niečo takéto spraviť. Dúfam, že Vám to pomôže.

Malá ukážka ako to celé funguje: http://jsfiddle.net/gK55P/
Vďaka Jozef

František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
3 0

7 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 František Čaník 21.10.2013 11:51:27
@Juraj: a) fade-in/out ti neposunie prvok, ani ti ho neskryje, takze zostane na svojej pozicii, tym padom by si musel riesit okrem toho asi aj nieco ine ako len fade effekt... preto som ti napisal, aby si spravil nejake demo, aby si si svoju teoriu vyskusal v praxi
0 0 Juraj Husar 18.10.2013 23:42:27
@František Čaník podla toho aký trasition si želáš, v prípade že len miznutie tak to nieje problém - ak chceš postupný presun do strany alebo z hora/dole tak vtedy by to bolo potrebné riešiť napríklad tvojím spôsobom to klonovanie..
0 0 František Čaník 14.10.2013 11:02:35
Eduard: preco zvysovat data na uz aj tak zbytocne dost premrstene weby?
Juraj: no, nahod nejake "demo", nech si viem zivo predstavit ako urobis cez css transition nekonecny cyklus. rad sa priucim
0 0 Juraj Husar 13.10.2013 11:06:02
fuu no neviem či to je najjednoduchšie riešenie. Osobne by som v žiadnom prípade neklonoval elementy. Na animáciu prechodu by som použil css transition.
0 0 Eduard Marcinčo 11.10.2013 19:34:39
Odporucam tento jquery plugin: http://jquery.malsup.com/cycle/
2 0 František Čaník 10.10.2013 09:24:18
Jozef: Super nápad ;) aspoň nemusím vyrábať demo ;)
3 0 Jozef Kučera 10.10.2013 08:26:43
Dovolil som si urobit demo http://jsfiddle.net/gK55P/
Zajtra.sk > Programovanie > JS/jQuery > jQuery: Ako na jednoduchý NEWS ticker?


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama