Curiosando nei codici sorgente di vari siti, ti sarà sicuramente capitato di trovare qualche file javascript totalmente incomprensibile, nonché privo di qualsiasi indentazione. Questo perché è stato compresso e probabilmente anche codificato.

La compressione si basa su un sistema molto semplice: togliere i commenti, eliminare tutti gli spazi, le andate a capo, le indentazioni. In questo modo le dimensioni del file .js vengono sostanzialmente diminuite, ma il codice non è più facilmente leggibile.

Se nel tuo curiosare avrai poi trovato un file javascript che inizia con:
eval(function(p,a,c,k,e,r){ ...
Allora si tratta un file javascript compresso e codificato con Packer.

Packer

Packer è un servizio online che ti permettere di comprimere e al contempo codificare, secondo il proprio algoritmo, un pezzo di codice javascript.

Per farlo basta andare all’indirizzo http://dean.edwards.name/packer/, incollare il codice nella prima textarea e premere sul pulsante “Pack”.
In un attimo apparirà nell’altra textarea il nuovo codice privo di spazi e codificato in una maniera da renderlo quasi indecifrabile.

Perchè quasi indecifrabile?
Perchè esiste un analogo servizio online che permette di eseguire il processo inverso, jsBeautifier.

Javascript unpacker and beautifier

Nato inizialmente come servizio per “rendere più belli” (significato letterario di beautifier) i file javascript, aggiungendo automaticamente l’indentazione che più ci aggrada, in seguito è anche diventato un metodo per decodificare i file compressi con Packer (da qui il nome “Unpacker“).

Andando sulla pagina http://jsbeautifier.org/ basta incollare nella textarea il codice compresso (privo di spazi), oppure quello codificato da Packer, scegliere le opzioni di indentazione sulla destra, premere su Beautify ed il gioco è fatto. Otterrete subito un testo javascript perfettamente leggibile e pronto per essere studiato.

Articoli correlati:

1. Creare un anteprima dinamica dei commenti
2. Primi passi con jQuery – 1
3. Primi passi con jQuery – 2

Ci sono numerosi metodi per sostituire gli ormai noiosi fonts supportati dai browser web come Arial, Verdana, Courier, etc con altri “non-nativi” e sicuramente più accattivanti.
Tra i più famosi vorrei citare il vetusto sIFR basato su Flash, la proprietà CSS3 @font-face che sta piano piano prendendo piede, l’ottimo servizio Typekit purtropppo a pagamento e altri metodi basati su javascript come Typeface e Cufón.

Cufón

Senza un motivo ben preciso, forse perché mi sono trovato bene quando ho avuto modo di provarlo, vorrei analizzare il funzionamento di quest’ultimo.

Come precedentemente accennato, si tratta di un metodo completamente basato sui javascript, perciò, chi non li avesse abilitati non vedrebbe alcuna differenza (ma si presuppone che nessuno abbia di questi problemi al giorno d’oggi).

Come si procede?

Nella prima parte del procedimento dobbiamo creare un file javascript che contenga le informazioni riguardo al font che andremo ad usare.
Nella seconda parte andrà applicato alla pagina HTML.

Generare il Font

1. Si sceglie il font che vogliamo usare. Con questo intendo che dovremo proprio procurarci il file .TTF .OTF o .PFB e tenerlo a portata di mano. Procuriamoci anche le versioni corsive e in grassetto se riteniamo possano tornarci utili
2. Andiamo sul sito http://cufon.shoqolate.com/generate/.
3. Nella parte alta della pagina ci sono quattro campi in cui possiamo caricare il file del font nella sua versione regolare, quella in grassetto, quella in corsivo e quella in grassetto corsivo. Solamente la prima è obbligatoria. Nel mio caso, voglio usare la versione regolare e quella in grassetto, quindi caricherò solo queste due.
   
4. Fatto ciò, è importante assicurarsi di aver messo un segno di spunta per accettare l’EULA che dichiara che il font scelto permette il Web Embedding. Per evitare di avere problemi riguardo a questo punto, consiglio vivamente l’utilizzo di font completamente Open Source come quello in esempio (Titillium).
5. Saltando tutte le impostazioni che ci vengono messe a disposizione, andiamo in fondo alla pagina e stavolta dobbiamo accettare i termini del contratto del servizio Cufón.
6. Let’s do this! Dovrebbe partire il download di un file .font.js contenente tutte le informazioni riguardo al font caricato. Il file in questione potrebbe avere un nome assurdo e molto lungo, possiamo rinominarlo senza problemi.

Applicazione

1. Sempre dal sito di Cufón facciamo click su download per scaricare il file javascript (cufon-yui.js) che contiene il “motore” vero e proprio di Cufón.
2. Apriamo un foglio HTML e nella sezione <head> carichiamo prima il cufon-yui.js e successivamente il file .font.js del font opportunamente rinominato, assicurandoci che i link siano corretti.

   <head>
       ...
       <script type="text/javascript" src="js/cufon-yui.js" ></script>
       <script type="text/javascript" src="js/TitilliumCufon.font.js" ></script>
       ...
   </head>
   

3. Aggiungiamo un po’ di contenuto fittizio alla pagina. Aggiungiamo anche dei titoli nei tag H1, H2, H3, etc perchè è a questi che generalmente viene applicato il cufon per motivi di accessibilità e per non appesantire troppo i tempi di caricamento della pagina. In definitiva, direi che non è buona pratica sostituire il font a tutto il testo, ma è pur sempre fattibile.

<h2>Titolo di qualche genere</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua....</p>
<h3>Altro titolo lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>

4. Tornando nel <head> possiamo finalmente caricare lo script indicando quali tag HTML sostituire con il nuovo font in questo modo.

   <script type="text/javascript">
   
       Cufon.replace('h1,h2,h3,h4,h5,h6');
       //I nomi dei tag vanno separati con le virgole
   
   </script>
   

5. Aprendo la pagina HTML nel browser, il risultato dovrebbe essere qualcosa del genere (tutto dipende dalle impostazioni usate nel css).
   

Ulteriori impostazioni

Quando abbiamo attivato lo script al punto 4, ci siamo limitati a indicare una serie di tag HTML, ma è possibile designare classi o ID specifici utilizzando i selettori CSS.
Se per esempio volessimo applicare il font a tutto ciò che ha la classe “font” basterà indicarla in questo modo.

<script type="text/javascript">

    Cufon.replace('h1,h2,h3,h4,h5,h6,.font');
    //Usa i classici selettori CSS .font per la classe e #font per l'ID

</script>

Ultima cosa che vorrei segnalare, se applichiamo il cufon ai link, non funzionerà lo status hover con le impostazioni di default. Per abilitarlo basta aggiungere questa opzione.

<script type="text/javascript">

    Cufon.replace('h1,h2,h3,h4,h5,h6,.font');
    //Usa i classici selettori CSS .font per la classe e #font per l'ID

</script>

Ultima cosa che vorrei segnalare, se applichiamo il cufon ai link, non funzionerà lo status hover con le impostazioni di default. Per abilitarlo basta aggiungere questa opzione.

<script type="text/javascript">

    Cufon.replace('h1,h2,h3,h4,h5,h6,.font',{ hover: 'true' });

</script>

Aggiornamento

Se Cufon non dovesse funzionare su browser obsoleti tipo IE6, IE7 o le versioni di Firefox inferiori alla 3.5, potete risolvere il problema caricando un framework javascript (tipo jQuery), prima dell’inclusione di Cufon-yui.js, in questo modo:

<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js" ></script>
...
</head>

Il problema è dovuto al fatto che questi browser non riconoscono i selettori css tipo .nomeClasse o #nomeId.

Di seguito vi lascio il link ad una pagina demo molto sempliciotta che mostra i risultati ottenuti e il download del pacchetto con tutti i file (compreso il font). Alla prossima!

Il font usato nell’esempio, Titillium, è completamente Open Source e può essere scaricato nella versione completa dal sito ufficiale.

Articoli correlati:

1. Aggiungere o sostituire manualmente le smiley di wordpress
2. Primi passi con jQuery – 1
3. Creare un anteprima dinamica dei commenti

Eccoci qua con una nuova lezione di Jquery.
L’altra volta abbiamo visto degli esempi molto semplici di funzioni jquery, che però ti dovrebbero aver già fatto intuire come sia la struttura di qualsiasi altro script.

Struttura di base

Ricapitolando, abbiamo visto che tutto il codice jquery deve stare all’interno di $(document).ready(function() { … }); per funzionare.

Fatto questo, avremo sempre bisogno di un oggetto da cui partire, come ad esempio: $(”#prova”). Nei casi analizzati, si trattava di un oggetto con un preciso ID o classe, ma non sempre sarà così e quindi ricorreremo a tutta una serie di selettori, che ho intensione di vedere più avanti.

Una volta individuato l’oggetto, abbiamo bisogno di un evento, per proseguire nell’esecuzione della funzione. Anche in questo caso, abbiamo visto solo l’evento .click(), che fa partire una certa funzione nel momento in cui clicchiamo sull’oggetto indicato, ma ce ne saranno altri da prendere in considerazione.

Indicato l’evento scatenante, possiamo passare alla descrizione della funzione vera e propria, quindi ci servirà nuovamente un oggetto su cui lavorare e far partire le animazioni e gli effetti vari che la libreria jQuery ci mette a disposizione. Fin’ora hai visto solo il .fadeIn().
Esempio:

  $("#prova").click(function() {
     $(".hide").fadeIn();
     return false;
  });

Questa che ho cercato di tracciare è la struttura che seguiremo nel 90% dei casi:

selettore + evento –> selettore + effetto

Ora non resta altro che vedere il maggior numero possibile di selettori, eventi ed effetti, per riuscire a padroneggiare al meglio questo potente strumento chiamato jQuery.

Animare gli elementi cambiandone dinamicamente lo stile

Per prima cosa dobbiamo definire la struttura HTML e CSS da manipolare.

Codice HTML:

<ul id="animazione">
    <li>Segui</li>
    <li>i tutorial</li>
    <li>di jquery</li>
    <li>su</li>
    <li>BitTrack.it</li>
</ul>

Codice CSS:

#animazione {
    list-style: none;
}
#animazione li {
    width: 200px;
    padding: 5px;
    border: 1px solid #ccc;
    background: #eee;
}

Il risultato è questo:

• Segui
• i tutorial
• di jquery
• su
• BitTrack.it

Una semplice lista con ID animazione, contenente elementi di larghezza 200px (210px per i più pignoli ). Vogliamo far sì che, cliccando su un qualsiasi elemento della lista, la sua larghezza raddoppi a 400px con un’animazione.

<script type="text/javascript">

$(document).ready(function(){

    $("#animazione li").click(function(){
        $(this).animate({width: "400px"}, 1000);
    });

});

</script>

Analizziamo il codice passo passo.

Con $(“#animazione li”) indico qualsiasi elemento

appartenente alla lista con ID animazione, esattamente come avviene nel CSS. Usando l’evento .click(function){ … }); scrivo dentro alle graffe l’effetto che voglio ottenere.

Per eseguire un effetto però ho bisogno di un oggetto su cui lavorare e si da il caso che si tratti proprio dell’elemento che ho appena cliccato! Come fare per individuare esattamente quell’elemento della lista piuttosto che un altro? Usando $(this).
Si tratta di un selettore molto utile che, in questo caso, fa riferimento all’oggetto della funzione click().

Cosa sia esattamente this non è semplice da spiegare (almeno per me), è una cosa che si riesce a comprendere a pieno soltanto con l’esperienza.
Per ora ti basta sapere che, una volta fatto click su un elemento della lista, this indicherà esattamente quell’elemento; quindi non resta altro da fare che far partire l’effetto desiderato con animate().

Animate

Animate() è una funzione molto potente che ci permette di manipolare l’oggetto desiderato, cambiandone lo stile per mezzo di animazioni. Quando parlo di stile, intendo lo stesso che usiamo nei css. Per esempio, in questo caso dobbiamo aumentare la larghezza fino a 400px, scriverò:

$(this).animate({width: "400px"});

Come vedi, i parametri dell’animazione (quelli tra parentesi graffe) vengono indicati in modo molto simile alle dichiarazioni del css (fatta eccezione per le virgolette).
Altra cosa da notare, è il fatto che, come ti avevo preannunciato l’altra volta, i parametri di una funzione seguono una loro precisa formattazione.
Nel caso di animate() devi inserire i parametri dell’animazione vera e propria dentro parentesi graffe e se vorrai indicare la durata dell’effetto (come nel nostro caso), dovrai inserirla al di fuori delle parentesi preceduta da una virgola, in questo modo.

$(this).animate({width: "400px"}, 1000);

Questo è ciò che abbiamo ottenuto:

• Segui
• i tutorial
• di jquery
• su
• BitTrack.it

Eseguire la funzione inversa facendo click sullo stesso elemento

L’animazione è riuscita alla grande, ma vediamo di rendere il nostro script più completo, facendo in modo che, cliccando una seconda volta sugli elementi la cui larghezza è aumentata, questi tornino alla situazione di partenza con un’altra animazione.

Anche quì ci sono molte strade, ma la pratica più usata consiste nell’assegnare una classe agli elementi la cui larghezza è stata portata a 400px, dopo di che, se viene fatto nuovamente click su uno di questi elementi, attraverso un controllo, saremo in grado di capire se la larghezza di quel dato elemento sia da aumentare o diminuire, a seconda che quella classe sia presente o no.

Anche in questo caso risulta troppo difficile da spiegare a parole, quindi passiamo ai fatti.

<script type="text/javascript">

$(document).ready(function(){

    $("#animazione li").click(function(){
        if($(this).hasClass("largo")){
            $(this).removeClass("largo").animate({width: "200px"}, 1000);
        } else{
            $(this).addClass("largo").animate({width: "400px"}, 1000);
        }
    });

});

</script>

Analizzando il codice: come punto di partenza abbiamo sempre il click su un elemento della lista.

    $("#animazione li").click(function(){
        //...
    });

Dopo di che, se quel preciso elemento possiede la classe largo (nome a caso scelto da me con molta fantasia) e quindi è già lungo 400px, riportalo a 200px e toglili la classe largo.

if( $(this).hasClass("largo") ) {
    $(this).removeClass("largo").animate({width: "200px"}, 1000);
}

Altrimenti (cioè se non possiede quella data classe), aumenta la lunghezza a 400px e aggiungigli la classe largo.

else{
    $(this).addClass("largo").animate({width: "400px"}, 1000);
}

Ecco il risultato finale:

• Segui
• i tutorial
• di jquery
• su
• BitTrack.it

Mi scuso se sono andato un po’ di fretta in questi ultimi passaggi, nonostante abbia utilizzato funzioni molto utili ed importanti tipo hasClass(), addClass, removeClass, ma il loro significato è talmente intuitivo ed evidente che non mi sembrava il caso di perderci troppo tempo.

Fine

Anche questa “lezione” è finita, spero di riuscire a pubblicare le prossime più velocemente, poichè gli argomenti da trattare su jQuery sono tantissimi, devo solo scegliere l’ordine da seguire. Come al solito, se hai suggerimenti o critiche, i commenti sono a tua disposizione. Alla prossima.

Articoli correlati:

1. Primi passi con jQuery – 1
2. Primi passi con jQuery – 3
3. Creare un anteprima dinamica dei commenti

]]> http://www.bittrack.it/archives/primi-passi-con-jquery-2/feed/ 0 http://www.bittrack.it/archives/primi-passi-con-jquery-1/ http://www.bittrack.it/archives/primi-passi-con-jquery-1/#comments Tue, 17 Nov 2009 22:43:33 +0000 Raspo http://www.bittrack.it/?p=811 non c'è molto in Italiano per questo, vorrei condividerne la mia conoscenza con te, con una sorta di "guida al jquery", basata su semplici esempi pratici]]>

Jquery è una libreria javascript molto potente che ci permette di estendere le potenzialità e funzionalità delle nostre pagine web con animazioni ed effetti vari.

Su Internet si possono trovare un infinità di tutorial a riguardo, ma che io sappia, non c’è molto in Italiano; dunque vorrei provare a condividerne la mia conoscenza con te, con una sorta di “guida al jquery“, basata su semplici esempi pratici piuttosto che concetti teorici.

Preparazione

Senza indugiare oltre, vai su http://jquery.com/ e scarica l’ultima versione di jquery (al momento è la 1.3.2).

Quindi sposta il file jquery-1.3.2.min.js appena scaricato nella cartella dove andremo a fare i nostri primi esperimenti; nella stessa cartella aggiungi anche un file HTML vuoto.

Tutto quello che devi fare adesso per utilizzare la libreria, è includerla nella sezione <head> del codice HTML in questo modo.

<head>

 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

Notare che se avessi spostato il file jquery-1.3.2.min.js in una sottocartella avresti dovuto scrivere:

<script type="text/javascript" src="NOMECARTELLA/jquery-1.3.2.min.js"></script>

Adesso puoi cominciare a scrivere il tuo primo semplice script per vedere se tutto funziona.

Test di funzionamento

Di seguito all’inclusione di jQuery, aggiungi un altro tag <script> e scrivi al suo interno il primo (fondamentale) codice jquery.

<head>
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 <script type="text/javascript">
   $(document).ready(function() {
     // fai qualcosa quando la pagina è stata caricata
   });
 </script>
</head>

Quando si scrive un codice jquery, è importante cominciare con la scritta $(document).ready(function() { per indicare che tutto ciò che è scritto dopo la parentesi graffa (e prima della chiusura }); ), verrà eseguito solo quando la pagina sarà completamente caricata.
Spostati momentaneamente nel <body> per aggiungere un link da usare come pulsante per azionare lo script.

<a href="#" id="prova">Funziona?</a>

Visto che dobbiamo solamente testare il funzionamento della libreria, facciamo qualcosa di molto semplice.

 $(document).ready(function() {
   $("#prova").click(function() {
     alert("Certo che funziona!");
     return false;
   });
 });

Ecco la spiegazione a grandi linee del codice. Quando viene fatto click su $(“#prova”), cioè, l’elemento con ID “prova“, esegue una funzione che mostra un messaggio di alert che dice: Certo che funziona!

Nota: il comando return false; non è indispensabile ai fini della funzione, serve solo ad evitare che cliccando, l’utente venga realmente reindirizzato alla pagina indicata nel href del link (in questo caso # farebbe scrollare improvvisamente la pagina verso l’alto).

Funziona?

Se appare l’alert significa che jquery funziona correttamente!

Anche se per ora il codice scritto non ti risulta molto chiaro, con qualche altro esempio e un minimo di pratica, capirai quanto jQuery sia effettivamente semplice.

Mostra e nascondi elementi

Per ora sei riuscito a far apparire un messaggio di alert, che come effetto non è poi un granchè, proviamo dunque con qualcosa di più interessante .

Per prima cosa c’è bisogno degli elementi HTML da manipolare.

<a href="#" id="prova2">Fatti vedere!</a>
<span class="hide" style="display: none">Eccomi.</span>

Un link con ID prova2 e uno span con classe hide che però ho nascosto con style=”display: none” (avrei potuto fare lo stesso da un file css esterno).

Vogliamo fare in modo che cliccando sul link “Fatti vedere!”, appaia lo span con la scritta Eccomi.

Fatti vedere! Eccomi.

Vediamo il codice jquery. Ricordati che deve essere incluso nel solito $(document).ready(function() {.

$(document).ready(function() {

  //... altro codice

  $("#prova2").click(function() {
     //scrivi qui cosa succede dopo il click
  });

});

Come prima, ho usato l’evento .click sul link per far partire la funzione. Ma hai fatto caso che lo span che dobbiamo far apparire ha una classe anziché un ID? Come li distinguo in jquery? Semplicissimo, esattamente come nel CSS: “#” sta per ID e “.” sta per classe. Quindi $(“.hide”) rappresenterà l’elemento (o gli elementi) con classe “hide”.

  $("#prova2").click(function() {
     $(".hide").fadeIn();
     return false;
  });

Per far apparire un elemento che è inizialmente nascosto, ci sono molti modi in jquery, io ho voluto usare il .fadeIn(). Se vuoi puoi provare anche con .show() che mostra l’elemento immediatamente, senza alcuna “transizione”.

Parametri

Come ultima cosa per oggi vediamo di passare qualche parametro al fadeIn() per allungarne la durata dell’effetto. I parametri di una funzione vanno inseriti nelle parentesi tonde quando questa viene chiamata.

     $(".hide").fadeIn( PARAMETRI DELLA FUNZIONE );

Ovviamente, ogni funzione supporta solo un certo tipo di parametri che andranno scritti con una certa formattazione, con attenzione a virgole, virgolette, parentesi graffe, ect.

In questo caso, però, vogliamo solo impostare il tempo di durata dell’effetto fadeIn, che essendo un parametro numerico (espresso in millisecondi), basterà scriverlo nelle parentesi senza ulteriore formattazione.

  $("#prova3").click(function() {
     $(".hide2").fadeIn(3000);
     return false;
  });

Proviamo con 3000, cioè 3 secondi.

FadeIn di 3 secondi Eccomi.

Fine (per ora)

Questa era la prima “lezione” di jquery, spero sia stata di tuo gradimento, perché ho intenzione di farne altre. Se hai bisogno di chiarimenti o vuoi fare qualche critica, un commento è ben gradito. Stay tuned!

Articoli correlati:

1. Primi passi con jQuery – 2
2. Primi passi con jQuery – 3
3. Creare un anteprima dinamica dei commenti

]]> http://www.bittrack.it/archives/primi-passi-con-jquery-1/feed/ 5 http://www.bittrack.it/archives/creare-un-anteprima-dinamica-dei-commenti/ http://www.bittrack.it/archives/creare-un-anteprima-dinamica-dei-commenti/#comments Sat, 31 Oct 2009 21:59:51 +0000 Raspo http://www.bittrack.it/?p=703 Avere un anteprima del commento che si sta scrivendo, risulta molto utile, specialmente se si vuole utilizzare qualche tag html tipo quello per inserire link, citazioni o mettere il testo grassetto, o in corsivo. Per far ciò bastano poche semplici righe di jquery. Codice HTML Innanzitutto ci serve il codice HTML della textarea in cui l’utente [...]]]>

Avere un anteprima del commento che si sta scrivendo, risulta molto utile, specialmente se si vuole utilizzare qualche tag html tipo quello per inserire link, citazioni o mettere il testo grassetto, o in corsivo. Per far ciò bastano poche semplici righe di jquery.

Codice HTML

Innanzitutto ci serve il codice HTML della textarea in cui l’utente inserisce il commento.

<body>

	<h3>Inserisci del testo per far apparire l'anteprima</h3>
	<textarea id="commento"></textarea>

</body>

Di seguito aggiungiamo un DIV vuoto, dove vogliamo che appaia l’anteprima e diamoli un id, in questo caso l’ho chiamato “anteprima”.

<body>

	<h3>Inserisci un commento per far apparire l'anteprima</h3>
	<textarea id="commento"></textarea>

	<div id="anteprima">
		<h3>Anteprima del commento</h3>
		<div><!-- l'anteprima apparirà qui --></div>
	</div>

</body>

Per l’esattezza, l’anteprima del commento non apparirà dentro al div “anteprima” ma in quello vuoto che si trova al suo interno.

Nascondiamo il tutto con un tocco di CSS.

#anteprima {
	display: none;
}

In questo modo, non vedremo neanche la scritta “Anteprima del commento”;  lo faremo riapparire al momento giusto con lo script.

Script Jquery

Come al solito, assicuriamoci di aver incluso la libreria jquery nell’head e usando un file esterno o la stessa pagina html, creiamo il nostro script.

$(document).ready(function(){

	$("#commento").keyup(function() {
          //funzione da eseguire
	});

});

Per far sì che lo script inizi a lavorare, usiamo l’evento jquery keyup, che esegue una certa funzione quando viene premuto (e rilasciato) un tasto mentre il focus si trova sulla textarea (che ha ID commento).

$(document).ready(function(){

	$("#commento").keyup(function () {
		var comment = $(this).val();
		$("#anteprima").show().children('div').html(comment);
	});

});

La funzione da eseguire è molto semplice:

1. Prendo il contenuto della textarea e lo salvo nella variabile comment.
2. Faccio apparire il div con id anteprima
3. Seleziono l’altro div vuoto che si trova al suo interno e vi scrivo il contenuto della variabile comment (cioè il testo del commento stesso)

Abbiamo quasi finito, basta fare qualche prova e vediamo che i vari tag html tipo <a>, <strong>, <i> vengono perfettamente “interpretati” nell’anteprima.

C’è solo un problema: quando premiamo invio, il testo non va a capo ma aggiunge semplicemente uno spazio.

$(document).ready(function(){

	$("#commento").keyup(function () {
		var comment = $(this).val().replace(/\n/g, "<br />");
		$("#anteprima").show().children('div').html(comment);
	});

});

Per correggere questo errore, basta agire sulla variabile comment e sostituire i \n, cioè i “simboli delle andate a capo” con dei <br />.

Fine

Adesso lo script è completo e pronto all’uso. Puoi sperimentarlo aggiungendo un commento su questa pagina!

Download

Articoli correlati:

1. Creare un ajax contact form con validazione dei dati
2. Primi passi con jQuery – 2
3. Primi passi con jQuery – 3

]]> http://www.bittrack.it/archives/creare-un-anteprima-dinamica-dei-commenti/feed/ 7 http://www.bittrack.it/archives/rimuovere-la-pubblicita-su-qualsiasi-browser-con-privoxy/ http://www.bittrack.it/archives/rimuovere-la-pubblicita-su-qualsiasi-browser-con-privoxy/#comments Sun, 11 Oct 2009 00:40:54 +0000 Raspo http://www.bittrack.it/?p=369 AdBlock Plus, il più popolare tra i Plugin di FireFox, ci ha viziati al punto che quando tentiamo di passare ad un nuovo browser, ne sentiamo immediatamente la mancanza. Ed è un vero peccato perché non possiamo gustarci altre validissime alternative tipo Chrome o Safari; ma in attesa che esca un plugin simile anche per [...]]]>

AdBlock Plus, il più popolare tra i Plugin di FireFox, ci ha viziati al punto che quando tentiamo di passare ad un nuovo browser, ne sentiamo immediatamente la mancanza.

Ed è un vero peccato perché non possiamo gustarci altre validissime alternative tipo Chrome o Safari; ma in attesa che esca un plugin simile anche per altri browser, possiamo sfruttare una soluzione alternativa, Privoxy.

Installazione e configurazione

1. Andiamo su http://www.privoxy.org/, scarichiamo e installiamo l’omonima applicazione che da qui in avanti rimarrà sempre attiva in background (nulla da temere, occupa solo un paio di MB)
2. Apriamo Chrome, quindi dal menu impostazioni (l’icona a forma di chiave inglese in alto a destra) scegliamo Opzioni
3. Spostiamoci sulla scheda Roba da smanettoni e facciamo click su Modifica impostazioni Proxy
4. Nella finestra che si aprirà selezioniamo Connessioni e poi Impostazioni LAN
5. Nella nuova finestra mettiamo un segno di spunta sulla casella che abilita l’utilizzo del Server Proxy
6. Nel campo Indirizzo digitiamo 127.0.0.1 e come Porta impostiamo la 8118
7. Assicuriamoci che la casella Ignora server proxy… non sia spuntata
8. Clicckiamo OK per chiudere tutte le finestre
9. Godiamoci una navigazione priva di pubblicità

Conclusioni

Privoxy è sicuramente una buona soluzione, riconosce e blocca un gran numero di elementi pubblicitari, ma aggiungerne di nuovi non è una cosa semplice, data la complessità del file di configurazione, quando invece con AdBlock Plus basterebbero pochi click.

Va però sottolineato che Privoxy, in compenso, funziona su tutti i Browser.

Articoli correlati:

1. Rimuovere i link al Music Store in iTunes 9
2. Sostituire i font con Cufón

]]> http://www.bittrack.it/archives/rimuovere-la-pubblicita-su-qualsiasi-browser-con-privoxy/feed/ 0