Web-page: cambio testo ad intervalli
Spesso, in una web-page, può risultare molto utile alternare diverse scritte di testo in determinate aree: lo scopo, aggiungendo i necessari fogli di stile (CSS) può essere quello di ottenere una sorta di bacheca/display con informazioni che cambiano ad intervalli regolari.
La cosa può essere fatta senza troppa fatica utilizzando, lato client, le dovute funzioni javascript. Ovviamente, se le stringhe da alternare sono contenute nel codice (javascript), si va a perdere “materiale informativo”: in sostanza Google indicizzerà il sito in questione senza “valutare” le stringhe di testo aggiunte “by code” (lato client attraverso javascript).
Requisito: tutte le nostre stringhe che si alterneranno nella parte di visualizzazione dovranno, per forza di cose, essere presenti nel markup della pagina.
Qui di seguito espongo la mia soluzione, o meglio, l’inizio della mia soluzione: tempo permettendo spero di poter ampliare il codice riportato sotto fino ad ottenere una sorta di mini-libreria. Obiettivi finali del progetto:
- realizzare una soluzione “multi standard” che supporti sia pagine statiche (XHTML) che pagine dinamiche (ASP.NET e PHP);
- ottenere una soluzione flessibile che permetta di definire il testo in un file XML (per le pagine dinamiche);
- appoggiarsi alla libreria javascript jQuery.
Ecco la mia soluzione allo stato embrionale.
var current = -1
var max;
function timerEvent()
{
var Div = document.getElementById("bacheca");
if(Div != null)
{
var i;
var count;
if(current < 0)
{
for (i = 0, count = 0; i < Div.childNodes.length; ++i)
{
if(Div.childNodes[i].tagName == "DIV")
{
if(count < 1)
{
showDiv(Div.childNodes[i]);
}
else
{
hideDiv(Div.childNodes[i]);
}
++count;
}
}
current = 0;
max = count;
}
else
{
++current;
if(current >= max)
{
current = 0;
}
for (i = 0, count = 0; i < Div.childNodes.length; ++i)
{
if(Div.childNodes[i].tagName == "DIV")
{
if(count == current)
{
showDiv(Div.childNodes[i]);
}
else
{
hideDiv(Div.childNodes[i]);
}
++count;
}
}
}
setTimeout(timerEvent, 5000);
}
}
function showDiv(obj)
{
obj.style.display = "";
}
function hideDiv(obj)
{
obj.style.display = "none";
}
<div id="bacheca" style="height: 140px;"> <div>Text 0</div> <div>Text 1</div> <div>Text 2</div> <div>...</div> <div>Text n</div> </div>
La funzione javascript [timerEvent] va collegata all’evento [onLoad] della pagina. Saranno visualizzate alternativamente ed in successione i vari DIV (contenuti nel DIV con id “bacheca”), quindi avremo: “Text 0”, “Text 1”, “Text 2”, …, “Text n”, “Text 0”, … Ovviamente il DIV “contenitore” va impostato ad un’altezza predefinita se si vogliono evitare ridimensionamenti (e riposizionamenti) ad ogni “cambio testo”.
In questo esmpio, il testo viene cambiato ogni 5 secondi (vedere linea 60 di codice javascript).
