Central Scrutinizer (blog italiano)

Stamattina mi sono svegliato con uno strano dubbio geometrico: quale termine si utilizza per indicare lo scambio delle coordinate x e y di un piano cartesiano?
Non avviene una traslazione ma…Uhm, non ricordo. E’ comunque quello che ho pensato di fare modificando il Tiny Scrolling per l’utilizzo in quei particolari layout che prevedono uno scrolling in orizzontale: forse ricordete questo vecchio post.

Dopo un brainstorming di sei ore con il mio team di comunicazione, la versione ha preso il nome di “Horizontal Tiny Scrolling”. (il coniglio Gegio aveva proposto all’inizio “Il lungo cammino verso l’Est”, soluzione valida per le prime due ore e quaranta)
Non starò a tediarvi come durante lo scorso post, anche perchè il funzionamento dello scrolling morbido è sempre riassumibile in un paio di righe: lo script cerca nella pagina un link interno (con un ‘#’), controlla la posizione della meta da raggiungere e fa uno scroll verso di questa ad una velocità variabile, in sostituzione del consueto disorientante salto diretto.
Questa volta naturalmente il movimento sarà da sinistra verso destra, e viceversa.
Come vedete nell’esempio online, per una “pagina tipo” ho disposto i paragrafi uno accanto all’altro applicandogli la proprietà float; al click di uno dei link interno lo scroll farà bloccare il paragrafo richiesto in corrispondenza dell’estremità sinistra della pagina. (si potrebbe aggiungere l’illuminazione temporanea dell’elemento interessato tramite la Fade Anithing Technique).
L’altezza del container, 509px, è quella che ho calcolato massima per evitare il comparire della barra di sinistra che complicherebbe ulteriormente l’usabilità. Il contesto è quello di un browser la cui altezza della pagina è limitata dalla presenza in contemporanea, ad esempio, di una web developer toolbar, una barra dei bookmark, ed un’altra toolbar come la Google- o la MozBlogBar.
Oltre al diverso funzionamento dello “scrollTo” le funzioni non riguardano più posizione Y relativa, altezza di pagina e finestra, ma naturalmente posizione X e larghezze. (vedi qui)
Un piccolo extra che ho aggiunto è lo scrolling della pagina tramite il mouse (come una normale pagina verticale) che sfrutta il movimento della rotellina come evento DOM. Queste ultime due funzioni (non l’intero script) sono riconosciute esclusivamente sui Mozilla (evento XUL) ed Explorer (evento proprietario) quindi non su Opera (e credo Safari).

function MouseScrollInit(){
	if (window.addEventListener ) {
	window.addEventListener("DOMMouseScroll", MouseScroll, false);
	} else document.attachEvent("onmousewheel", MouseScroll);
}
function MouseScroll(e) {
	if (!e) var e = window.event;
	if (e.wheelDelta <= 0 || e.detail>=0){
	window.scrollBy(80,0);
	} else  window.scrollBy(-80,0) ;
	}

Vedremo di esplorare più in dettaglio il piccolo mondo dei layout orizzontali in qualche post futuro, intanto ecco i file da scaricare:

• script (.js)
• script con esempio (.zip)

Postato Venerdì, Marzo 31st, 2006 alle 11:27 ma scritto qualche mese prima. Puoi seguire le poche risposte a questo post attraverso il feed RSS 2.0 . Puoi anche lasciare una risposta, o (qualcuno li usa ancora? scrivetemi) un trackback dal tuo sito.