Script per emoticons su blogspot

[Mr.TFM]

Premettendo che non capisco una mazza di javascript (e voi direte chicca**otelofaffare? ) , ho trovato sul web uno script per gli emoticons nei post di blogspot....

Siccome gli emoticon usati fanno un po' schifo, e siccome sono il lord delle emoticon di MegaLab (o almeno lo ero ) ho scaricato lo script, e l'ho modificato, inserendo immagini diverse.....
Il risultato ottenuto è questo:

Codice: Seleziona tutto

function replaceText() {

bodyText = document.getElementById("body");
theText = bodyText.innerHTML;
theText = theText.replace(/:-\)/gi,'<img src="http://bp3.blogger.com/_DyqCr3kM_7A/SGeMUxhrhDI/AAAAAAAAAJA/-iXcsxo2Amw/s1600-h/01.png" alt=":-)" />');
theText = theText.replace(/:\)/gi,'<img src="http://bp3.blogger.com/_DyqCr3kM_7A/SGeMUxhrhDI/AAAAAAAAAJA/-iXcsxo2Amw/s1600-h/01.png" alt=":)" />');
theText = theText.replace(/:-\(/gi,'<img src="http://bp3.blogger.com/_DyqCr3kM_7A/SGeMXmdUo4I/AAAAAAAAAJI/QE9Su2IhbK8/s1600-h/02.png" alt=":-(" />');
theText = theText.replace(/:\(/gi,'<img src="http://bp3.blogger.com/_DyqCr3kM_7A/SGeMXmdUo4I/AAAAAAAAAJI/QE9Su2IhbK8/s1600-h/02.png" alt=":(" />');
theText = theText.replace(/;\)/gi,'<img src="http://bp0.blogger.com/_DyqCr3kM_7A/SGeMZiqZrFI/AAAAAAAAAJQ/t1fNV1My-Lc/s1600-h/03.png" alt=";)" />');
theText = theText.replace(/;-\)/gi,'<img src="http://bp0.blogger.com/_DyqCr3kM_7A/SGeMZiqZrFI/AAAAAAAAAJQ/t1fNV1My-Lc/s1600-h/03.png" alt=";-)" />');
theText = theText.replace(/:D/gi,'<img src="http://bp2.blogger.com/_DyqCr3kM_7A/SGeMbX44eLI/AAAAAAAAAJY/KOmS2NJDZWo/s1600-h/04.png" alt=":D" />');
theText = theText.replace(/:-D/gi,'<img src="http://bp2.blogger.com/_DyqCr3kM_7A/SGeMbX44eLI/AAAAAAAAAJY/KOmS2NJDZWo/s1600-h/04.png" alt=":-D" />');
theText = theText.replace(/:p/gi,'<img src="http://bp2.blogger.com/_DyqCr3kM_7A/SGeMjz7yGoI/AAAAAAAAAKA/p_jQL3CepGA/s1600-h/09.png" alt=":p" />');
theText = theText.replace(/:-p/gi,'<img src="http://bp2.blogger.com/_DyqCr3kM_7A/SGeMjz7yGoI/AAAAAAAAAKA/p_jQL3CepGA/s1600-h/09.png" alt=":-p" />');
theText = theText.replace(/:o/gi,'<img src="http://bp1.blogger.com/_DyqCr3kM_7A/SGeMhtAW0VI/AAAAAAAAAJ4/BIO1AW52m6Q/s1600-h/08.png" alt=":o" />');
theText = theText.replace(/:-o/gi,'<img src="http://bp1.blogger.com/_DyqCr3kM_7A/SGeMhtAW0VI/AAAAAAAAAJ4/BIO1AW52m6Q/s1600-h/08.png" alt=":-o" />');
theText = theText.replace(/8-\)/gi,'<img src="http://bp1.blogger.com/_DyqCr3kM_7A/SGeMmtJe-_I/AAAAAAAAAKI/Rk4LZ5RjOGM/s1600-h/10.png" alt="cool" />');
theText = theText.replace(/8\)/gi,'<img src="http://bp1.blogger.com/_DyqCr3kM_7A/SGeMmtJe-_I/AAAAAAAAAKI/Rk4LZ5RjOGM/s1600-h/10.png" alt="cool" />');
theText = theText.replace(/:\|/g,'<img src="http://bp1.blogger.com/_DyqCr3kM_7A/SGeMoq1OeOI/AAAAAAAAAKQ/BUtUkivNPxU/s1600-h/11.png" alt=":|" />');
theText = theText.replace(/:-\|/g,'<img src="http://bp1.blogger.com/_DyqCr3kM_7A/SGeMoq1OeOI/AAAAAAAAAKQ/BUtUkivNPxU/s1600-h/11.png" alt=":-|" />');
theText = theText.replace(/fff)/gi,'<img src="http://bp1.blogger.com/_DyqCr3kM_7A/SGeMeeJb9FI/AAAAAAAAAJo/FgGnidSehRE/s1600-h/06.png" alt="vomitino" />');
theText = theText.replace(/argh)/gi,'<img src="http://bp2.blogger.com/_DyqCr3kM_7A/SGeMfmJb6CI/AAAAAAAAAJw/QwuWzeLoWFY/s1600-h/07.png" alt="argh" />');
theText = theText.replace(/devil)/gi,'<img src="http://bp2.blogger.com/_DyqCr3kM_7A/SGeMdJgtfWI/AAAAAAAAAJg/E7kj3BiEf_I/s1600-h/05.png" alt="devil" />');


bodyText.innerHTML = theText;

}


Lo script l'ho caricato qui...
http://www.webalice.it/matteo_terzago/script/smiley.js

Ho fatto le modifiche al template come spiegato in quel post (correggendolo), ma non funziona....

Codice: Seleziona tutto

<script type="text/javascript" src="http://www.webalice.it/matteo_terzago/script/smiley.js"></script>

Dov'è l'errore?
Lo script è fatto male?
Il link allo script non va bene?
Lo script non è compatibile con l'ultima versione di blogspot?

[Mr.TFM]

Nessuno mi dice che devo studiarmi javascript?

[eDog]

Nessuno mi dice che devo studiarmi javascript?

http://javascript.html.it

[Rumez]

puoi darmi l'indirizzo della pagina dove viene incluso quel js? (la pagina dove si inseriscono gli emoticons in pratica) così posso fare un po' di debug e vedere qualcosa in più..perché così scritto sembrerebbe corretto il tuo js

[ssjx]

Non ho mai studiato JS ma, ad occhio (ovvero come sono sopravvissuto sino ad oggi e con discreti risultati), a me pare tutto OK nella sintassi

magari per le prove però io ti consiglio di ridurre tutto al minimo (meno probabilità di magagne, più facile individuazione errori)... una emoticon va più che bene per le prove

[Mr.TFM]

puoi darmi l'indirizzo della pagina dove viene incluso quel js? (la pagina dove si inseriscono gli emoticons in pratica) così posso fare un po' di debug e vedere qualcosa in più..perché così scritto sembrerebbe corretto il tuo js

Sul mio blog...

Ho fatto anche un debug con Web Inspector (incluso in Webkit e Safari)
E l'unico errore riscontrato è questo:



Ho provato anche in questa pagina dove c'è un emoticon che dovrebbe essere richiamato così :-)

In particolare, mentre scrivevo, anzi, modificavo il codice mi sorgevano dei seri dubbi su questa parte....

Codice: Seleziona tutto

theText.replace(/:-\)/gi,

Cioè, tra parentesi dopo theText.replace non ndovrebbe essereci scitto il codice che richiama l'emoticon? E poi non capisco perché a volte c'è la parentesi chiusa, e perché a volte finisce con "gi" e altre con "g".......

L'ignoranza, sapete.......

[Rumez]

sto facendo delle prove..attualmente ho scoperto che lo script js va in errore in queste 3 righe:

Codice: Seleziona tutto

theText = theText.replace(/fff)/gi,'<img src="http://bp1.blogger.com/_DyqCr3kM_7A/SGeMeeJb9FI/AAAAAAAAAJo/FgGnidSehRE/s1600-h/06.png" alt="vomitino" />');
theText = theText.replace(/argh)/gi,'<img src="http://bp2.blogger.com/_DyqCr3kM_7A/SGeMfmJb6CI/AAAAAAAAAJw/QwuWzeLoWFY/s1600-h/07.png" alt="argh" />');
theText = theText.replace(/devil)/gi,'<img src="http://bp2.blogger.com/_DyqCr3kM_7A/SGeMdJgtfWI/AAAAAAAAAJg/E7kj3BiEf_I/s1600-h/05.png" alt="devil" />');


fai una prova eliminandole per vedere se le altre faccine funzionano..io intanto vedo di capirne di più

ps:

/g vuol dire che viene fatto un replace globale ovvero che vengono cambiate tutte le occorrenze dell'intero documento

/gi vuol dire che fa la sostituzione globale utilizzando il metodo key insensitive nel senso che scirvere Mr.TFM o mr.tfm è la stessa cosa e verrà rimpiazzato comunque indipendentemente dalla presenza di maiuscole

[Rumez]

ok ci sono..

fai come segue:

sostituisci tutti i /g con /gi così sei sicuro che fai il replace sull'intera pagina di tutte le occorrenze ignorando il key sensitive

nelle tre 3righe finali ci sono delle parentesi tonde di troppo
questo:

Codice: Seleziona tutto

theText = theText.replace(/fff)/gi....


deve diventare questo:

Codice: Seleziona tutto

theText = theText.replace(/fff/gi


un'ultima cosa che sicuramente non ti torna..avrai sicuramente notato che le le parentesi "sembrano" utilizzate in maniera strana..questo perché i caratteri '(' e ')' sono dei caratteri speciali. Essi in genere racchiudono al loro interno delle istruzioni..ma se queste istruzioni dovessero avere al loro interno proprio dei caratteri ')'? ad esempio nel caso della faccina :-) ?

in questi casi si usano delle notazioni particolari ovvero davanti ai caratteri speciali ci si mette un bel '\' e il gioco è fatto.

Ti faccio un esempio che è più semplice:

la faccina :-) andrà inserita nel codice js in questo modo: :-\) e analogamente la faccina :-( andrà inserita così: :-\(

altro carattere speciale è lo stesso '\' quindi la faccina :-\ dovrà essere inserita così: :-\\

[Mr.TFM]

Ecco, ma nel caso di (/fff) perché non si conclude con una parentesi chiusa, visto che non ci sono caratteri speciali?

[Rumez]

perché la sintassi del comando replace è:

(/stringa da ricercare/,"stringa da sostituire")

quindi la parentesi dopo fff non ci va..

negli altri casi c'è semplicemente perché fa parte della faccina

[Mr.TFM]

Ehm ora che è tutto chiaro, Huston, abbiamo un problema..........
Lo script in qualche modo blocca le immagini....

Non capisco perché non carichi gli emoticon, e le immagini che ho carticato sul blog.........

[Rumez]

infatti avevo notato pure io che non visualizza l'immagine e mostra il contenuto della proprietà alt. pensavo fosse qualcosa riguardante dei permessi.

mi pare siano pochi gli emoticon non puoi provare a carticarli su web alice?

[Mr.TFM]

infatti avevo notato pure io che non visualizza l'immagine e mostra il contenuto della proprietà alt. pensavo fosse qualcosa riguardante dei permessi.

mi pare siano pochi gli emoticon non puoi provare a carticarli su web alice?

Sì certo, ma cambia poi qualcosa?
Io intanto procedo, e elimino anche la stringa

Codice: Seleziona tutto

theText = theText.replace(/8\)/gi,'<img src="http://bp1.blogger.com/_DyqCr3kM_7A/SGeMmtJe-_I/AAAAAAAAAKI/Rk4LZ5RjOGM/s1600-h/10.png" alt="cool" />');

perché mi manda a quel paese il contatore dei tags con quell'8)....

[Mr.TFM]

Ora gli emoticon funzionano (sono caricati su webalice) ma le altre immagini sono andate a ramengo............

[Rumez]

quali altre immagini?

[Mr.TFM]

Queste:



Eccetera eccetera eccetera......

Però le emoticons funzionano tutte bene....

[Mr.TFM]

Doh!
Su Safari lo fa, ma su Firefox no.........

[Mr.TFM]

Ho trovato l'errore...

Da pochi giorni è cambiato blogger e l'editor dei post...
(quello nuovo è una schifezza)

Ad ogni modo non capivo perché nel post di ieri sera l'immagine si vedesse, e in quelli vecchi no.

Poi mi sono ricordato che era cambiato l'editor, e sono andato a confrontare i due codici...

Morale della favola, il vecchio editor caricava le immagini in questo modo.....

Codice: Seleziona tutto

<a href="http://bp0.blogger.com/_DyqCr3kM_7A/SGD7rFH6y4I/AAAAAAAAAI4/MElaySyummQ/s1600-h/Cevoli.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;" src="http://bp0.blogger.com/_DyqCr3kM_7A/SGD7rFH6y4I/AAAAAAAAAI4/MElaySyummQ/s200/Cevoli.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5215445086023371650" /></a>

Insomma, l'errore, eccolo qua:

cursor:pointer;

Safari e Opera che sono pignoli, non sanno se caricare l'emoticon, o l'immagine, quindi fanno casino, Firefox, se ne frega del ":p" e carica l'immagine giusta...

Ora però posso provare a togliere la stringhetta relativa dal javascript

Codice: Seleziona tutto

theText = theText.replace(/:p/gi,'<img src="http://www.webalice.it/matteo_terzago/script/Smiley/09.png" alt=":p" />');

Oppure trovare un escamotage...........

[Mr.TFM]

Ma che cacchio!!!!!!

Ora è successo questo...



(ho solo cancellato la stringa)

Codice: Seleziona tutto

theText = theText.replace(/:p/gi,'<img src="http://www.webalice.it/matteo_terzago/script/Smiley/09.png" alt=":p" />');

[Rumez]

calma e sangue freddo


allora la questione è questa:

nell'istruzione cursor:pointer il javascript trova la stringa cursor:pointer ovvero la faccina con la linguetta fuori e ci faceva il replace con un emoticon con il risultato che l'html si rompeva e non vedevi più correttamente le imamgini.

Le cose da fare sono 3:
1) non metti il cursor:pointer tanto i collegamenti mettono in automatico la mano con l'indice al posto della freccetta sopra i link

2) metti cursor: pointer con un balnk in mezzo

3) usi dei tag particolari per le tue faccine, tanto te li puoi creare tu..mi viene in mente una cosa tipo bbcode [:-\)] oppure