Sviluppare un sito in orizzontale
Dopo un breve periodo di inattività torno a scrivere sul blog un tutorial per creare un sito in orizzontale.
Recentemente, un amico e collega, Enrico, mi ha contattato per chiedermi una mano su come sviluppare un sito in orizzontale per la campagna promozionale di un suo cliente.
Siamo partiti dal template di thw per ottenere quello che volevamo, solo che il template messo a disposizione non andava bene e abbiamo dovuto fare un pò di hack. Ecco in dettaglio tutto:
HTML
L’html è piuttosto semplice, bisogna solo essere attenti:
<div class=“pagina1” id=“first”>
<div class=“content”>
<p>1 <a href=”#second”>2</a>
<a href=”#third”>3</a></p>
<h3>First Section</h3>
<h4>The left and the right siders, new
friends.</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Maecenas vel urna. Donec vestibulum fringilla urna. Pellentesque
ut ante. Pellentesque non magna eu felis nonummy aliquam. Pellentesque
viverra risus vel felis. Nunc id tellus vel purus euismod tempor..</p>
</div>
</div>
Infatti, gestiremo tutto con css.
Il sito in questione ha 3 blocchi, e cliccando su un dato link, lo scroller javascript ci porterà ad un’altro blocco, dandoci così l’impressione di “sfogliare” un sito. Ovviamente è possibile togliere o aggiungere blocchi senza problemi, bisogna solo ricordarsi di sistemare il tag body nel css che vedremo tra poco.
CSS
Qui sta tutto il gioco.
Dato che noi abbiamo 3 blocchi, il css sarà così:
body
{
margin: 0px;
padding: 0px;
width: 297%;
}
Si, avete visto bene, width:297%; . Infatti questo servirà a definire la larghezza del body, e a puntare precisamente i blocchi al centro della pagina qualsiasi sia la risoluzione dello schermo. 297 perchè ci sono 3 blocchi, cioè 99x3. Se vogliamo aumentare i blocchi dobbiamo anche aumentare questo valore che arriverà a 99x4, cioè 396% per 4 blocchi.
Ogni singolo blocco (oltre tutti gli elementi di stile) sarà così:
.pagina1, .pagina2, .pagina3
{
width: 33%;
margin: 0px;
padding: 0px;
float: left;
}
viene impostato per arrivare ad un massimo del 99%. Se volete aggiungere un blocco, dovete agire aumentando la dimensione del body, e diminuendo qui (per esempio, 4 blocchi, ogni blocco 25%, e così via).
Ovviamente sta a voi renderlo più graficamente accattivante.
Javascript
Sul javascript abbiamo avuto i problemi più grandi. Quello di thw non andava bene con Internet Explorer e così abbiamo dovuto arrangiarci con una vecchia versione dello stesso.
Note finali
Abbiamo speso un bel pò del nostro tempo su questa cosa, quindi se la usate, per favore, linkateci come noi abbiamo linkato thw (Marco Rossella, a cui vanno i nostri meritatissimi complimenti per tutto il lavoro svolto con questo progetto.)
Ovviamente il codice è tutto valido xhtml, così come il css.
Scarica il progetto completo (formato .zip, 5,45kb)
Demo
Lauryn
21 Feb 2008, alle 2:42
Ciao Marco!
Fantastico questo articolo. Lo vogliamo riproporre su Iwd, possiamo? Ovviamente sarà inserito il link back al tuo articolo, noi lo segnaliamo solamente!
Marco
21 Feb 2008, alle 5:50
Fai pure Lauryn
cirio
22 Feb 2008, alle 6:34
ottimo, una buona risorsa da aggiungere ai preferiti;) se hai tempo dammi un consiglio spassionato sul mio site(non pretendo nessuna analisi dettagliata);) byez
Franco
25 Apr 2008, alle 9:20
Ciao, bella idea quella di creare pagine affiancate.
Con IE6 non funziona, lo sapete? C’è una scelta precisa dietro questo?
Inoltre con FF3 beta5 se uso la scrollbar riesco a fermare le pagine “a metà”... non si potrebbe inventare un modo per centrare automaticamente la pagina senza premere sui numeri?
Altra domanda: perchè non vi siete affidati ad un framework più potente come mootools per gli effetti con javascript? (ovviamente senza nulla togliere all’ottimo script che usate)
Marco
25 Apr 2008, alle 3:44
Ciao Franco, grazie innanzitutto dell’interessamento.
Con ie6 ora funziona, gli dava fastidio il commento prima del codice nel file scroll.htm
Il fatto che tu riesca a fermare la pagina a metà durante lo scrolling è un fatto molto strano, magari dipende dal fatto che hai usato una versione beta, non so, dobbiamo fare dei test (comunque credo sia un caso limite il fatto che tu abbia fermato la scrollbar, a me va troppo veloce non riesco mica
)
Infine, per rispondere alla tua ultima domanda, non abbiamo usato un fw per il semplice motivo di tempo, abbiamo avuto pochissimo tempo per creare questo sito e quindi abbiamo cercato e trovato uno script già bello completo che faceva al caso nostro, tutto qui
cristiano carli
28 Apr 2008, alle 2:51
Come copy proveniente dal giornalismo, apprezzo molto questo tipo di lettura che si sviluppa sia in verticale che in orizzontale. Credo che la suddivisione orizzontale consenta di scandire meglio gli argomenti e di permettere, fra una pagina e l’altra, una brevissima ma salutare pausa mentale.
Oltre alla demo, ci sono già anche applicazioni pratiche?
Marco
29 Apr 2008, alle 12:46
Una serie di applicazioni pratiche simili sono presenti sul sito http://www.thehorizontalway.com/.
Un’applicazione pratica di questo in particolare non ce ne sono, o meglio, una, dalla quale siamo partiti per questo articolo c’è, ma non può essere mostrata per motivi di copyright
Andrea Baccolini
06 May 2009, alle 12:12
Ciao ottimo javascript l’unica cosa e che sia FF3 che IE7 mi danno un errore.
FF3:
Errore: obj is null
File sorgente: http://andreabaccolini.altervista.org/new/js/thw.js
Riga: 213
IE7:
linea 214
carattere 2
errore Necessario oggetto
codice 0
il java funziona ma mi compaiono questi 2 errori è possibile risolverli in qualche modo?
Marco
08 May 2009, alle 5:50
Ciao Andrea, sinceramente così su due piedi non saprei risponderti, questo weekend se ho un pò di tempo provo a dargli un’occhiata.
Andrea Baccolini
26 Jun 2009, alle 2:02
Ciao Marco hai avuto tempo di darci un ‘occhiata allo script?
Marco
26 Jun 2009, alle 2:12
Si, l’ho script l’ho guardato, ma sinceramente non so che dirti, la riga che da errore è questa:
obj.addEventListener( type, fn, false );
sinceramente non so che fare, javascript non è il mio forte.
Andrea Baccolini
11 Nov 2009, alle 6:10
Ciao ho trovato la soluzione del problema in un forum.
Eccola:
——
On August 13th, 2008, Uffe Pep said: 37
Solution to the object required problem: Delete the following lines from the “var Scrolltips ”
var left = document.getElementById(’left’);
addEvent(left,’mouseover’, function() {this.dx=setInterval(’scrollTips.arrowScroll(0)’,100);return false;});
addEvent(left,’mouseout’, function() { clearInterval(this.dx); return false;});
var right = document.getElementById(’right’);
addEvent(right,’mouseover’, function() {this.dx=setInterval(’scrollTips.arrowScroll(1)’,100);return false;});
addEvent(right,’mouseout’, function() { clearInterval(this.dx); return false;});
The above lines refer to the blue arrows in the example file that scrolls the window on mouseover. If you are not using these arrows in your page that javascript will try to call them thus giving a object required error.
—-
Dal sito “http://www.centralscrutinizer.it/en/design/js-php/horizontal-tiny-scrolling/”
Marco
11 Nov 2009, alle 6:33
Ottimo! Grande Andrea!
Del resto il tipo del sito che hai citato è il creatore dell’originale, quindi chi meglio di lui
Ps: attento al copyright sul tuo sito
Andrea Baccolini
12 Nov 2009, alle 3:24
Non credo ci siano problemi è un javascript free cmq nel codice è scritto il copyright nn lo spaccio per mio quindi.
Francesco
26 Oct 2011, alle 5:33
Salve.
Volevo far notare che questa soluzione crea grossi problemi per tutti quelli che utilizzano sistemi mac e in generale tutti quelli che usano un mouse con rotella sia orizzontale che verticale. Lo scrolling verticale ha effetti su quello orizzontale e questo è un problema :S