Guida Tabella Slide con effetto Fade v2.0

« Older   Newer »
 
  Share  
.
  1.     +14    
     
    .
    Avatar

    Senior Member

    Group
    Direttore
    Posts
    17,718
    Activity Level
    +60

    Status
    Anonymous

    Tabella Slide con effetto Fade v2.0

    Una grande quantità di risorse ed informazioni che non disturbano la navigazione!



    Funzionalità

    Di cosa si tratta? Più facile a farsi vedere che a dirsi, si tratta di una tabella divisa in differenti pannelli, ognuno personalizzabile in titolo e contenuti, che vi permette di dividere le informazioni da mostrare agli utenti per argomenti mostrandone così solo uno per volta senza quindi causare confusione agli utenti e sovraccaricare di informazioni uno spazio ristretto. Tantissimi altri gradevoli effetti e funzionalità completano la tabella, rendendola uno strumento utile e forse addirittura indispensabile per il vostro forum.
    • Spazio ottimizzato nella vostra pagina!
      E' possibile inserire molti più contenuti e informazioni rispetto alle bachece tradizionali, senza creare confusione!

    • Ottimizzata per i motori di ricerca!
      Tutti i contenuti risulteranno essere sulla stessa pagina del vostro forum, valorizzandola agli occhi degli spiders!

    • Cross-browser!
      La compatibilità dello script è garantita con tutti i più comuni sistemi di navigazione su internet!

    • Memorizzazione dello stato aperto/chiuso!
      Lo stato aperto/chiuso della tabella (realizzabile cliccando semplicemente sul mback, viene memorizzato dal vostro browser, senza quindi costringere gli utenti a chiuderla ogni volta che visitano la stessa pagina!

    • Effetto dissolvenza!
      Se abilitato, al cambio pannello avrete un gradevolissimo effetto di dissolvenza progressiva! E' possibile anche impostare la transizione automatica dei pannelli!

    • Semplicità di configurazione!
      Grazie ad un comodo generatore, è possibile configurare e personalizzare la vostra tabella in pochi semplici passaggi!

    • Grafica del forum!
      La tabella si adatterà automaticamente alla grafica del forum! E' comunque possibile personalizzarne diversamente l'estetica.


    Installazione

    Compatibilità: Nuovo e Vecchio Layout

    Inserire in Codici HTML --> Codice HTML che sarà mostrato in CIMA a tutte le pagine, se non già presente, questo:
    HTML
    <script src="http://ffmagazine.forumfree.net/bored/r/r.min.js"></script>

    Successivamente, è possibile creare e configurare la Tabella Slide con effetto Fade in maniera semplice e guidata, usufruendo del comodo generatore:

    GENERATORE
    [Occorre essere loggati per poterlo utilizzare]

    Per completezza, chiunque non voglia utilizzare il generatore ma preferisca configurare manualmente la tabella, può farlo seguendo la guida che trovate qui sotto.

    Inserire in Grafica --> Codice HTML --> Codice HTML che sarà mostrato in CIMA a tutte le pagine questo:
    HTML
    <script type="text/javascript" src="http://ffmagazine.forumfree.net/paralizer/tabellaslide/tabellaslide.js"></script>


    Inserire in Grafica --> Codice HTML --> <b>Codice HTML che sarà mostrato dove si vuole questo:
    HTML
    <script type="text/javascript">
    mainboard = new slider('mainboard', 'pannello1','1','10','0','0','0','0');
    </script>

    <!-- Tabella Slide con effetto Fade -->
    <div class="slide_table" ntab="0"><table class="skin_tbl box_minus" align="center" cellpadding="0" cellspacing="0"><tbody><tr><td class="mleft_top"></td><td><table class="mback" cellpadding="0" cellspacing="0"><tbody><tr><td class="mback_left"><div class="plus"></div></td><td class="mback_center">
    <!-- Titolo tabella -->
    <h2 class="mtitle">Tabella Slide Effetto Fade V2</h2>
    </td><td class="mback_right"><span class="minus"></span></td></tr></tbody></table></td>
    <td class="mright_top"></td></tr><tr id="mainboard"><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">
    <tbody><tr>
    <td class="title" colspan="1" style="float:left;width:100%">
    <!-- Link Tab -->
    <a title="pannello1">Home</a>
    <a title="pannello2">News</a>
    <a title="pannello3">Pannello3</a>
    <a title="pannello4">Pannello4</a>
    </td>
    <!-- Olorogio -->
    <td width="min-width:120px;width:120px;" class="title">
    <span style="float:right" id="orologio"></span>
    </td>
    </tr>
    <tr title="RIGA1">
    <td class="ww" colspan="2">
    <!-- Pannello di default -->
    <div id="pannello1">
    <h2>Home</h2>
    <p>Benvenuti su questo forum!</p>
    </div>
    <!-- Pannello -->
    <div id="pannello2" class="nascosta">
    <h2>News</h2>
    <ul style="list-style: none">
    <li>01/01/2010 00:00 - <b><a href="#" target="_blank">Amministratore</a></b>: Prova</li>
    <li>01/01/2010 00:00 - <b><a href="#" target="_blank">Amministratore</a></b>: Prova</li>
    <li>01/01/2010 00:00 - <b><a href="#" target="_blank">Amministratore</a></b>: Prova</li>
    <li>01/01/2010 00:00 - <b><a href="#" target="_blank">Amministratore</a></b>: Prova</li>
    <li>01/01/2010 00:00 - <b><a href="#" target="_blank">Amministratore</a></b>: Prova</li>
    </ul>
    </div>
    <!-- Pannello -->
    <div id="pannello3" class="nascosta">
    <h2>Pannello3</h2>
    <p>Contenuto pannello 3</p>
    </div>
    <!-- Pannello -->
    <div id="pannello4" class="nascosta">
    <h2>Pannello4</h2>
    <p>Contenuto pannello 4</p>
    </div>

    </td>
    </tr>
    <tr>
    <td class="ww" colspan="2">
    <!-- Nota Bene, e' vietata la rimozione dei crediti di seguito -->
    <div class="credits" style="padding-right:4px"><b><a href="http://ffmagazine.forumfree.it/?t=48148627" title="Creata da Bowser e [Antonio] e riscritta da Paralizer">Tabella Slide con effetto Fade 2.0</a></b></div>
    </td>
    </tr>
    </tbody></table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tbody><tr><td class="msub_left"></td><td class="msub_center"> </td><td class="msub_right"></td></tr></tbody></table></td><td class="mright_bottom"></td></tr></tbody></table></div><br><br>
    <!-- Fine Tabella Slide con effetto Fade -->


    Inserire in Grafica --> Colori e Stili questo:
    CODICE
    /* TABELLA SLIDE CON EFFETTO FADE - http://ffmagazine.forumfree.it/?t=48148627 */
    .slide_table {width: 100%}
    .slide_table .mback {cursor: pointer}
    .slide_table .title {font-size: 11px}
    .slide_table .title a {display: inline-block; cursor: pointer; margin-right: 15px}
    #orologio {display: inline-block; min-width: 95px; text-align: center}
    .slide_table .credits {float:right; text-align:right}
    /* end */


    Personalizzazione

    Chiunque avesse seguito la configurazione manuale, di seguito trova le modalità di personalizzazione della tabella slide:
    Per configurare correttamente la tabella, occorre agire su questa parte:
    mainboard = new slider('mainboard', 'pannello1','1','10','0','0','0','0');

    PARAMETRODESCRIZIONEFUNZIONE
    resNome dell'istanza della tabella
    es. mainboard = new slider('mainboard'...
    Utile solo per inserire più di una tabella in una stessa o in una differente pagina del forum.
    tab
    Valore default: pannello1
    ID del pannello di default della tabella
    es. Primo pannello: div id="pannello1" => pannello1
    Necessario per il funzionamento della tabella, altrimenti non sarà possibile inizializzarla correttamente.
    enfade
    Valore default: 1 (attivato)
    Abilitazione dell'effetto fade (trasparenza)Genera un effetto trasparenza molto accattivante mentre si cambia pannello (dissolvenza, apparizione)
    speed
    Valore default: 10 (medio)
    Velocità dell'esecuzione dell'effetto fade.Il fattore moltiplicativo che determina la durata dell'effetto fade
    Valori consigliati: 20 (lento), 10 (medio), 5 (veloce)
    clock
    Valore default: 0 (disattivato)
    Abilitazione dell'orologio digitale integrato.Indica allo script se inizializzare le funzioni relative all'orologio
    date
    Valore default: 0 (disattivato)
    Abilitazione della data integrata all'orologio.Indica allo script se inizializzare le funzioni relative alla data
    NOTA BENE: Il valore ha effetto solo se è abilitato clock
    transition
    Valore default: 0 (disattivato)
    Abilitazione della transizione automatica dei pannelliSe abilitata, la transizione da un pannello all'altro sarà automatica, senza quindi bisogno di cliccare sulla relativa voce del menu
    durate
    Valore default: 0
    Durata della pausa prima della transizioneDurata (espressa in secondi) dell'intervallo di tempo tra una transizione e l'altra.
    NOTA BENE: Il valore ha effetto solo se è abilitato transition e la durata mina è 4


    Pannello aggiuntivo

    Aggiungere altri pannelli è semplicissimo, vi basterà aggiungere un link nella parte iniziale:
    HTML
    <a title="pannello5">Pannello5</a>

    E un corrispondente div prima dei tag </td></tr>
    HTML
    <!-- Pannello Aggiuntivo -->
    <div id="pannello5" class="nascosta"><h2>Pannello5</h2><p>
    <!-- Inizio Contenuto Pannello -->
    Contenuto pannello
    <!-- Fine Contenuto Pannello -->
    </p></div>


    Updates

    UPDATE 03.07.2014
    La Tabella Slide con effetto Fade, dopo ben 4 anni, si aggiorna finalmente alla versione 2.0. Più prestante e più semplice da installare, grazie al comodo generatore.

    Ideata e realizzata da Bowser e [Antonio]
    Riscritta completamente da Paralizer per FFMagazine


    Guida rilasciata sotto una Licenza Creative Commons 3.0.



    Edited by Paralizer - 6/4/2018, 12:53
     
    Top
    .
  2. Corrado Bacco
         
     
    .

    User deleted


    Appena posso, la provo :sisi:
     
    Top
    .
  3.      
     
    .
    Avatar

    Member

    Group
    Member
    Posts
    370
    Activity Level
    0
    Location
    MB

    Status
    Offline
    Nel generatore,quando clicco su "Conferma & continua" non succede nulla,anche se sono loggata. :omg:
     
    Top
    .
  4. Resonance‚
         
     
    .

    User deleted


    A me va... Prova ad aggiornare la pagina con CTRL+F5
     
    Top
    .
  5.      
     
    .
    Avatar

    Member

    Group
    Member
    Posts
    370
    Activity Level
    0
    Location
    MB

    Status
    Offline
    Ho riprovato. Ho provato anche a cambiare browers,ma niente. >.<
     
    Top
    .
  6.      
     
    .
    Avatar

    Senior Member

    Group
    Direttore
    Posts
    17,718
    Activity Level
    +60

    Status
    Anonymous
    CITAZIONE (NadiaHoran @ 5/7/2014, 21:50)
    Nel generatore,quando clicco su "Conferma & continua" non succede nulla,anche se sono loggata. :omg:

    Hai JavaScript attivo? E che browser utilizzi?
     
    Top
    .
  7.      
     
    .
    Avatar

    Member

    Group
    Member
    Posts
    370
    Activity Level
    0
    Location
    MB

    Status
    Offline
    Si è abilitato. Uso Google Chrome.
     
    Top
    .
  8.      
     
    .
    Avatar

    Senior Member

    Group
    Direttore
    Posts
    17,718
    Activity Level
    +60

    Status
    Anonymous
    Mmh, anche io utilizzo google Chrome ed è tutto funzionante, sei sicuro che lo hai abilitato javascript?

    Che tipo i pc Utilizzi?
     
    Top
    .
  9.      
     
    .
    Avatar

    Member

    Group
    Member
    Posts
    370
    Activity Level
    0
    Location
    MB

    Status
    Offline
    Si,uso questo sito per assicurarmi di aver attivato javascript. Ho provato anche a controllare nelle opzioni di Chrome,ma è tutto apposto.

    Utilizzo un Asus con Intel Core i3.
     
    Top
    .
  10.      
     
    .
    Avatar

    Senior Member

    Group
    Direttore
    Posts
    17,718
    Activity Level
    +60

    Status
    Anonymous
    Alla pagina del generatore , apri ispeziona elemento e clicca console, e fammi uno screen perfavore.
     
    Top
    .
  11.      
     
    .
    Avatar

    Member

    Group
    Member
    Posts
    370
    Activity Level
    0
    Location
    MB

    Status
    Offline
    Ecco a te:
     
    Top
    .
  12.      
     
    .
    Avatar

    Senior Member

    Group
    M. Onorario
    Posts
    23,086
    Activity Level
    +9
    Location
    Far West

    Status
    Offline
    Ecco l'inghippo.
    Non puoi usare il generatore dalla versione mobile! Devi accedere dalla versione desktop.

    ffmagazine.forumfree.it/?pag=generatoretblslide
    e non
    ffmagazine.forumfree.it/m/?pag=generatoretblslide
     
    Top
    .
  13. Corrado Bacco
         
     
    .

    User deleted


    A me non funziona, non mi mostra i pannelli....

    Link forum >>> http://yugiohspirit.forumcommunity.net/
     
    Top
    .
  14.      
     
    .
    Avatar

    Senior Member

    Group
    Direttore
    Posts
    17,718
    Activity Level
    +60

    Status
    Anonymous
    E' un problema della tua skin. Aggiungi alla fine dei css:
    CODICE
    .slide_table .title {display:block !important}
     
    Top
    .
  15. Corrado Bacco
         
     
    .

    User deleted


    Grazie mille, 2 domande:

    Come faccio a cambiare il colore del testo delle news
    Come faccio a cambiare la barra che e' sopra i pannelli? (attualmente e' grigia)
     
    Top
    .
152 replies since 3/7/2014, 16:45   103403 views
  Share  
.
Top