Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

Finestra news con effetto fade (news ticker) – v 2.0 news da file esterno

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.

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Ti potrebbe piacere anche

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×