Come creare un contatore stile Twitter

Proviamo a creare un semplice counter di caratteri utilizzando JQuery e magari dandogli un'aspetto stile Twitter utilizzando un semplice stile CSS.


INTRODUZIONE

Ci piace molto il modello di counter che utilizza Twitter per limitare a 140 battute l'inserimento dei suoi post.
Ti avvisa quando i caratteri stanno diminuendo, quando stanno per teminare e quando hai superato il limite prestabilito.



Proviamo a ricreare le stesse funzionalità

XHTML

Grazie a CSS and jQuery, il codice della nostra pagina XHTML è molto semplice:

index.php

140 
 

What are you doing? 
 

 
 
 

All'interno del form, abbiamo uno speciale elemento span. Esso mostra inizialmente il numero di caratteri massimi consentiti dal counter. Come in Twitter, il limite impostato inizialmente è di 140 caratteri.

CSS

Come sappiamo CSS siamo in grado di ridurre drasticamente la quantità di codice XHTML che scriviamo. Con l'uso dei css è veramente facile cambiare l'aspetto dei nostri progetti, in qualsiasi momento, semplicemente modificando il foglio di stile e non intervenendo più invece sul codice della pagina stessa.

counter.css

/* Page styles */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
	margin:0px;
	padding:0px;
}

body{
	margin-top:30px;
	margin-left:30px;
	color:#51555C;
}


/* Form styles */

#twitter-container{
	-moz-border-radius:12px;
	-khtml-border-radius: 12px;
	-webkit-border-radius: 12px;
	border-radius:12px;
	
	border:6px solid #f5f5f5;
	
	padding:10px;
	width:600px;
	
	font-size:11px;
	font-family:'Lucida Grande',sans-serif;
	color:#333333;
}

label{
	font-size:20px;
	display:block;
}

.counter{
	color:#CCCCCC;
	float:right;
	font-family:Georgia,serif;
	font-size:32px;
	font-weight:bold;
	height:40px;
	overflow:hidden;
}

textarea{
	width:594px;
	height:38px;
	margin:5px 0 10px 0;
	
	border:1px solid #AAAAAA;
	padding: 4px 2px;
		
	font-family:'Lucida Grande',sans-serif;
	overflow:auto;
	font-size:14px;
}

.clear{
	clear:both;
}

Cominciamo con la definizione degli stili della pagina.
Per prima cosa ripristiniamo la nostra pagina (annullando il margine ed il padding degli elementi della pagina, che si differenziano per impostazione predefinita sui diversi browser).
Dopo di che sulla linea 9 e 10 impostiamo il margine superiore e sinistro per il body della pagina ed il colore del carattere per il testo.

Il div #twitter-container è quello che contiene il nostro form.
Fino a poco tempo fa, era necessario creare manualmente la grafica ad angolo arrotondato ed inserire ulteriori tag div per ogni angolo.
Adesso grazie alle recenti versioni di Firefox e Safari si può fare in puro CSS.

La proprietà css3 border-radius permette di creare angoli arrotondati per gli elementi. Il suo valore viene specificato in unità di misura o percentuale. Al momento, il border-radius è applicato solo da Safari3 e Firefox usando i correspettivi css3: -webkit-border-radius e -moz-border-radius.

Alla riga 61 facciamo un'importante aggiustamento (chiamato clearfix) per evitare che lo sfondo di un blocco contenitore sparisca quando contiene elementi "floatati".
Il problema si pone quando vogliamo usare la proprietà css float su un elemento contenuto in un blocco (div) contenitore al quale è applicato uno sfondo o bordo. Lo sfondo/bordo del contenitore non si ridimensiona automaticamente in altezza per ospitare il suo elemento "floatato" ma rimane praticamente invisibile mentre il "float" si ritrova sotto il suo contenitore.

JQUERY
Utilizziamo jQuery perchè è veloce e facile da utilizzare, fa un gran lavoro utilizzando poche righe di codice.

counter.js

$(document).ready(function(){
						   
	$('#inputField').bind("blur focus keydown keypress keyup", function(){recount();});

});


function recount()
{
	var maxlen=140;
	var current = maxlen-$('#inputField').val().length;
	$('.counter').html(current);
	
		
	if(current<0 || current==maxlen)
	{
		$('.counter').css('color','#D40D12');
	}

	
	if(current<10)
		$('.counter').css('color','#D40D12');
	
	else if(current<20)
		$('.counter').css('color','#5C0002');

	else
		$('.counter').css('color','#cccccc');
	
}

Per prima cosa la appena la pagina viene caricata esegue la funzione indicata nella prima riga.
Essa fa in modo che all'attivazione del nostro campo di input textarea, parta il conteggio dei caratteri.
Le modalità del conteggio sono impostate nella funzione recount().
Essa fa in modo di sostituire il nostro primo valore inserito all'interno del tag span del form con l'esatto numero di caratteri rimanenti.
La variabile maxlen setta il numero di caratteri massimi utilizzabili (in questo caso 140 come in Twitter) e nelle successive due righe (11 e 12) calcola il numero di caratteri residui.
Nelle successive righe viene impostato il colore del font man mano che ci si avvicina al valore massimo di caratteri utilizzabile.


CONCLUSIONE

Abbiamo utilizzato PHP, XHTML, CSS e JQuery per creare un counter stile Twitter.
E' possibile estendere le sue funzionalità creando un bottone per l'inserimento dell'input ed utilizzare il tutto come campo all'interno di un form di raccolta dati, un sistema di commenti e simili.

Demo
Download

Condividi

0 Commenti