Nuvoletta Nuovi Messaggi in Real-Time

L'aggiornamento del vecchio ed obsoleto script "Nuvoletta Stile Netlog" è stato completato.

Note allo Script

Differenze tra le due versioni

Anteprime

Firefox

Internet Explorer 8 - 7

-

Safari 5

Installazione

Posizionate questo codice in Codice HTML > Codice HTML che sarà mostrato in tutte le pagine sotto il logo del sito:

CODICE

<script type="text/javascript">
<!--
//Script By Antonio - http://ffmagazine.forumfree.it/
st={
       "coloreTesto" : "000000",
       "coloreLink" : "000000",
       "urlLibero" : "&nodate=1",
       "altezza" : "0",
       "larghezza" : "190",
       "immagineSfondo" : "",
       "posizioneSfondo" : "",
       "coloreSfondo" : "F2F2F2",
       "larghezzaBordo" : "1",
       "coloreBordo" : "8B8B8B",
       "tipoBordo" : "solid",
       "bordiCurvi" : 1,
       "posizione" : "bl",
       "margini" : "30",
       "primoFade" : 1
}

//Non toccare da qui
sT=setTimeout;getId=function(id){return document.getElementById(id)};a=st["coloreTesto"];b=st["coloreLink"];c=st["urlLibero"];d=parseInt(st["altezza"]);if(d!=0)d=d+"px";e=st["larghezza"]+"px";f=st["immagineSfondo"];g=st["coloreSfondo"];h=st["larghezzaBordo"]+"px";i=st["coloreBordo"];l=st["tipoBordo"];m=st["bordiCurvi"];n=st["posizione"];o=st["margini"];v=st["primoFade"];p=document.all&&!window.opera?true:false;q=p?'position:absolute; ':'position:fixed; ';r=p?'top:expression(parseInt(document.body.scrollTop)+'+o+');':'top:'+o+'px;';s=p?'top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight-'+o+');':'bottom:'+o+'px;';if(n=="br")q+=s+'right:'+o+'px';else if(n=="bl")q+=s+'left:'+o+'px';else if(n=="tr")q+=r+'right:'+o+'px';else if(n=="tl")q+=r+'left:'+o+'px';t='width:'+e+'; height:'+d+';';t+='background:';if(f!=''||g!=''){if(f!='')t+='url('+f+') '+st['posizioneSfondo']+' ';if(g!='')t+='#'+g;}else{t+='transparent';}t+=';'+q+';opacity:0;filter:alpha(opacity=0);border:'+h+' '+l+' #'+i+';';t+=m?'-moz-border-radius:5px;border-radius:5px':'';u='http://'+location.host+'/rss.php?a='+document.getElementsByName('cid')[0].value+'&type=html&colorlink='+b+'&color='+a+'&n=1'+c;cf=true;function setCloudOpacity(obj,op){obj=getId(obj).style;num=cf?op:"100";p?obj.filter="alpha(opacity="+num+")":obj.opacity=num/100;if(op==0&&cf)obj.visibility='hidden';if(op==0&&!cf)cf=true;}function fadeCloud(obj,t){time=8;frame=0;myObj=getId(obj);if(p){myObj.style.height=0;myObj.style.minHeight=0;}if(t==0){myObj.style.visibility='visible';for(fd=1;fd<=100;++fd){sT("setCloudOpacity('"+obj+"',"+fd+")",(time*frame));++frame;}}else{for(fd=100;fd>=0;--fd){opac=cf?fd:0;ct2=sT("setCloudOpacity('"+obj+"',"+opac+")",(time*frame));++frame;if(opac==0)break;}}}fl=true;bP='';bN='';function reloadCloud(obj){cD=getId('cloud').children[0].contentWindow.document;mm=Math.max;db=cD.body;dd=cD.documentElement;rh=mm(mm(db.scrollHeight,dd.scrollHeight),mm(db.offsetHeight,dd.offsetHeight),mm(db.clientHeight,dd.clientHeight));if(d==0){getId('cloud').style.height=rh;getId('cloud').children[0].style.height=rh;}var1=db.children[0].children[0].href;var2=db.children[0].children[1].children[1].href;sT(function(){obj.src=u+"&time="+new Date().getTime();},10000);if(bP!=var1||bN!=var2){if((v&&fl)||!fl){ct1=sT("fadeCloud('cloud',1)",9000);fadeCloud('cloud',0);}bP=var1;bN=var2;fl=false;}}function stopTimeout(){if(typeof(ct1)!='undefined')clearTimeout(ct1);if(typeof(ct2)!='undefined')cf=false;};document.write('<div id="cloud" style="'+t+'" onmouseover="stopTimeout()" onmouseout="ct1=sT(function() {cf=true;fadeCloud(\'cloud\',1)},3500)"><iframe name="cloud" src="'+u+'" allowtransparency="true" style="width:100%; height:'+d+'" scrolling="auto" frameborder="0" onload="reloadCloud(this)"><\/iframe><\/div>');
//-->
</script>

La parte da modificare è la seguente:

CODICE

st={
       "coloreTesto" : "000000",
       "coloreLink" : "000000",
       "urlLibero" : "&nodate=1",
       "altezza" : "0",
       "larghezza" : "190",
       "immagineSfondo" : "",
       "posizioneSfondo" : "",
       "coloreSfondo" : "F2F2F2",
       "larghezzaBordo" : "1",
       "coloreBordo" : "8B8B8B",
       "tipoBordo" : "solid",
       "bordiCurvi" : 1,
       "posizione" : "bl",
       "margini" : "30",
       "primoFade" : 1
}

vediamo come:

Attributo	Spiegazione	Valori
"coloreTesto"	Il colore del testo all'interno della Nuvoletta	Qualsiasi colore esadecimale (senza l'#) ?wiki=Colori_HTML
"coloreLink"	Il colore dei link all'interno della Nuvoletta	Qualsiasi colore esadecimale (senza l'#) ?wiki=Colori_HTML
"urlLibero"	Un qualsiasi testo composto da attributi che si aggiunge automaticamente alla fine del Link dell'Iframe, utile per specificare ulteriori preferenze (Opzionale)	Attributi ricavabili da qui: ?wiki=Ultime_discussioni_sul_proprio_sito (Voce: Parametri opzionali)
"altezza"	L'altezza della Nuvoletta	Un qualsiasi valore numerico (attenzione a specificare solo un numero senza l'uso di indicatori come px, pt, %, ecc.). Scrivere "0" in caso si voglia adattare la "nuvoletta" al contenuto
"larghezza"	La larghezza della Nuvoletta	Un qualsiasi valore numerico (attenzione a specificare solo un numero senza l'uso di indicatori come px, pt, %, ecc.)
"immagineSfondo"	Un'immagine di sfondo (Opzionale)	Un link di un immagine di sfondo hostata su Internet, senza nessun'altra aggiunta
"posizioneSfondo"	La posizione e le opzioni di ripetizione dell'immagine di Sfondo (Solo in caso di presenza del suddetto parametro)	position & repeat (Esempio: "bottom left repeat-x")
"coloreSfondo"	Il colore dello Sfondo	Qualsiasi colore esadecimale (senza l'#) ?wiki=Colori_HTML
"larghezzaBordo"	La larghezza del Bordo della Nuvoletta	Un qualsiasi valore numerico (attenzione a specificare solo un numero senza l'uso di indicatori come px, pt, %, ecc.) Scrivere "0" in caso non si desideri bordo)
"coloreBordo"	Il colore del Bordo (Opzionale)	Qualsiasi colore esadecimale (senza l'#) ?wiki=Colori_HTML
"tipoBordo"	Lo stile del Bordo (Opzionale)	solid, double, ecc. css_border.asp
"bordiCurvi"	Includere dei bordi curvi (Solo Firefox e Safari)	1 = Si; 0 = No
"posizione"	Posizione rispetto alla pagina della Nuvoletta	"bl" = In basso a sinistra; "br" = In basso a destra; "tl" = In alto a sinistra; "tr" = In alto a destra
"margini"	La distanza dal margine della pagina	Un qualsiasi valore numerico (attenzione a specificare solo un numero senza l'uso di indicatori come px, pt, %, ecc.)
"primoFade"	Mostrare la nuvoletta subito al caricamento della pagina	1 = Si; 0 = No

N.B.: E' possibile apportare altre modifiche tramite CSS al selettore #cloud
Ecco un esempio di codice scritto da me per rendere lo Script armonioso con la The Bad Touch Skin di Dadz:

CODICE

st={
       "coloreTesto":"5F5F5F",
       "coloreLink":"136D9F",
       "urlLibero":"&nodate=1&font='segoe ui',arial&size=12",
       "altezza":"0",
       "larghezza":"190",
       "immagineSfondo":"http://skin.forumfree.net/1568/sezioni.png",
       "posizioneSfondo":"left bottom repeat-x",
       "coloreSfondo":"F2F2F2",
       "larghezzaBordo":"1",
       "coloreBordo":"8B8B8B",
       "tipoBordo":"solid",
       "bordiCurvi":1,
       "posizione":"bl",
       "margini":"30",
       "primoFade":1
}

F.A.Q.

1. Perchè lo Script non funziona correttamente?
   Le cause possono essere molteplici, da un errore durante la digitazione a una parte di script modificata con errore.
   Per prima cosa, controllare che, nella prima parte, tutti i campi siano preceduti e seguiti dalle " " (virgolette) (tranne nel caso di numeri), e siano seguiti dalla , (virgola) (tranne nel caso dell'ultimo).
   Se tutto ciò è corretto, dopo aver ricontrollato, saremo disposti a correggere il vostro codice nella discussione di Supporto ufficiale.


2. E' possibile aumentare o diminuire la durata della dissolvenza?
   Non vi consiglio di apportare nessuna modifica, tuttavia se desiderate modificare questo valore, all'interno dello script ci dovrebbe essere scritto time=8, modificate il valore 8 (vi consiglio un valore non più basso di 3 e non più alto di 25).


3. Posso rimuovere //Script By Antonio - http://ffmagazine.forumfree.it/?
   Il vostro buonsenso dovrebbe darvi subito una risposta: la scritta non è per nulla invadente per l'utente (infatti nemmeno si vede), si tratta solo di una riga nel codice sorgente. Come avete capito la mia risposta è no, poi fate come volete.


4. Posso apportare ulteriori modifiche alla "Nuvoletta"?
   [QUOTE=Più Sopra, , ]
   N.B.: E' possibile apportare altre modifiche tramite CSS al selettore #cloud
   [/QUOTE]
   


5. E' possibile includere un tasto di chiusura nella "Nuvoletta"?
   L'implementazione dovrebbe essere abbastanza semplice, ma preferisco aspettare le prossime versioni dello Script.


6. Cosa succede agli utenti che non hanno Javascript abilitato e agli Spider dei motori di ricerca? Lo Script invalida il codice?
   Niente di tutto ciò, lo Script: è nascosto per coloro con Javascript disattivato, gli Spider dei motori di ricerca lo saltano come se non ci fosse, e non invalida per niente il codice:
   Markup Validation Service: popuptopnews.forumfree.it (eventuali errori non sono correlati allo script)
   


7. E' possibile regolare l'altezza della "Nuvoletta" variamente in base al contenuto?
   Lo script include anche questa feature, basta scrivere nel campo "altezza" il valore "0".
   "altezza" : "0",
   

Conclusioni

Per prima cosa è giusto ricordare, come ho sottinteso prima, che dovete alla prima versione di questo Script il fatto che io oggi sia qui, infatti fu il primo che postai qui al Magazine e successivamente durante le procedure di rinnovamento del Forum venni preso come Moderatore.

Voglio inoltre aggiungere che ho preso imitazione dalle notifiche di Facebook e di Netlog, quindi l'utilizzo è molto utile agli utenti che non vogliono perdersi nemmeno un messaggio di una discussione o semplicemente per abbellire il Forum con qualcosa di nuovo, in caso manchino idee.

Ulteriori consigli sono sempre ben graditi, ma naturalmente nelle mie possibilità (vedi filtri di Forumfree).
Non si tratta di un codice perfetto, ne sono sicuro, la segnalazione di eventuali Bug è cosa buona e giusta.

E' possibile ridistribuire questa guida sui vostri Forum lasciandone inalterati integrità e contenuti/crediti ed inserendo il seguente codice in fondo al messaggio:

HTML

<div class="textinput" style="margin:1px;padding:4px;display:block;text-align:center"><a title="Nuvoletta Nuovi Messaggi in Real-Time" href="http://ffmagazine.forumfree.it/?t=49693068"><b>Nuvoletta Nuovi Messaggi in Real-Time</b></a>
Realizzata da <a href="http://www.forumfree.it/?act=Profile&amp;MID=3408796">[Antonio]</a> del <a title="Forumfree Magazine - Stai al passo con Forumfree!" href="http://ffmagazine.forumfree.it/?t=48148627"><b>ForumFree Magazine</b></a>.
Guida rilasciata sotto una <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Licenza Creative Commons 3.0</a>.</div>

Esempio visualizzazione:

Nuvoletta Nuovi Messaggi in Real-Time
Realizzata da [Antonio] del ForumFree Magazine.
Guida rilasciata sotto una Licenza Creative Commons 3.0.

Topic Ufficiale Supporto Nuvoletta Nuovi Messaggi in Real-Time