Ho pensato di utilizzare il metodo animate() di jQuery per realizzare un sistema di votazione semplice ma bello da vedere.

L’idea è quella di animare un div espandendolo ad ogni voto ricevuto, tramite la funzione animate, aggiungendo un stesso valore alla proprietà di lunghezza del div stesso.

Documento html

<div id="container">
    <span id="question">Quale di questi framework PHP utilizzi?</span>
    <div><span>0</span><a href="">Vota</a>Zend Framework</div>
    <div><span>0</span><a href="">Vota</a>Symfony</div>
    <div><span>0</span><a href="">Vota</a>CakePHP</div>
    <div><span>0</span><a href="">Vota</a>CodeIgniter</div>
    <div><span>0</span><a href="">Vota</a>Kohana</div>
    <div><span>0</span><a href="">Vota</a>YII framework</div>
</div>

Foglio di stile CSS

* {
  font-family: Arial, "Free Sans";
}
body {
  margin: 0;
  padding: 0;
}
#container {
  margin-top: 20px;
  color: #fff;
}
#container #question {
  display: block;
  padding: 20px;
  font-weight: bold;
  letter-spacing: -3px;
  margin-bottom: 20px;
  padding: 10px;
  font-size: 40px;
  color: #333;
}
#container div {
  font-weight: bold;
  letter-spacing: -3px;
  background: #c00;
  margin-bottom: 15px;
  padding: 10px;
  font-size: 34px;
  color: #ffffff;
  border-left: 20px solid #333;
  width: 400px;
}
#container div a {
  border: 1px solid #40392C;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-decoration: none;
  color: #0BBFEC;
  padding: 5px 15px;
  background: #2F2F2F;
  margin: 0 20px;
}
#container div a:hover {
  color: #fff;
}

Effetti con jQuery

Non dimentichiamoci di includere la libreria jQuery nell’intestazione head del documento, poi colleghiamo lo script che permette l’animazione:

$(document).ready(function() {
  $("#container div a").click(function() {
    $(this).parent("div").animate({ width: '+=30px' }, 500);
    $(this).prev("span").html(parseInt($(this).prev().html()) + 1);
    return false;
  });
});

Come potete vedere è tutto molto semplice

Associamo una funzione all’evento click sul numero di voti: prendiamo il nodo/oggetto padre del link e sudi esso chiamiamo il metodo animate che genera l’animazione di allungamento in un tempo di 500 millisecondi, dunque incrementiamo il numero di voti.

Demo Download

Per chi cerca una soluzione facile per iniziare a giocare – dipingere – con i Canvas, elemento del nuovo standard HTML5, jCanvas è un plugin jQuery che ne semplifica l’uso attraverso l’utilizzo dei metodi offerti.

E’ possibile definire la dimensione dell’elemento Canvas, le coordinate (X,Y) da cui partirà il disegno.
Molte delle forme sono già pronte, come rettangoli, ellissi o archi, definite come oggetti, e molti metodi definiti per l’utilizzo delle immagini e dei testi.
Per lo stile, tutto è reso più semplice, sfumature o pattern, i colori possono essere indicati con i nomi, in HEX, RGB o RGBA.

Il plugin è in via di miglioramento e nuove funzionalità sono aggiunte di continuo.
La pagina dedicata offre un’ottima documentazione da cui partire per iniziare nel migliore dei modi ad avvicinarsi agli elementi del nuovo linguaggio di markup HTML5.

Ecco come disegnare gli oggetti presenti dell’immagine postata all’inizio di questo articolo:

$("canvas.test").drawRect({
  fillStyle: "#000",
  x: 50, y: 50,
  width: 200,
  height: 100,
  fromCenter: false
});
$('canvas.test')
.drawArc({
fillStyle: '#729fcf',
x: 70, y: 70,
radius: 50
});

Dopo aver ricevuto abbastanza e-mail e feedback in generale riguardo ad alcune richieste di modifiche, ho deciso di sviluppare una seconda versione del menu verticale con effetto a fisarmonica sperando di soddisfare la maggior parte degli utenti.

In questa seconda versione del tutorial aggiungiamo la possibilità di aprire l’elenco a tendina tramite un secondo bottone così da rimanere al link della voce del menu principale la sua funzione predefinita.

Documento HTML

Quello che andiamo a cambiare alla nostra pagina HTML è l’aggiunta di una freccia down che avrà la funzione di avviare l’effetto a fisarmonica per visualizzare le voci del sotto menu:

<li class="menu"> <!-- costituisce ogni sezione del menu principale -->
  <ul>
    <!-- titolo della sezione che fa aprire il sotto menu -->
    <li class="title">
		<a href="http://www.mainickweb.com/category/firefox/">Categoria Firefox</a>
		<img src="bullet_arrow_down.png" />
	</li>
    <li class="sub-menu sub-menu-open">
      <ul>
        <li><a href="http://www.mainickweb.com/hack-css-per-firefox-opera-safari-e-internet-explorer/">Articolo 1</a></li>
        <li><a href="http://www.mainickweb.com/firefox-3-le-caratteristiche/">Articolo 2</a></li>
      </ul>
    </li>
  </ul>
</li>

Aggiungiamo un’altra classe CSS sub-menu-open all’elenco del sotto menu per indicare quale di default è aperto inizialmente al caricamento della pagina.

Foglio di stile CSS

Abbiamo modificato le proprietà di alcuni selettori per utilizzare la freccia come bottone di apertura, aggiunta la classe per il sotto menu aperto di default e aggiunto il cursore di tipo puntatore quando andiamo sopra all’immagine:

ul {
	margin: 0;
	padding: 0;
}

ul.container {
	width: 240px;
	margin: 0 auto;
	padding: 50px;
}

li {
	list-style: none;
	text-align: left;
}

li.menu {
	/* Voci dell'elenco principale */
	width: 100%;
	padding: 5px 0;
}

li.title {
	display: block;
	position: relative;
	width: 200px;
	height: 34px;
	padding: 10px 20px 0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	background-color: #cc0000;
}

li.title:hover {
	background-color: #f40000;
}

li.title a {
	/* Voce del menu principale */
	color: #ffffff;
	font-family: BPreplay,Arial,Helvetica,sans-serif;
	font-size: 21px;
	overflow: hidden;
}

li.title a:hover {
	text-decoration: none;
}

li.title a span {
	/* Questo span agisce come parte finale della sezione title */
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 44px;
}

li.title img {
	/* freccia apertura sotto menu */
	float: right;
	cursor: pointer;
}

.sub-menu {
	/* Sotto menu */
	display: none;
	width: 100%;
	padding-top: 5px;
}

.sub-menu li {
	/* Voci del sotto menu */
	margin: 5px 0;
	padding: 4px 18px;
	border: 1px solid #40392c;
	background-color: #2F2F2F;
	color: #cccccc;
}

.sub-menu-open {
	display: block;
}

Effetti con jQuery

Gli script che andremo ad includere nella pagina sono gli stessi, ma bisogna dare uno sguardo allo script che gestisce l’effetto per vedere le modifiche apportate:

$(document).ready(function(){

	/* Cambiare l'effetto da utilizzare */
	$.easing.def = "easeOutBounce";

	/* Associare una funzione all'evento click sul link */
	$('li.title img').click(function(e){

		/* Trovare l'elenco a discesa che corrisponde al menu cliccato: */
		var subMenu = $(this).parent().next();

		/* Trovare il sotto menu che corrisponde alla voce cliccata */
		$('.sub-menu').not(subMenu).slideUp('slow');
		subMenu.stop(false,true).slideToggle('slow');

		/* Prevenire l'evento predefinito (che sarebbe di seguire il collegamento) */
		e.preventDefault();
	})

});

L’unica modifica effettuata riguarda il selettore su cui catturiamo l’evento click per aprire il corrispondente sotto menu.

Versione History

Ho deciso di chiamare questo secondo tutorial in questo modo perché un’altra importante richiesta ricevuta è quella di mantenere il sotto menu aperto nella pagina raggiunta da un link di uno dei sotto menu.

<?php $array_label_menu = array('jquery' => '', 'php' => '', 'css' => '', 'firefox' => '') ?>
<?php $submenu_open = (isset($_GET['menu']) &amp;&amp; $_GET['menu']!='') ? $_GET['menu'] : 'php'; ?>
<?php $array_label_menu[$submenu_open] = 'sub-menu-open'; ?>

Utilizzando un array indichiamo come chiavi di valori nulli le parole che specificano la nostra voce del menu principale e utilizzando una valore che ci inviamo tramite l’array globale $_GET andiamo a inserire la classe CSS sub-menu-open come valore alla chiave corrispondete al $_GET['menu'] inviato.

Adesso vediamo come si modifica la parte riguardo al menu:

<li class="menu"> <!-- costituisce ogni sezione del menu principale -->
  <ul>
    <!-- titolo della sezione che fa aprire il sotto menu -->
    <li class="title">
		<a href="http://www.mainickweb.com/category/firefox/?menu=firefox">Categoria Firefox</a>
		<img src="bullet_arrow_down.png" />
	</li>
    <li class="sub-menu <?php echo $array_label_menu['firefox'] ?>">
      <ul>
        <li><a href="http://www.mainickweb.com/hack-css-per-firefox-opera-safari-e-internet-explorer/?menu=firefox">Articolo 1</a></li>
        <li><a href="http://www.mainickweb.com/firefox-3-le-caratteristiche/?menu=firefox">Articolo 2</a></li>
      </ul>
    </li>
  </ul>
</li>

Demo Download

ZEN è HTML5 Audio Player, un lettore audio realizzato con HTML5 e le animazioni di CSS3, alimentato da jPlayer.

Si presenta con un’interfaccia molto semplificata, stile anteprima di iTunes, con pulsante di riproduzione, che si trasforma in pausa una volta cliccato, visualizzato in un cerchio che mostra il progresso del brano ascoltato.

Al momento è sviluppato in modo da eseguire un singolo brano, ma sarà migliorato per supportare anche più file.

Rilasciata la nuova versione jQuery 1.5, con un articolo il team annuncia la nuova release ufficiale della libreria javascript più utilizzata.

83 bug risolti e un totale di 460 tickets chiusi, con i 4.437 test aumentata al compatibilità nei browser, compreso il criticato IE6:

• Safari dalla 3.1.2 alla 5.0.3
• Opera dalla 9.64 alla 11.01
• IE 6 – 7 – 8
• Firefox dalla 2 alla 4.0b9
• Chrome dalla 8 alla 10 per i developer

Il più grande cambiamento in questa versione è la completa riscrittura del modulo Ajax. Ora una chiamata a jQuery.ajax (o jQuery.post, jQuery.get, etc) restituisce un oggetto jXHR che fornisce consistenza all’oggetto XMLHttpRequest con tutte le proprietà, metodi e comportamenti dell’oggetto secondo lo standard:

• readyState
• status
• statusText
• responseXML o responseText quando la richiesta risponde con XML o semplice testo
• setRequestHeader(name, value) che non sostituisce il valore precedente con quello nuovo, piuttosto concatena il nuovo al vecchio
• getAllResponseHeaders()
• getResponseHeader()
• abort()

In questa release sono state migliorate anche le prestazioni di alcuni metodi come .children(), .prev() e .next(), molto evidente nei browser che utilizzano il motore di WebKit.

Zoomy è un plugin jQuery molto semplice da implementare che permette di effettuare l’effetto zoom sulle immagine del nostro sito web.

Per funzionare, oltre alle miniature, Zoomy richiede un formato più grande delle stesse immagini per visualizzare la parte ingrandita nell’effetto zoom.

Poche le opzioni del plugin che possiamo inizializzare per modificare l’aspetto e la fruibilità: dimensione dello zoom, angolo arrotondati dell’effetto lente e se l’immagine può essere cliccabile o meno, in modo da utilizzare Zoomy in combinazione con un plugin lightbox.

Il funzionamento è un concetto semplice. Zoomy aggiunge solo due oggetti al documento, uno che contiene l’immagine ingrandita e un altro opzionale per l’effetto sfondo sfumato con CSS3. Un caricatore visualizzato durante l’attesa per lo zoom dell’immagine.

Come dicevo all’inizio dell’articolo, è molto semplice farlo funzionare. Bisogna collegare alla nostra pagina HTML, oltre alla libreria jQuery, il plugin e il suo foglio di stile. Aggiungere il frammento di codice per avviare e inizializzare Zoomy e, per applicare l’effetto zoom ad un immagine del documento, includere il tag immagine, della miniatura, all’interno di un link con collegamento all’immagine ingrandita:
[/html]

Per la visualizzazione degli esempi e il download di Zoomy, è presente la pagina dedicata al plugin.

Se state cercando uno script lightbox che è in grado di gestire gli iFrame, contenuti provenienti dal server tramite chiamate Ajax, contenuti HTML in linea, immagini, video e altro ancora, NyroModal è un ottimo plugin jQuery che permette tutto ciò.

Negli ultimi giorni mi sono trovato nella posizione di aver bisogno di un semplice, funzionale, plugin lightbox per jQuery facile da usare, una valida alternativa a Facebox. Dopo qualche ricerca, ho trovato diversi plugin sviluppati per questo scopo, e tutti hanno i loro pro e contro. Molti dei plugin supportano solo immagini, non utili alla mia richiesta di inserire contenuti in linea, video Flash e contenuto proveniente da chiamate Ajax.

Finalmente ho trovato e provato NyroModal e sono rimasto molto impressionato. Semplice da utilizzare, fondamentalmente tutto quello che dovremo fare è includere i file CSS e JavaScript appropriati, quindi applicare una classe di nyroModal agli elementi che si desidera aprire nel lightbox.

NyroModal è altamente personalizzabile, è possibile cambiare il suo aspetto grafico utilizzando i CSS, modificare le animazioni utilizzando le funzioni jQuery e personalizzare la sua funzionalità attraverso varie funzioni e proprietà.

Per impostazione predefinita, qualsiasi finestra modale (con eccezione dei file SWF) si ridimensiona automaticamente in base alla dimensione corrente della finestra del browser. Se l’utente ridimensiona il suo browser, anche la finestra modale si ridimensiona fino alla dimensione massima del contenuto.

NyroModal permette di impostare una galleria di contenuti con estrema facilità, semplicemente assegnando un identico valore all’attributo rel da attribuire a ciascuna voce della galleria: è anche possibile implementare gallerie multiple sulla stessa pagina utilizzando diversi attributi rel a cui applicare diverse impostazioni del plugin.

Un’altra funzionalità supportata, quella di effettuare l’upload di file tramite Ajax e gestire le informazioni del file ricevute, semplicemente associando la classe nyroModal al tag form del modulo.

Caratteristiche

• Chiamate Ajax
• Chiamata Ajax con targeting del contenuto
• Immagine singola
• Galleria immagini con freccie di navigazione
• Galleria con ogni tipo di contenuto
• Form
• Form in iFrame
• Form con targeting del contenuto
• Form con upload di file
• Dom Element
• IFrame
• Gestione degli errori
• Finestra modale ridimensionata in base alle dimensioni della finestra del browser
• Bottone ESC da tastiera per chiudere il lightbox
• Animazioni personalizzabili
• Aspetto personalizzabile
• Titolo alla finestra modale
• Standard W3C HTML valido (transitional)

NyroModal è disponibile per il download sotto licenza MIT. Potete trovare ulteriori informazioni, demo e download sul sito web del progetto NyroModal.

jTwitter è un semplice plugin jQuery che ci fornisce un facile accesso alle Twitter API per prelevare informazioni su uno specifico utente di twitter tramite il suo nome utente.

Il risultato della consultazione delle Twitter API è un oggetto JSON costituito dai dettagli dell’utente, quali nome completo, URL homepage, conteggi vari come seguaci, amici, favoriti, numero stati (tweets), localizzazione, etc.

Utilizzo

Per prima cosa nell’intestazione head della nostra pagina HTML dobbiamo richiamare la libreria jQuery (dai server di Google), includere il plugin e poi scrivere il seguente script JavaScript per utilizzare le funzionalità del plugin:

$.jTwitter('nome_utente_twitter', num_tweet, function(tweets){
  // funzione richiamata per l'utilizzo delle info ricevute
});

E’ possibile specificare il nome utente twitter di cui si richiedano le informazioni e gli ultimi stati, e opzionalmente il numero di ultimi tweets postati dall’utente, se non specificato verranno prelevati gli ultimi 5 stati. Infine la funzione in cui gestire e manipolare le informazioni ricevute sotto forma di oggeto JSON

Ecco un mio piccolo esempio:

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.jtwitter.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      // Ottiene gli ultimi 10 stati dal mio account
      $.jTwitter('mainick', 10, function(tweets){
        $('#tweets').empty();
        $.each(data, function(i, tweet){
          $('#tweets').append(
            '<div class="tweet">'
            +' <div class="testo">'
            +    tweet.text
            +' </div>'
            +'</div>'
          );
        });
      });
    });
  </script>
</head>
<body>
  <h1>Tweet by MaiNick</h1>
  <div id="tweets">Attendere...</div>
</body>
</html>

SliderNav è un plugin per jQuery che permette di scorrere una lista dinamica mediante una barra di navigazione verticale, costituita da indici. L’autore prende ispirazione dalla rabrica telefonica dell’iPhone, infatti è realizzato principalmente per un elenco alfabetico, ad esempio una rubrica di contatti, ma può essere utilizzato per qualsiasi cosa.

Il plugin aggiunge automaticamente la barra di navigazione e imposta l’altezza per la lista in base a quanto è alta la barra. E’ possibile scorrere il contenuto della lista utilizzando la rotellina del mouse.

Utilizzo

SliderNav è semplice da far funzionare, ma prima nell’intestazione head della nostra pagina HTML dobbiamo richiamare la libreria jQuery (dai server di Google), includere il plugin e il foglio di stile CSS associato:

<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="slidernav.js"></script>

Aggiungiamo il codice HTML che crea la nostra lista di contatti utilizzando la struttura seguente:

<div id="slider">
  <div class="slider-content">
    <ul>
      <li id="a"><a name="a" class="title">A</a>
        <ul>
          <li><a href="/">Adam</a></li>
          <li><a href="/">Alex</a></li>
          <li><a href="/">Ali</a></li>
          <li><a href="/">Apple</a></li>
          <li><a href="/">Arthur</a></li>
          <li><a href="/">Ashley</a></li>
        </ul>
      </li>
      <li id="b"><a name="b" class="title">B</a>
        <ul>
          <li><a href="/">Barry</a></li>
          <li><a href="/">Becky</a></li>
          <li><a href="/">Biff</a></li>
          <li><a href="/">Billy</a></li>
          <li><a href="/">Bozarking</a></li>
          <li><a href="/">Bryan</a></li>
        </ul>
      </li>
      etc...
    </ul>
  </div>
</div>

Una volta impostato l’intera lista, è semplicemente una questione di chiamare la funzione sliderNav sull’elemento che abbiamo appena creato:

<script type="text/javascript">
$(document).ready(function(){
  $('#slider').sliderNav();
});

il codice sopra è da scrivere nell’intestazione head della nostra pagina HTML, dopo aver richiamato il plugin.

Opzioni

E’ possibile inizializzare il plugin modificando le impostazioni predefinite in base alle proprie esigenze:

• height: impostare questo valore in pixel se si vuole evitare il rilevamento automatico basato sull’altezza della barra di navigazione verticale.
• items: per default il plugin genera la navigazione in ordine alfabetico utilizzando tutte le 26 lettere dell’alfabeto inglese, ma è possibile inizializzarlo utilizzando delle voci personalizzate.
• arrows: il plugin visualizza delle frecce di scorrimento sulla lista, utili per gli utenti che non dispongono di un mouse con rotellina; i valori possibili di tipo booleano sono true (visualizza) o false (nasconde).

Ecco il codice per inizializzare il plugin, da sostituire a quello semplice:

<script type="text/javascript"
$(document).ready(function(){
  $('#slider').sliderNav({
    items: ['voce1','voce2','voce3'],
    height: '200',
    arrows: false
  });
});
</script>

Conclusioni

SliderNav, come ci consiglia lo stesso autore, può tornare utile principalmente quando vogliamo mostrare molte informazioni in un piccolo box organizzate con un ordine alfabetico (o per data).
Sulla pagina dedicata al plugin SliderNav è possibile scaricare il codice, visualizzare la demo e ottenere ulteriori aggiornamenti.

Cloud Zoom è un plugin jQuery, di peso leggero, che permette di creare un effetto zoom sulle immagini nelle vostre pagine web. E’ altamente personalizzabile con diverse caratteristiche come l’effetto tinta, zoom interno o un sottile effetto di focus, e soprattutto è cross-browser, funziona in tutti i browser web più importanti tra cui il caro vecchio IE6.

Cloud Zoom è molto semplice da implementare, il sito del progetto non manca di una ricca documentazione. Si può facilmente personalizzare l’aspetto con una gallery, lente o finestra di zoom usando i CSS.
Offre diverse opzioni di configurazione che consentono di personalizzare il suo comportamento, tra cui: altezza, larghezza e posizione della finestra di zoom, tinta da applicare sulla parte di immagine non zoommata, opacità, dimensione porzione della parte da zoommare, abilitare o disabilitare i titoli.

Caratteristiche

Riassumento, le caratteristiche che rendono questo plugin davvero ottimo sono:

• Facile integrazione con HTML
• Peso leggero (nella versione compressa solo 6Kb)
• Movimento nello zoom precisi e morbidi
• Modalità gallery
• Effetti tinta, zoom interno o soft-focus
• Completamente accessibile senza JavaScript, CSS o browser testuali

Cloud Zoom è disponibile per il download sotto licenza MIT, per ulteriori informazioni, demo e download fare riferimento al sito del progetto di Cloud Zoom.