Unofficial WebSite X5
Categoria generale => FAQ - HowTo - Tutorials => Topic aperto da: stesil - 05 Settembre, 2014, 01:03:05
-
Esistono diversi modi per ottenere un sito con fasce di sfondo orizzontali a tutta pagina. Noi abbiamo fatto questa prova sfruttando la struttura HTML che il programma crea:
http://lemonsong.altervista.org/test_div_strip/ (http://lemonsong.altervista.org/test_div_strip/)
http://stesil.altervista.org/evo10/fasce-orizzontali/ (http://stesil.altervista.org/evo10/fasce-orizzontali/)
WebSite racchiude in un unico div anonimo gli oggetti che sono presenti sulla stessa riga della griglia della pagina. Se un oggetto si estende su più righe il div contenitore raggrupperà gli oggetti adiacenti contenuti in tutte le righe interessate.
Le immagini forse spiegano meglio delle parole:
http://lemonsong.altervista.org/test_div_strip/files/creazione_pg.png (http://lemonsong.altervista.org/test_div_strip/files/creazione_pg.png)
http://stesil.altervista.org/evo10/fasce-orizzontali/images/page.png (http://stesil.altervista.org/evo10/fasce-orizzontali/images/page.png)
Ogni div contenitore corrisponde a una fascia orizzontale. La funzione JavaScript si occupa di assegnare ad esso una larghezza dinamica e una classe, il cui nome contiene un numero crescente (a partire da 0): sfondo0, sfondo1, sfondo2...
E' sufficiente quindi scrivere il codice CSS di ogni classe generata per formattare a piacere ogni fascia.
Codice CSS
In head della pagina (Proprietà pagina, esperto, prima della chiusura del tag HEAD) devono essere definiti gli stili per ogni fascia, ossia per ogni div contenitore.
Esempio http://lemonsong.altervista.org/test_div_strip/ (http://lemonsong.altervista.org/test_div_strip/)
Only registered users can see contents. Please click here to Register or Login.
Alle tre fasce è stato assegnato un diverso colore di sfondo.
Esempio http://stesil.altervista.org/evo10/fasce-orizzontali/ (http://stesil.altervista.org/evo10/fasce-orizzontali/)
Only registered users can see contents. Please click here to Register or Login.
In questo caso alle fasce 0 e 3 sono state assegnate immagini di sfondo, mentre alle fasce 1 e 2 è stato assegnato lo stesso colore di sfondo.
Codice JavaScript
Scaricare questo file http://stesil.altervista.org/evo10/fasce-orizzontali/files/jq_strip.js (http://stesil.altervista.org/evo10/fasce-orizzontali/files/jq_strip.js) ed allegarlo al progetto attraverso un oggetto HTML e Widgets, indicando come cartella di destinazione la cartella files.
Sempre in head della pagina inserire questo codice:
Only registered users can see contents. Please click here to Register or Login.
Lo script è stato testato con la versione 10.1.10.54
AGGIORNAMENTO PER LA VERSIONE 12: http://www.unofficialwsx5.com/index.php?topic=1833.msg14752#msg14752 (http://www.unofficialwsx5.com/index.php?topic=1833.msg14752#msg14752)
-
salve, ho usato la striscia per questa bozza
http://www.realizzazionesitiwebsalerno.it/nereidi/index.html
funziona tutto correttemente ma noto che su Chrome, in basso al footer mi escono le barre laterali. come mai? grazie.
-
Risposto qui: http://www.unofficialwsx5.com/index.php?topic=1859.0 (http://www.unofficialwsx5.com/index.php?topic=1859.0)
@mod/admin
Eventualmente, potete cancellare questi ultimi due post, grazie.
-
salve,
lo stavo provando con la evo11 ed è vero, con chrome (e opera) appare la barra orizzontale, ridimensionando la finestra si vede a intermittenza ogni pochi px, fermandosi nel momento in cui si vede rimane visibile, fa piu o meno lo stesso con safari ma non rimane visibile.
invece andando sotto la misura di impage si vede un margine a sinistra, questo su tutti i browser.
http://templatex5.altervista.org/stiky2/index.html
-
Sì, c'è un pixel ballerino: in alcune situazioni, l'arrotondamento si fa sentire.
Prova a sostituire, nello script, il metodo Math.floor con Math.ceil
Per il resize sotto la larghezza del sito, ci dobbiamo pensare un po' di più :)
-
Sì, c'è un pixel ballerino: in alcune situazioni, l'arrotondamento si fa sentire.
Prova a sostituire, nello script, il metodo Math.floor con Math.ceil
Per il resize sotto la larghezza del sito, ci dobbiamo pensare un po' di più :)
Grazie Lemon, per la scrollbar direi che è risolta al 99%.
-
Abbiamo modificato lo script e sembra che il problema del resize non ci sia più: http://stesil.altervista.org/evo10/fasce-orizzontali/files/jq_strip.js (http://stesil.altervista.org/evo10/fasce-orizzontali/files/jq_strip.js)
Il pixel ballerino, invece, potrebbe rivedersi sulla destra in alcune situazioni: quando la differenza tra la larghezza della finestra e la larghezza del div è un numero dispari, occorre approssimare all'intero il quoziente della divisione /2. Il valore calcolato in questa situazione non è quindi "esatto".
Provalo e facci sapere.
Grazie per la segnalazione.
-
Ciao ragazzi, ho provato a realizzare alcune pagine come l'esempio ma non capisco perchè l'effetto è questo:
http://www.xunil.it/template/contatti.html (http://www.xunil.it/template/contatti.html)
Lo righe non coprono tutto lo schermo, come mai? Qualche suggerimento? ;D
-
Attualmente hai inserito tre (3) volte lo script.
Basta una volta, in head.
-
Si già l'ho modificato. Ho inserito il codice html solo nella sezione esperto ma non ho risolto il problema
-
No, guarda che ti stai sbagliando. Ce ne sono ancora due, tutti e due in head.
-
Ti dico quello che ho fatto:
- in impostazioni avanzate nella sezione esperto "prima della chiusura del tag HEAD" ho inserito questo codice "<script src="files/jq_strip.js"></script>" ed ho collegato il file jq_strip.js
- dentro ogni pagina in proprietà ho inserito il codice (ovviamente modificando il numero di stringhe ed i colori in base elle mie esigenze):
<style>
.sfondo0 {
background-color:#FFCC66;
}
.sfondo1 {
background-color:#7BB5EF;
}
.sfondo2 {
background-color:#003366;
}
.sfondo3 {
background-color:#7BB5EF;
}
.sfondo4 {
background-color:#003366;
</style>
Tutto qui!
-
Ti dico quello che vedo:
[attach=1]
Per curiosità: ma tu fai template per WS?
Se sì, dovresti conoscere a menadito il programma e un po' di programmazione di base.
-
Si ho risolto! Una svista ;D
Grazie!
-
Abbiamo modificato lo script e sembra che il problema del resize non ci sia più: http://stesil.altervista.org/evo10/fasce-orizzontali/files/jq_strip.js (http://stesil.altervista.org/evo10/fasce-orizzontali/files/jq_strip.js)
Il pixel ballerino, invece, potrebbe rivedersi sulla destra in alcune situazioni: quando la differenza tra la larghezza della finestra e la larghezza del div è un numero dispari, occorre approssimare all'intero il quoziente della divisione /2. Il valore calcolato in questa situazione non è quindi "esatto".
Provalo e facci sapere.
Grazie per la segnalazione.
metto il link aggiornato
http://templatex5.altervista.org/stiky2/index.html
ritengo che lavora molto bene, non c'è piu l'errore del margine e la barra non la vedo più (tranne che uno sfarfallio con safari ma solo durante il movimento di ridimensionamento, quindi non significativo)
gran bello script, direi superbo, :) grazie
-
Non esagerare, comunque grazie! :)
-
scusate ragazzi, potreste aiutarmi per l'inserimento? con la 12 pro di ws, ho inserito il css da voi indicato in prima della chius tag esperto,
ho collegato il file jq_strip.js in percorso js, non mi esce nulla, sapreste il perchè ?
#thanks for the support
-
Le pagine create con la versione 12 hanno una struttura dei div diversa da quella presente nella versione 10 e 11. Questo script quindi non è valido per questa versione.
-
grazie stesil, se possibile, potreste fornirmi il codice diciamo adattato x la 12?
ve ne sarei grato ^_^
-
No, mi dispiace, almeno non ora. Non è un lavoro di poco conto. Magari in futuro si farà.
-
Con la versione di website x5 12 professional questo layout non mi funziona più, sapete il motivo?
-
Le pagine create con la versione 12 hanno una struttura dei div diversa da quella presente nella versione 10 e 11. Questo script quindi non è valido per questa versione.
-
:-X qualche suggerimento?
-
Abbiamo fatto una prova con la versione 12 (12.0.2.17) in modalità responsive.
Qui il nuovo file da testare: http://stesil.altervista.org/evo10/fasce-orizzontali/v12/jq_strip.js (http://stesil.altervista.org/evo10/fasce-orizzontali/v12/jq_strip.js)
Il resto del procedimento rimane invariato (consultare il primo post di questo topic).
-
Funziona perfettamente! Grazie! :D
-
Salve a tutti, e un ringraziamento a coloro che ci aiutano a districarci in certe situazioni.....
Ho seguito il topic, ed è funzionante, uso wsx12.
quando ho inserito un immagine per provare, questa non si è estesa in tutta la fascia. Le immagini devono essere di misure specifiche.
Grazie ancora.
-
Se la tua è una domanda, no, non devono essere di misure specifiche. Se stai utilizzando un'immagine di sfondo relativamente piccola, devi aggiungere background-size: cover;
Qui puoi vedere una demo: http://quellidelcucuzzolo.altervista.org/templates/november/ (http://quellidelcucuzzolo.altervista.org/templates/november/)
-
Ok, grazie mille.
-
Abbiamo ulteriormente modificato lo script, prevedendo ora anche la possibilità di visualizzare a tutto schermo il codice inserito in un oggetto Codice HTML.
Potete scaricare il file .js a questo indirizzo http://quellidelcucuzzolo.altervista.org/demo/layout-strisce-wsx5/js/jq_strip12.js (http://quellidelcucuzzolo.altervista.org/demo/layout-strisce-wsx5/js/jq_strip12.js)
A differenza dello script precedente, i nomi delle classi utilizzate per la gestione delle righe sono .row1, .row2, .row3, etc.
Per ulteriori informazioni sull'utilizzo potete consultare questo post: http://www.quellidelcucuzzolo.blogspot.it/2016/01/layout-strisce-orizzontali-website-x5-12.html (http://www.quellidelcucuzzolo.blogspot.it/2016/01/layout-strisce-orizzontali-website-x5-12.html)