Layout a strisce orizzontali per WebSite X5 12

Esistono diversi metodi per creare delle strisce orizzontali a tutto schermo nel layout di un sito fatto con WebSite X5 12, ma tutti richiedono l'inserimento di codice personalizzato.

Nei template Timeline e Composite, per la versione 11, e nel template November, per la versione 12,  abbiamo rielaborato uno script - jq_strip.js - che avevamo presentato e illustrato in questo topic nel forum Unofficial dedicato a WebSite X5.

Inserire ad esempio una mappa di Google o una slide (tipo FlexSlider) a tutto schermo sotto l'intestazione o prima del pié di pagina è semplice con WebSite X5: basta inserire il relativo codice Dopo l'apertura del tag BODY e/o Prima della chiusura del tag BODY. Il problema si pone se dobbiamo inserire un oggetto a tutto schermo in mezzo agli altri oggetti della pagina: potremmo per esempio utilizzare un div in position absolute regolandone la posizione verticale con il relativo valore di top. Questo metodo però è poco pratico poiché dovremmo regolare in continuazione la coordinata verticale in funzione dell'altezza dei contenuti inseriti e controllarla alle varie risoluzioni.
Ecco perché abbiamo pensato di rimettere mano allo script jq_strip.js in modo da semplificare questa operazione.
Qui la nostra demo (versione 12.0.4.21) con una mappa di Google a tutto schermo, ottenuta inserendo il codice iframe fornito da Google, a cui abbiamo modificato il valore di width impostandolo a 100%:

DEMO

Questi i passi da seguire per utilizzare lo script in un progetto creato con WebSite X5 12:

1. Inseriamo un Oggetto Codice HTML in Creazione della Pagina prendendo nota del numero della riga e scriviamo in esso il codice HTML che vogliamo visualizzare a schermo intero.

2. Circondiamo tutto il codice HTML appena inserito con un div a cui deve essere assegnato questo id rowObject_n dove n è il numero della riga in cui è stato inserito l'oggetto. Esempio:

<div id="rowObject_3">

<!-- codice HTML -->

</div>

3. Scarichiamo il file jq_strip12.js ed alleghiamolo al progetto con gli strumenti forniti dal programma. Il file va richiamato in head di tutte le pagine interessate.

Lo script può essere utilizzato anche per inserire, attraverso i CSS, uno sfondo a tutta pagina alle righe che contengono gli oggetti di WebSite X5, come spiegato nel post dell'Unofficial. Ad esempio nella nostra demo abbiamo inserito un colore di sfondo alla riga 2 utilizzando il selettore .row2:

.row2{
    background-color:#FA9E25;
}

Invece nella riga 5 è stata inserita un'immagine di sfondo:

.row5{
    background:url('img/bg-2.jpg') no-repeat center center;
    background-size:cover;
}

Aggiungiamo inoltre che nella demo è stata inserita una media query per lasciare uno spazio a destra della mappa per facilitare lo scorrimento della pagina a partire dalla risoluzione di 480px.