22 agosto 2016

Effetto Vertical Sliding con gli oggetti di WebSite X5 12

Quando abbiamo adattato per WebSite X5 il template Rectangle ci siamo imbattuti in un bell'effetto vertical sliding di apertura delle varie sezioni della pagina, effetto che abbiamo riscritto a modo nostro anche per il nostro attuale sito su Altervista.

In questo articolo cercheremo di spiegare come ottenere lo stesso risultato di questa nostra DEMO.

Partiamo esaminando la struttura della pagina che prevede delle sezioni visibili all'apertura (nell'immagine sottostante circondate da un bordo rosso), altre nascoste (circondate da un bordo blu) che si visualizzano solo se richiamate al click, nascondendo a loro volta le sezioni in rosso con l'effetto vertical sliding, ed eventuali elementi sempre visibili (circondati da un bordo verde):

  • Sezioni visibili all'apertura della pagina (in rosso)
    Ogni sezione è costituita, nel nostro esempio, da un Oggetto Testo e contiene un link che apre la relativa sezione nascosta. Nell'Oggetto Testo corrispondente alla prima sezione abilitare il codice HTML ed inserire questo codice:
    <a class="MS_ButtonLink" href="#sezione1">APRI</a>
    
    Nell'Oggetto Testo corrispondente alla seconda sezione il codice varierà in questo modo:
    <a class="MS_ButtonLink" href="#sezione2">APRI</a>
    
    E così via per le altre due sezioni.
  • Sezioni nascoste (in blu)
    Inserire negli Oggetti Testo che verranno visualizzati solo al click, il codice per il pulsante di chiusura, sempre abilitando il codice HTML:
    <span class="MS_Close">CHIUDI</span>

Al posto degli Oggetti Testo si possono utilizzare anche altri tipi di oggetti: in questo caso il codice per i pulsanti può essere inserito nel Titolo o nella Descrizione della Cella.

Ora ci spostiamo in Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD ed inseriamo questo semplice CSS, completamente personalizzabile, per la formattazione dei pulsanti di apertura e di chiusura:
<style>
.MS_ButtonLink, .MS_Close {
 background-color: #ff6600;
 color: #fff;
 text-decoration: none;
 padding: 4px 8px;
 cursor: pointer;
}
</style>
Sempre nella stessa sezione, a seguire, inseriamo questo script che permette di gestire la visibilità e l'animazione degli oggetti:
<script>
/* =========================================================================================
   Author's custom code: http://quellidelcucuzzolo.blogspot.it - Please do not remove credit
   ========================================================================================= */
$(document).ready(function() {
  //classi ai div
  $("#imGroup_1 > div").each(function(index) {
    if ($(this).hasClass("imHGroup") || $(this).hasClass("imEGroup")) $(this).addClass("row" + (index + 1));
    else {
      $(this).wrap("<div class='row" + (index + 1) + "' style='width: 100%;'></div>");
    }
  })

  //PARTE DA PERSONALIZZARE
  //sezioni visibili all'apertura della pagina
  $(".row1, .row2").wrapAll("<div class='MScontent'></div>");
  //sezioni nascoste
  $(".row3").addClass("sezione1");
  $(".row4").addClass("sezione2");
  $(".row5").addClass("sezione3");
  $(".row6").addClass("sezione4");

  $(".MScontent > div").css("float", "left");
  $("div[class*='sezione']").hide();

  //animazione
  $(".MS_ButtonLink").click(function() {
    var id = $(this).attr("href").slice(1);
    $("html, body").animate({
      scrollTop: 100
    }, 500);
    $("div.MScontent").slideUp("slow");
    $("." + id).slideDown("slow");
    return false;
  });
  $(".MS_Close").click(function() {
    $("div[class*='sezione']").slideUp("slow");
    $("div.MScontent").slideDown("slow");
  });
});
</script>

A questo punto abbiamo riprodotto fedelmente la nostra demo. Per poter capire il funzionamento e fare eventuali modifiche, entriamo nel merito del codice JavaScript utilizzato.
La prima parte dello script, con commento //classi ai div si occupa di assegnare, ai div che il programma genera per circondare gli oggetti che inseriamo sulle righe nella griglia della pagina, una classe row con un numero crescente come suffisso, numero che corrisponde ai numeri delle righe presenti in Creazione della Pagina.


Se però nella griglia fossero presenti oggetti che occupano più di una riga, la numerazione delle classi row cambierebbe in questo modo:


Questa parte del codice è utilizzata anche nello script per ottenere le strisce orizzontali descritto in questo articolo quindi, chi ne facesse già uso, deve ometterla.

La parte centrale del codice, con commento  //PARTE DA PERSONALIZZARE deve essere modificata in funzione del numero e della posizione degli oggetti a cui applicare l'effetto.
Nella parte di codice che riguarda le sezioni che devono risultare visibili all'apertura della pagina, indicare le classi row in cui sono collocate:
  $(".row1, .row2").wrapAll("<div class='MScontent'></div>");

Identifichiamo quindi le classi row in cui sono collocati gli oggetti nascosti ed associamoli alla corrispondente sezione visibile indicando il valore dell'attributo href (privo del cancelletto) che abbiamo precedentemente scritto nel relativo pulsante APRI: 
  $(".row3").addClass("sezione1");
  $(".row4").addClass("sezione2");
  $(".row5").addClass("sezione3");
  $(".row6").addClass("sezione4");

L'ultima parte del codice si occupa dell'animazione: il valore scrollTop:100 indica la posizione della barra di scroll al termine dell'animazione e deve essere adeguato all'altezza dell'header o comunque regolato a piacere.


Nota: il valore dell'attributo href del pulsante APRI deve essere costituito dal prefisso obbligatorio "#sezione" seguito da numeri o lettere o parole che identificano in modo univoco la sezione.


24 commenti:

  1. Ottima spiegazione....
    Grazie
    Mirko

    RispondiElimina
    Risposte
    1. Grazie a te per averci spronato a finire l'articolo :)

      Elimina
  2. secondo me avete una dote unica... scrivete codice semplice da comprendere anche per i neofiti...

    RispondiElimina
    Risposte
    1. Grazie Antonio, noi ci speriamo sempre di scrivere in modo comprensibile :)

      Elimina
  3. Condivido la vostra seccatura su chi osa approfittare del vostro lavoro per trarne un vantaggio economico personale immeritato. Siete eccezionali!

    RispondiElimina
    Risposte
    1. Grazie anche a te Gabriele per il tuo commento :)

      Elimina
  4. Di nuovo io, ho provato a seguire passo passo la vostra guida, ma mi succede che il testo e i link non siano responsive....dove sbaglio...?
    http://www.mirboprova.altervista.org/cucuzzolo/

    RispondiElimina
  5. secondo me il problema è generato dal copia/incolla diretto in website...prova a passare il testo prima in notepad...

    RispondiElimina
  6. scritto tutto il testo a mano, senza copia incolla....eppure la tua prova funzia e la mia no...

    RispondiElimina
    Risposte
    1. Ciao Mirko, guarda il sorgente della tua pagina: ci sono dei tag <pre> che ovviamente provocano il comportamento del testo da te segnalato.

      http://www.w3schools.com/tags/tag_pre.asp

      Prova a rifare gli oggetti testo da capo, senza copia/incollare il testo.

      Elimina
  7. scoperto l'errore....non era il testo con copia/incolla, ma avevo inserito la cella orizzontale (quelle che dovrebbero essere nascoste) e poi copia/incolla della cella per le altre 3 sotto....infatti l'ultima cella ora con testo inserito con copia/incolla funzia bene lo stesso....grazie mille di nuovo...

    RispondiElimina
  8. Buongiorno a tutti, ho creato il sito su modello Tamarillo (MAeSI edition) e l'effetto Vertical Sliding funziona benissimo su pagine aggiunte ma nella Home no. In pratica non si nascondono le righe. Credo vada in conflitto con qualche altro codice. Dopo vari tentativi, chiedo un parere.
    Grazie!

    RispondiElimina
    Risposte
    1. Ciao Francesco,

      nella home del template Tamarillo è presente il codice per il layout a strisce, quindi, come abbiamo scritto nell'articolo, devi eliminare la prima parte dello script, cioè il codice che segue il commento //classi ai div.

      Elimina
    2. Alla fine, prova su prova, ora funziona e anche benissimo... però, ho trovato un'altro intoppo: la galleria Masonry! Purtroppo quando appare, dalla riga nascosta, le foto si compattano e si vede solo l'ultima, mantenendo liberi gli spazi delle foto che non appaiono.
      Mi sarà di grande aiuto una soluzione per masonry o eventualmente l'indicazione di altre gallerie simili.
      Grazie e buona serata!!

      Elimina
    3. Ciao Francesco,
      noi non abbiamo acquistato l'oggetto Masonry quindi non possiamo aiutarti molto. In generale il problema di una galleria come quella è che la disposizione delle immagini è generata attraverso codice javascript al caricamento della pagina e, se le immagini non sono visibili perché in display none, può non essere corretta la lettura delle dimensioni delle stesse. Dovresti leggere nella documentazione ufficiale se è possibile richiamare nuovamente la funzione al click sul pulsante che rende visibile la gallery.

      Elimina
  9. Salve stavo vedendo ora il vostro articolo e volevo chiarimenti sinceramente c'è qualcosa che mi sfugge ho provato ma le celle inserine non sono di testo come si vede dalla figura ma html ?
    poi ho provato ma non riesco a creare i link invisibili???
    dove trovo spiegazioni scusate io non sono molto bravo in linguaggio quindi non riesco a capire bene i vari passaggi che fai con website grazie

    RispondiElimina
    Risposte
    1. Ciao Renato,
      l'articolo spiega passo passo come riprodurre la nostra DEMO realizzata con oggetti testo.
      Non riusciamo a capire quali difficoltà stai incontrando.
      Se vuoi, posta il link alla tua prova online, così da capire a che punto sei arrivato.

      Elimina
  10. prima di tutto grazie x la vs disponibilita secondo considera che non sono molto esperto comunque ti metto in allegato il link per vedere http://renatik62.altervista.org/sitoprova/index.html quello che ho combinato quello che tentavo di dire e che metto oggetti testo non riesco a mettere la parte html che ho solo in oggetti <>
    poi non riesco a capire come colleghi i vari oggetti
    Grazie ancora
    Renato

    RispondiElimina
    Risposte
    1. Ciao,
      abbiamo guardato la tua pagina e ci sono un po' di cose da sistemare.
      Per prima cosa in "Stile righe" hai unito tutte le righe con il lucchetto. Devi toglierlo e lasciare le righe indipendenti una dall'altra.
      Poi togli tutti gli oggetti Codice HTML che hai inserito tra un oggetto testo e l'altro: il codice in essi presenti deve essere copiato (una volta sola) in Proprietà Pagina, Esperto, Prima di chiusura del tag HEAD, come abbiamo scritto nell'articolo.
      Ci sono ancora altri errori, ma andiamo per gradi, incomincia a sistemare questi.

      Elimina
  11. Grazie ancora per il tempo che deticate sono riuscito a capire e localmente funziona in rete invece ho dovuto salvare index in php e non html giusto ?
    di quali altri errori parlavi i link è ancora valido
    http://renatik62.altervista.org/sitoprova/index.php fammi sapere
    GRAZIE

    RispondiElimina
    Risposte
    1. Prego Renato.
      Bene, sembra che funzioni tutto, prima avevi collegato più schede allo stesso link ma adesso hai sistemato.

      Non serve cambiare l'estensione in .php alla index, in Rete hai anche la pagina .html perfettamente funzionante.
      Ciao

      Elimina
    2. Grazie ancora ora voglio fare le prove con il tuo link
      php-elenco-file-dinamico-ordinabile.html e vedere se mi funziona anche questo è gestito da website ??
      Grazie ancora

      Elimina
    3. La demo non è stata fatta con WebSite X5 ma i codici possono essere integrati con facilità.

      Elimina
  12. Grazie per quello che fate...Siete il 6°passo di websiteX5 o X6😀

    RispondiElimina