Proseguiamo sulla linea dello scorso appuntamento dedicato al Menu a comparsa con un altro esempio che, a prescindere dall'utilità pratica, ci consente ancora una volta di soffermarci sui principi alla base del cosidetto Javascript non intrusivo, quello che, tenendo separati i livelli della struttura (HTML), della presentazione (CSS) e dell'interattività (Javascript), tenta di coniugare l'aggiunta di effetti dinamici e di interazioni complesse con l'accessibilità. Gli effetti e le funzionalità fornite da JS, infatti, vengono applicate solo quando il supporto Javascript nel browser sia presente, senza però sacrificare la fruizione dei contenuti se tale supporto non è disponibile.
Un'eccellente risorsa sull'argomento è la traduzione in italiano del Corso di Javascript non intrusivo di Chris Heilmann. Ad essa rimando per tutti gli approfondimenti del caso.
Proprio di Chris Heilmann è lo script di cui ci occupiamo. Si tratta di DomNews, versione rivista e corretta di un classico dei tempi d'oro del cosiddetto DHTML: uno scroller di news. Subito i link essenziali:
- l'esempio;
- il pacchetto zip contenente la demo, il file domnews.js, il foglio di stile domnews.css.
La struttura
La parte HTML è delle più semplici. Codice pulito e semantico:
<div id="news">
<ul>
<li>News</li>
<li><a href="http://www.html.it">Inventato il linguaggio HTML</a></li>
<li>CSS is cool!</li>
<li>Ti piace Javascript?</li>
<li>I Love DHTML</li>
</ul>
</div>
Un div con id="news" racchiude una lista non ordinata con dei link. Tutto qui. Attenzione a mantenere l'id="news" perché serve come riferimento allo script.
La presentazione
Il CSS che gestisce la presentazione e l'aspetto del box presenta tre regole fondamentali su cui è utile soffermarsi:
#news
{
width:190px;
background:#eee;
}
Questa regola definisce l'aspetto del box (<div id="news">) quando Javascript non è disponibile. Deve essere impostata una larghezza esplicita tramite la proprietà width (width: 190px).
#news.hasJS
{
height:120px;
overflow:hidden;
position:relative;
}
Questa regola, invece, si applica al box quando esiste il supporto di Javascript nel browser. Lo script provvede ad aggiungere dinamicamente una classe .hasJs. In questa regola, è fondamentale notare che il box viene posizionato relativamente (position:relative;) e che la proprietà overflow va impostata sul valore hidden. È anche possibile fissare l'altezza con la proprietà height.
#news.hasJS ul
{
position:absolute;
top:120px;
left:0;
margin:0 .5em 0 .5em;
padding:0;
}
Quest'ultima regola definisce le proprietà della lista (<ul>) quando Javascript è supportato. Il posizionamento deve essere assoluto (position:absolute;), il valore della proprietà top deve coincidere con il valore della proprietà height definita per il box.
Tutto il resto del foglio di stile si può personalizzare a piacere scegliendo i colori e i font adatti al proprio sito.
Javascript in azione
Lo script che gestisce lo scroller viene inserito nel modo consueto. Il resto lo fa tutto lui:
<script type="text/javascript" src="domnews.js"></script>
All'inizio del codice si trova una serie di variabili che definiscono alcuni aspetti fondamentali del funzionamento. Nel JS allegato sono stete commentate in italiano per consentire una facile personalizzazione. Ci soffermiamo qui solo su una:
var dn_stopMessage='Ferma lo scroller';
Visualizzando la demo, avrete di certo notato che lo scroller è accompagnato da un link che consente di fermare lo scorrimento delle news. È una buona norma di usabilità lasciare all'utente il controllo su questi aspetti, per cui va bene lasciarlo sempre. La variabile vista qui sopra consente di personalizzare il testo del link.
