Newsgroup: it.comp.lang.javascript
Titolo: caricamento pagina con scrolling orizzontale

Ciao,
come da oggetto, vorrei realizzare un'animazione di caricamento di
una pagina simile analoga a quella utilizzata nel sito Github.com; date
un occhio ad esempio a questo url:
https://github.com/padrino/padrino-framework
 
 
l'utente può fare il browsing dei contenuti cliccando sul nome di una
cartella dell'elenco; la pagina di destinazione viene richiamata ed
entra scrollando da destra, rimpiazzando il div preesistente.
 
Ho dato un occhio al codice ma è davvero troppo ostico per me capirci
qualcosa.
Immagino ci sia lo zampino di JQuery... ma ho visto che l'animazione
funziona anche usando i tasti back/forward del browser e mi chiedo
come ci siano riusciti.
 
Consigli?
m.
 
 
-- 
"La legge, in Italia, è come l'onore delle puttane"
(Curzio Malaparte)

 entra scrollando da destra, rimpiazzando il div preesistente.
 
Non viene richiamata tutta la pagina, solo la porzione di testo relativa
allo scrolling.
 
In pratica:
 
- clicchi sul link (es: 
http://yoursite.com/page-1.html
")
 
- becchi tramite javascript l'evento (`onclick`) prima che venga
eseguito l'href
 
- verifichi se il browser supporta un certo set di istruzioni (es.
XMLHttpRequest e le history API)
 
- se non le supporta, non fai niente: il browser esegue quindi il link
normalmente, e ti va sulla pagina indicata.
 
- se le supporta, aggiungi un parametro all'url (es:
http://yoursite.com/page-1.html?slides
"), in modo che il server sappia
che deve solo ritornare una porzione del file, e non tutto (cioè, non
deve ritornare il tag html, body, le definizioni CSS, etc).
 
- fai la chiamata tramite XMLHttpRequest, fai il push dello state nella
history tramite le history API
(
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
),
in modo da poter agire sui tasti back/forward e avere la location
aggiornata senza, difatto, cambiarla.
 
- eviti che l'href venga eseguito facendo un `return` `false` o un
`event.preventDefault` alla fine del tuo `onclick`.
 
Questo per quanto la parte più "critica" dello script, diciamo.
L'animazione di suo non ha niente a che vedere, si tratta di animare due
DIV in quel modo, in pratica quando clicchi fai partire anche
un'animazione che ti sposta un div creandotene un'altro. La puoi fare in
JS puro (ho scritto recentemente una funzione sul NG per fare semplici
animazioni), in jQuery, in CSS3... in tutto quel che ti pare.
Si tratta di avere un DIV "container", position relative. Dentro il
quale hai un DIV, position relative o absolute, come ti torna più
comodo. Dato che la width del contenitore (github) è fissa, lo è anche
quella delle slide interne. A quel punto quando clicchi devi solo creare
un elemento a fianco di quello visualizzato, che sarà nascosto, e
cambiare poi dinamicamente la `left` di entrambi finché il secondo div
non sarà visibile. Quando la richiesta HTTP avrà finito di essere
eseguita, mostrerà il risultato su quel nuovo div, tramite un:
 
    slide.innerHTML = http.responseText;
 
O qualcosa di simile.
 
Nota:
Ci sono diversi workaround per supportare quei browser che non hanno le
history API, ma in tal caso non puoi cambiare la URL in quel modo senza
dover ricaricare tutto quanto, dovrai affidarti all'hash. Se per te non
è indispensabile, ti suggerirei di fare come, appunto, GitHub, che in
caso di mancato supporto caricano la pagina normalmente.