HACKING 120% {Hacking, programmazione, computer & molto altro}

Guida Tabella Slide con Effetto Fade

« Older   Newer »
  Share  
*RaffyArceu$* †‡†
view post Posted on 4/6/2011, 10:47     +1   -1





Tabella Slide con effetto Fade


L'attesa soluzione per offrire una grande quantità di risorse ed informazioni ai vostri utenti senza disturbare la loro navigazione





Dopo un lunghissimo periodo di continua innovazione e miglioramento siamo finalmente pronti a mostrarvi la versione finale della tabella slide con effetto fade. Se già utilizzate una versione beta precedente vi consigliamo di sostituirla con quella di questa guida perché essa è stata completamente riscritta e migliorata, integrando nuove importanti funzionalità, semplificando il suo funzionamento e risolvendo alcuni fastidiosi problemi che mostravano le versioni precedenti. 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 altre gradevoli effetti e funzionalità completano la tabella rendendola uno strumento utile e forse addirittura indispensabile per il vostro forum.
Potete vedere un esempio della tabella in funzione nella homepage del ForumFree Magazine.

Anteprima:
imageimageimage

Caratteristiche innovative

-Ottimizza lo spazio nella vostre pagine, permettendovi di inserire molti più contenuti e informazioni delle bacheche tradizionali.
-Completamente integrata nel circuito, a differenza delle altre soluzioni che vi costringono ad utilizzare spazi web esterni
-Ottimizzata per i motori di ricerca: tutti i contenuti risulteranno essere sulla stessa pagina del vostro forum, valorizzandola agli occhi degli spiders.
-Cross-browser, cioè compatibile con tutti i più comuni sistemi di navigazione su internet
-Possibilità di aprirla/chiuderla memorizzando il suo stato, in modo da non costringere gli utenti a chiuderla ogni volta che visitano la stessa pagina
-Possibilità di installarne più di una, anche sulla stessa pagina, e senza dover reinstallarla completamente
-Integra un gradevolissimo effetto di dissolvenza progressiva, durante il cambio del pannello
-Integra un pannello preconfigurato per funzionare da newsboard
-Integra un funzionale orologio, comodo per gli utenti del vostro forum
-Altamente configurabile e personalizzabile in modo molto semplice
-Come le tradizionali tabelle, ha la stessa grafica del forum in cui viene utilizzata



Termini di Utilizzo

Questa guida ed il relativo script spiegato sono rilasciati sotto una Licenza Creative Commons 3.0, riassunta, riveduta e corretta nei seguenti punti:

Sei libero di utilizzare, comunicare al pubblico, esporre in pubblico, rappresentare e recitare la guida e lo script annesso (la ridistribuzione ha dei vincoli particolari che potete trovare di seguito) alle seguenti condizioni:

Attribuzione

Devi riconoscere il contributo dell'autore originario e del suo forum. (Informazioni e metodi di attuazione sono reperibili nella sezione seguente)

Non commerciale

Non puoi usare quest’opera per scopi commerciali.

Non opere derivate

Non puoi alterare o trasformare quest'opera, ne' usarla per crearne un'altra



La sola guida, comprensiva quindi anche di script, è ridistribuibile su altri forum senza autorizzazione a patto di conservarne l'integrità e senza alcuna alterazione dei contenuti e dei crediti.



Installazione

E' possibile installare la tabella sul vostro forum in modo guidato, utilizzando l'apposito generatore, o manuale, inserendo i codici sul vostro forum e configurandoli in modo adatto.
Installazione guidata

Lo staff del ForumFree Magazine ha reso disponibile un utilissimo generatore che vi assisterà passo-passo nella creazione della tabella e nel suo inserimento sul vostro forum.
Al momento il generatore è in ristrutturazione, verra reso nuovamente disponibile entro breve.

Installazione manuale

Se invece preferite effettuare un installazione manuale dello script basta seguire questa semplice procedura:

Stili CSS tabella
Inserire questo codice in Amministrazione > Grafica > Colori e Stile

SPOILER (clicca per visualizzare)
CODICE
/* Inizio stili Tabella Slide con effetto fade */

.slide_table .title a {display: block; float: left; text-align: left;}
input#orologio {display: block; float: right; height: auto; padding: 0; overflow: visible; background: none; border: none; text-align: right}
.slide_table {width: 100%}
.slide_table .mback {cursor: pointer}
.slide_table .title {font-size: 11px}
.slide_table .title a {margin-right: 15px; }
.slide_table .credits {float:right; text-align:right}
input#orologio {font-weight: normal;}

/* Fine stili Tabella Slide con effetto fade */


Per rendere lo script funzionante non è necessario apportare alcuna modifica a questa parte, utile infatti per personalizzare l'aspetto della tabella.
Codice con spiegazioni e commenti:
SPOILER (clicca per visualizzare)
CODICE
/* Inizio stili Tabella Slide con effetto fade */

/* Links per il cambio pannello, non modificare questa dichiarazione, usare quella sottostante */
.slide_table .title a {display: block; float: left; text-align: left;}
/* Stile input orologio, ogni modifica erronea potrebbe compromettere seriamente l'aspetto della tabella */
input#orologio {display: block; float: right; height: auto; padding: 0; overflow: visible; background: none; border: none; text-align: right}

/* Ridurre il valore percentuale per diminuire la larghezza della tabella */
.slide_table {width: 100%}

/* impostazione cursore per chiudere la tabella */
.slide_table .mback {cursor: pointer}

/* Grandezza dei caratteri (link pannelli e orologio) */
.slide_table .title {font-size: 11px}

/* Impostazione Link pannelli, aggiungere qui eventuali effetti */
.slide_table .title a {margin-right: 15px; }

/* Crediti tabella: N.b: è vietata la rimozione di essi. */
.slide_table .credits {float:right; text-align:right}

/* Impostazioni orologio */
input#orologio {font-weight: normal;}

/* Fine stili Tabella Slide con effetto fade */


Script principale
Inserire lo script in Amministrazione > Grafica > Codice HTML > in Cima al Forum:
SPOILER (clicca per visualizzare)
CODICE
<script type="text/javascript"><!--
/* =======================================
// Slide Script con effetto fade (ForumFree compatibile)
// Realizzato da Bowser e DarkStyle
// (C) 2009 http://ffmagazine.forumfree.net
// Versione: 1.0b - Ultima modifica: 20/07/2009 10:38
// Ringraziamenti speciali a:
// http://giulio.ganci.eu/2008/05/04/effetto-fade-con-javascript/
// ======================================= */
if(typeof(document.ElementById)!='function'){document.ElementById=function(obj){return(document.getElementById?document.getElementById(obj):document.all.obj)}}var slider=function(a,b,c,d,e,f,g,h){this.res=a?a:'mainboard';this.tab=b?b:'web';this.dominio=c?this.res+c:null;this.enfade=d?d:1;this.refresh=e?e:0;this.speed=f?f:10;this.orologio=g?g:1;this.timename=h?h:'orologio';this.load=function(){if(document.ElementById(this.timename)&&this.orologio){this.setTime();if(this.orologio==2)setInterval(this.res+'.setTime()',1000);document.ElementById(this.timename).onselect=function(){this.blur();return false};document.ElementById(this.timename).onfocus=function(){this.blur();return false}}if(document.ElementById(this.res)&&typeof(cat_nascoste)!='undefined')if(cat_nascoste.indexOf(this.dominio)!=-1)document.ElementById(this.res).className='nascosta'};this.close=function(){hidetbl=document.ElementById(this.res);hidetbl.className=hidetbl.className=='nascosta'?'':'nascosta';if(typeof(salvapreferenze)=='function')salvapreferenze(this.dominio,hidetbl.className)};this.setOpacity=function(obj,op){(document.all&&!window.opera)?document.ElementById(obj).style.filter="alpha(opacity="+op+")":document.ElementById(obj).style.opacity=op/100};this.fade=function(obj,t){time=Math.round(this.speed);frame=0;if(document.all&&!window.opera){document.ElementById(obj).style.height=0;document.ElementById(obj).style.minHeight=0}if(t==0){for(fd=0;fd<=100;++fd){setTimeout(this.res+".setOpacity('"+obj+"', "+fd+")",(time*frame));++frame}}else{for(fd=100;fd>=0;--fd){setTimeout(this.res+".setOpacity('"+obj+"', "+fd+")",(time*frame));++frame}}};this.show=function(e){ob=e.title;if(this.tab!=ob||this.refresh){if(this.enfade)this.fade(this.tab,1);document.ElementById(this.tab).className='nascosta';document.ElementById(ob).className='ww';if(this.enfade)this.fade(ob,0);this.tab=ob}};this.setTime=function(){var d=new Date(),AA=new String(d.getFullYear()),MM=new String(d.getMonth()+1),DD=new String(d.getDate()),hh=new String(d.getHours()),mm=new String(d.getMinutes());document.ElementById(this.timename).value='Sono le '+(hh.length==1?'0'+hh:hh)+':'+(mm.length==1?'0'+mm:mm)+' del '+(DD.length==1?'0'+DD:DD)+'/'+(MM.length==1?'0'+MM:MM)+'/'+AA}};
//--></script>


Codice HTML principale Tabella (Si raccomanda agli utenti di prestare particolare attenzione a questo punto.)
Inserite questo codice in Amministrazione > Grafica > Codice HTML > Nella homepage del sito (o eventualmente in una sezione, o dove preferite, l'importante è che lo script del punto precedente (2) stia sopra a questo):
SPOILER (clicca per visualizzare)
CODICE
<!-- Inizio Slide Script con effetto fade (ForumFree compatibile) -->
<script type="text/javascript"><!--
// Inizializziamo le funzioni della tabella, ricordarsi di configurarla adeguatamente prima di inserirla sul forum
mainboard = new slider('mainboard', 'web', 'slide');
//--></script>
<div class="slide_table">
<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr onclick="mainboard.close()"><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">

<!-- Titolo Tabella -->
<div class="mtitle">Bacheca</div>

</td><td class="mback_right"></td></tr></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">

<tr>
<td class="title" colspan="1">
<!-- Link Tab -->
<a href="#" title="web" onclick="mainboard.show(this);return;">Home</a>
<a href="#" title="news" onclick="mainboard.show(this);return;">News</a>
<a href="#" title="pannello3" onclick="mainboard.show(this);return;">Pannello3</a>
<a href="#" title="pannello4" onclick="mainboard.show(this);return;">Pannello4</a>

<!-- Orologio -->
<input id="orologio" class="title" size="30" readonly="readonly">
</td>
</tr>
<tr title="RIGA1">
<td class="ww">
<!-- Pannello Predefinito -->
<div id="web"><h2>Home</h2><p>
<!-- Inizio Contenuto Pannello -->
Benvenuti su questo forum!
<!-- Fine Contenuto Pannello -->
</p></div>
<!-- Pannello Notizie -->
<div id="news" class="nascosta"><h2>News</h2><p>
<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>
</p></div>
<!-- Pannello Aggiuntivo -->
<div id="pannello3" class="nascosta"><h2>Pannello3</h2><p>
<!-- Inizio Contenuto Pannello -->

<!-- Fine Contenuto Pannello -->
</p></div>
<!-- Pannello Aggiuntivo -->
<div id="pannello4" class="nascosta"><h2>Pannello 4</h2><p>
<!-- Inizio Contenuto Pannello -->

<!-- Fine Contenuto Pannello -->
</p></div>
</td></tr>
<tr><td class="ww">
<div class="credits" style="float:left">
<!-- se vuoi inserisci qui un messaggio personale -->
&nbsp;
<!-- fine messaggio personale -->
<!-- Nota Bene, e' vietata la rimozione dei crediti di seguito -->
</div><div class="credits" style="padding-right:4px"><b><a href="http://ffmagazine.forumfree.it/?t=48148627" title="Creata da Bowser e [Antonio]">Tabella Slide con effetto Fade 1.0.0</a></b></div></td>
</tr>

</table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center">&nbsp;</td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br>
</div>
<!-- Fine Slide Script con effetto fade (ForumFree compatibile) -->


Configurazione
Prima di qualsiasi altra cosa è necessario concentrarsi sulla prima parte di quest'ultimo codice:
CODICE
<script type="text/javascript"><!--
// Inizializziamo le funzioni della tabella, ricordarsi di configurarla adeguatamente prima di inserirla sul forum
mainboard = new slider('mainboard', 'web', 'slide');
//--></script>


Esso si occupa, in pratica, di avviare l'esecuzione dello script centrale del punto (2).
Tra le parentesi tonde sono indicati i parametri per configurare nel modo desiderato il funzionamento della tabella, seguendo questo semplice schema:



 
Top
Puddinss
view post Posted on 31/10/2011, 17:49     +1   -1

Non credo che il fato colpisca gli uomini qualunque cosa facciano, ma credo che il fato li colpisca a meno che essi non facciano qualcosa.

Group:
Member
Posts:
2,319
Reputation:
0
Location:
Miami, Florida, USA

Status:


Quale schema?
 
Web  Top
1 replies since 4/6/2011, 10:47   411 views
  Share  
 

Web
 

Create your blog! · Create your forum! · Top Blog · Categories · Help · Status · Contacts · Powered by BlogFree