Nel preparare l'indice di Layout Gala ho pensato di impiegare un layout liquido con delle miniature float, le tanto conosciute floating thumbnails che ho già usato in diverse occasioni su PRO. C'è però una cosa non credo sia molto facile ottenere con i soli CSS: avere una o più sezioni di testo la cui larghezza si accorda perfettamente con quella delle miniature, tale da sintonizzare
l'allineamento del testo con entrambi i lati della galleria. Volevo infatti dare risalto all'elemento centrale della pagina, ovvero la galleria, e mantenere un certo ordine con il testo della pagina.
Ho così pensato di utilizzare CSS e Javascript con un approccio master-slave.
In elettronica questo termine si riferisce ad un'architettura in cui un dispositivo (il master)
controlla uno o più dispositivi (slave). Nel caso della pagina indice di Layout Gala (che vi invito ad osservare con Javascript disabilitato) la galleria di thumbnails è il master, mentre le sezioni di testo precedenti e successive sono gli slave. Credo che sia una tecnica che valga la pena di spiegare.
Per prima cosa bisogna far sì che la galleria ul#gallery che contiene le miniature
float abbia una larghezza variabile: basterà dichiararla float:left nel CSS così che assuma la larghezza pari a quella di una riga di miniature. A questo punto interviene javascript e una piccola funzione che rileva la larghezza della gallery e la assegna alle due sezioni di testo (ovvero i div con id="intro" e id="details"). Ecco il codice:
function SetWidth(){
if(!document.getElementById) return;
var w=$("gallery").offsetWidth-20;
if(w>0 && w!=null){
$("intro").style.width=w+"px";
$("details").style.width=w+"px";
}
}
function $(id){
return(document.getElementById(id));
}
La funzione SetWidth() dopo aver verificato il supporto del DOM rileva la larghezza della galleria, sottrae i 20px di margine extra che costituiscono lo spazio tra due miniature adiacenti e assegna il risultato ai due div di testo. Per brevità ho usato la funzione d'appoggio $ che restituisce l'elemento con un dato id.
Infine, la funzione SetWidth() viene invocata al caricamento e al ridimensionamento della pagina:
window.onload=function(){SetWidth()};
window.onresize=function(){SetWidth()};
Questo è tutto: una regola aggiuntiva nel CSS e una decine di righe Javascript hanno sistemato
le cose. In chiusura vorrei evidenziare il fatto che si tratta di un uso presentazionale di Javascript,
ma a parer mio perfettamente lecito, che consente di superare i limiti di CSS e non toglie assolutamente niente alla pagina nel caso Javascript sia disabilitato.