In questo articolo vedremo una variante del News Ticker javascript descritto qui.
Molti utenti negli ultimi mesi mi hanno chiesto se era possibile reperire le news da un file esterno presente sul server (magari un semplice file txt) invece che scriverle direttamente nell’html della pagina principale, in modo tale da rendere più facili e veloci le successive modifiche/aggiornamenti dell’elenco news.
Nella precedente versione, ricordo che le news andavano definite ciascuna all’interno di un tag <p> e a loro volta inscatolate all’interno di un <div>; ciò che faremo è leggere le news da un file esterno e quindi generare “a volo” il codice html.

Vediamo subito un esempio di file contenente le news (db_news.txt):

News numero 1... [continua]!
News numero 2...
News numero 3...

Il file è molto semplice e richiede poche spiegazioni, l’unica accortezza è quella di scrivere una news su ciascuna riga ed evitare la presenza di righe vuote.

Nel codice javascript aggiungiamo una nuova funzione a quelle gia presenti nella versione 1.0; ecco il codice:

function carica(id_div){
    $.ajax({
         type: "GET",
         dataType: "text",
         url: "db_news.txt",
         data: "",
         cache: false,
         success: function(dati){
               var news = dati.split("\n");
               for(var i=0; i<news.length; i++){
                   var p = $('<p/>').html(news[i]);
                   $(p).appendTo('#'+id_div);
               }
               start(id_div);
         }
     });
}

La funzione carica() accetta come parametro d’ingresso l’ID del div che conterrà le news. Tramite una chiamata Ajax (implementata con jQuery) richiama il file db_news.txt e ne legge il contenuto una riga alla volta. Per ogni riga compone il codice HTML appropriato, scrivendo in un tag <p> il testo ($(‘<p/>’).html(news[i])) e aggiungendo lo stesso al box (appendTo).
Terminata la lettura delle righe che compongono il file viene richiamata la funzione start(id_div) che ha il compito di inizializzare il box news (vedi versione 1.0 per dettagli).

Per dovere di completezza vediamo il codice completo del News Ticker versione 2.0, ricordo che in fondo all’articolo trovate i link per la demo e per il download:

// VELOCITA' TRANSIZIONE NEWS (ESPRESSA IN SECONDI)
var speed = 5;

// VARIABILI GLOBALI (NOTIZIE SARA' L'ARRAY CHE CONTERRA' LE NEWS)
var index = 0;
var limite = 0;
var notizie = null;
var rotazione = null;

// FUNZIONE CHE CARICA LE NEWS DA FILE ESTERNO - CHIAMATA AJAX
function carica(id_div){
    $.ajax({
         type: "GET",
         dataType: "text",
         url: "db_news.txt",
         data: "",
         cache: false,
         success: function(dati){
               var news = dati.split("\n");
               for(var i=0; i<news.length; i++){
                   var p = $('<p/>').html(news[i]);
                   $(p).appendTo('#'+id_div);
               }
               start(id_div);
         }
     });
}

// FUNZIONE DA CHIAMARE ALLO START DEL BOX NEWS
function start(id_div){
	var box = document.getElementById(id_div);
	$(box).mouseenter(function(){stop();});
	$(box).mouseleave(function(){play();});
	$('#chiudi').click(function(){ $(box).fadeOut();});
	notizie = box.getElementsByTagName('p');
	limite = notizie.length;
	inizializzazione(notizie);
	newsIn();
}
// FUNZIONE NECESSARIA ALL'INIZIALIZZAZIONE
function inizializzazione(elementi){
	for(i=0; i<elementi.length; i++){
		elementi[i].style.display='none';
	}
}
// FUNZIONE PER NEWS IN INGRESSO
function newsIn(){
	rotazione = setTimeout('newsOut()', (speed*1000));
	$(notizie[index]).fadeIn(1000);
}
// FUNZIONE PER NEWS IN USCITA
function newsOut(){
	$(notizie[index]).fadeOut(1000, function(){
		index++;
		if(index==limite){
			index = 0;
		}
		newsIn();
	});
}
// FUNZIONE PER LO STOP DELL'ANIMAZIONE (ATTIVA AL PASSAGGIO DEL MOUSE)
function stop(){
	clearTimeout(rotazione);
}
// FUNZIONE PER LA RIPARTENZA DELL'ANIMAZIONE (ATTIVA AL PASSAGGIO DEL MOUSE)
function play(){
	clearTimeout(rotazione);
	rotazione = setTimeout('newsOut()', 1000);
}

Per avviare la finestra con le news è necessaria la seguente riga Javascript dopo aver definito il div nell’html:

<script type="text/javascript">
carica('box');
</script>

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.