Un newskicker in Javascript... con un pizzico di jQuery

Corso Javascript Impara a creare controlli ed animazioni

I portali di news sono generalmente molto pieni di box di notizie e, dato il frequente aggiornamento ad opera della redazione che ci lavora, le news più succulente rischiano in poco tempo di scivolare in fondo alla homepage.

Sta quindi al programmatore del CMS prevedere lato server un sistema di messa in evidenza delle notizie più importanti che necessitano poi di un'esposizione adeguata che può consistere in un elenco pedissequo di notizie, o di una modalità che in gergo giornalistico viene definita "flash", da non confondere col noto programma di casa Adobe.

Ed è esattamente questo secondo caso che andiamo ad esaminare: creeremo un newstiker per le nostre notizie più importanti ed useremo Javascript per ottenere l'effetto che prevederà la comparsa dalla prima all'ultima notizia (quindi di nuovo la prima, e così via in loop continuo).

Per rendere meno "freddo" l'effetto possiamo utilizzare jQuery e prevedere un effetti slide o fade, a nostro piacimento. Non a caso, però, nello script che ho creato non ho utilizzato comandi jQuery per l'effetto "minimale", dato che c'è chi preferisce non avvalersi di questo framework che, nella sua infinita bellezza, occupa molta banda, dato il sostanzioso perso del file Javascript che lo contiene.

Vediamo quindi la dinamica per la creazione di questo sistema di esposizione "flash" delle notizie, ipotizzando di voler utilizzare jQuery; allo scopo, includiamo la libreria nelle nostre pagine:

<script type="text/javascript" src="jquery.js"></script>

Segue il codice Javascript completo:

<script language="javascript">
var NTick_T = new Array();
var NTick_A = 0, NTick_B = 0;
NTick_T[NTick_A++] = "Testo della notizia # 1".link("prima.html");
NTick_T[NTick_A++] = "Testo della notizia # 2".link("seconda.html");
NTick_T[NTick_A++] = "Testo della notizia # 3".link("terza.html");
window.onload = function() { NTick(); }
window.setInterval("NTick()", 5000);
function NTick()
{
	if (NTick_A == NTick_B) NTick_B = 0;
	document.getElementById("NTick_H").innerHTML = NTick_T[NTick_B++];
	$("#NTick_H").hide();
	$("#NTick_H").fadeIn(1000);
}
</script>

Da notare che le uniche due righe jQuery sono evidenziate in grassetto: per coloro che desiderano accontentarsi dell'effetto minimale, sarà sufficiente rimuoverle, senza ovviamente includere la libreria.

NTick_T[NTick_A++] = "Testo della notizia # 1".link("prima.html");
NTick_T[NTick_A++] = "Testo della notizia # 2".link("seconda.html");
NTick_T[NTick_A++] = "Testo della notizia # 3".link("terza.html");

Per popolarlo con le notizie presenti nel database del nostro giornale online, sarà sufficiente (con ASP o PHP) effettuare un ciclo sui record interessati e stamparli all'interno del codice Javascript che valorizza gli item dell'array, estraendo quindi il titolo della notizia e costruendo dinamicamente il link.

Il tutto verrà stampato all'interno di un elemento di testo contrassegnato da un ID:

<div id="NTick_H"></div>

Se volessimo utilizzare un elemento puntatore che preceda sempre le notizie che appariranno a video, sarà sufficiente trasformare i "div" in "span" e specificare all'esterno il puntatore.

Quindi:

:: <span id="NTick_H"></span>

E questo è quanto!

TAGS - jquery, newsticker in javascript