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.