[Cri]

Ciao a tutti, complimenti per il sito, stavo seguendo la guida jquery, per realizzare il layout del mio sito, però ho scritto poco codice in jQuery, per effettini semplici, quindi non sono proprio un guru.

Volevo chiedere il vostro aiuto per una funzione che non sono riuscito a scrivere interamente.

Potete vedere il progetto live su jsfiddle.
In pratica è il layout base del sito che sarà a scroll orizzontale ma anche responsive, e questo mi sta complicando le cose.
Ho un container, che contiene diversi wrapper, i quali saranno i contenitori delle varie pagine del sito.

Con jQuery (e la guida per niubbi sul vostro sito) son riuscito a fare in modo che il container per essere largo come tutti i wrapper. Ogni wrapper è largo il 100% della finestra del browser.

Fin qui tutto funziona, il problema è che se io sono sul div numero 7, e ridimensiono la finestra, lo scroll non rimane centrato su QUEL div.

Avrei bisogno di completare la funzione con il riposizionamento della visuale della finestra in modo che il div 7 rimanga sempre al centro, mentre ci sono sopra.


E' tutto molto più semplice da vedere che da spiegare: su jsfiddle
Provate a spostarvi ad un div, il 6 o il 7 per esempio, e poi a ridimensionare la finestra.

Qui per comodità incollo il codice jquery:

Sintassi: java [ Scarica ] [ Nascondi ]

Sintassi: java [ Scarica ] [ Mostra ]

1. $(document).ready(function() {
2.  
3.     var $page_number = 10;
4.     var $container_width = $(window).width() * $page_number;
5.     var $wrapper_width = $container_width / $page_number;
6.  
7.  
8.     $(".main-container").width($container_width);
9.     $(".page-wrapper").width($wrapper_width);
10.  
11.    
12.    
13.     $(window).resize(function() {
14.     $(".main-container").width( $(window).width() * $page_number);
15.     $(".page-wrapper").width($(window).width());
16. });
17.  
18. $(window).trigger('resize');
19.    
20.  
21. });
22.  

Seconda cosa, perché non funziona se uso la variabile container_width?

Sintassi: java [ Scarica ] [ Nascondi ]

Sintassi: java [ Scarica ] [ Mostra ]

1.     $(window).resize(function() {
2.     $(".main-container").width( $container_width);
3.  

Fatemi sapere! Grazie!

[Cri]

Nessuno sa aiutarmi? Mi sono spiegato male o è la soluzione ad essere molto complicata?

[maxlovegods]

Ho capito il problema, ma è abbastanza complicato da risolvere. Mi viene da pensare semplicemente che se qualcuno ridimensiona la finestra e la pagina si sposta, allora niente, se la riposiziona usando la barra di scroll.

Invece se hai proprio la necessità di fare questa cosa, come logica mi verrebbe da pensare che potresti usare qualche evento di ridimensionamento della finestra che ad ogni ridimensionamento riposiziona il div che in quel momento è in primo piano.

Ad esempio potresti far memorizzare in una variabile il div che ha la sua x più vicino allo 0 del browser. Quando appunto scatta l'evento, viene considerato quel div, che viene posizionato attaccato alla sinistra. Certo è più facile a dirsi che a farsi e provare a farlo insomma ci vuole un po' di tempo ed energie, ma credo sia possibile.

[Cri]

Grazie per la risposta, ho capito cosa intendi, purtroppo non sono espertissimo di jQuery, proverò a cercare qualche funzione per fare la cosa che dici.

Male che vada mi studio un modo per portare la visuale all'inizio del sito in caso di resize.


Però mi piacerebbe comunque trovare una soluzione più elegante, anche per fare un po' di pratica...

Ho trovato un sito che usa un metodo simile per gestire il layout, e credo faccia proprio quello che dici, ma nel codice non sono riuscito a trovare l'ispirazione Metto il link in caso di interesse: http://www.asiance.com/en/



Ho anche aggiornato un po' il codice: http://jsfiddle.net/Dchjw/

Sintassi: javascript [ Scarica ] [ Nascondi ]

Sintassi: javascript [ Scarica ] [ Mostra ]

1. var     $page_number = 10,
2.         $container_width = ($(window).width() * $page_number),
3.         $wrapper_width = ($container_width / $page_number),
4.         $page_height = ($(window).height() - 0)
5.         ;
6.  
7. $(document).ready(function() {
8.        
9.     $(".main-container").width($container_width);
10.     $(".page-wrapper").width($wrapper_width);
11.    
12.         $(".page-wrapper").height($page_height);
13.  
14.     $(window).resize(function() {
15.             var $width = ($(window).width()),
16.                         $height = ($(window).height());
17.                 $(".main-container").width($width * $page_number);
18.                 $(".page-wrapper").width($width);
19.  
20.                 $(".page-wrapper").height($height);
21.                 $(".main-container").height($height);
22.         });
23.  
24.         $(window).trigger('resize');
25.  
26. });
27.  

Grazie ancora!