Un “problema” delle transizioni CSS3 è il fatto che sono legate ai cambiamenti di stato, e nonostante nel linguaggio CSS ne esistono vari, spesso il più utilizzato è :hover ovvero quello responsabile di gestire il passaggio del mouse su un particolare elemento (esiste un CSS Tip a riguardo)… una favolosa interazione che è completamente inutile sui dispositivi touch! 

Ma non disperate non è ancora tutto perduto perché Javascript è qui per darci una mano, possiamo tranquillamente utilizzare eventi Javascript (uno a caso… il click!) per far scaturire queste transizioni senza neanche troppa fatica.

Tenete pronto jQuery, anche se non è strettamente necessario, ci farà comodo per accedere velocemente agli eventi e alle classi CSS.

Guardate il file di prova Le basi delle transizioni CSS3

1. Preparare il file

Creiamo un nuovo file Html vuoto nel quale creiamo un elemento “cavia”. Un div, un button… quello che più vi piace, assegnategli un id così sarà più facile selezionarlo dopo.

<div id="elemento"></div>

Tramite Css dategli un colore di sfondo e delle dimensioni, giusto per creare un elemento di test, tipo 150×150 pixel con sfondo azzurro.

2. Creare le regole necessarie

Nella regola che definisce questo elemento dovremo anche inserire la proprietà “transition” (con il prefisso per Webkit) che dirà al browser di eseguire un’interpolazione quando rileva un cambiamento di proprietà sull’elemento:

#elemento{
  -webkit-transition: all 0.5s ease;
}

Visto che è un oggetto a posizionamento statico useremo  i margini per muoverlo, creiamo una classe che rappresenti lo stato finale della nostra animazione, dandogli un bel margin-left abbondante lo faremo muovere verso destra:

.spostamento{
  margin-left: 400px;
}

E per adesso non assegnatela a nessun elemento,

3. jQuery mette e toglie

Ora è il turno di jQuery! Dopo averlo incorporato dovremo dirgli che al click sul nostro id elemento dovrà fare qualcosa… alternare l’assegnazione e la rimozione di una classe, magari quella creata poco fa, sull’elemento corrente

$("#elemento").click(function(){
  $(this).toggleClass("spostamento");
});

Quindi:

1. si clicca sull’elemento
2. jQuery assegna la classe a quest’ultimo
3. la proprietà “transform” rileva un cambiamento di proprietà e il browser esegue la transizione
4. si clicca di nuovo e jQuery toglie la classe, altro cambiamento e la transizione va al contrario
5. e via così…

4. Opzionale – versione senza jQuery

Per chi vuole smanettare un pò di più con Javascript allo stato puro, il codice per fare (quasi tutto) quello ricreato poco fa:

var elemento = document.querySelector("#elemento");

elemento.addEventListener("click",cambia,false);

function cambia(){
  this.className += " sposta";
  this.removeEventListener("click",cambia,false);
}

Descrivendo le righe qui sopra:

1. Accedo all’oggetto con id elemento e lo memorizzo in una variabile Javascript
2. Aggiungo un event listener per dirgli di richiamare la funzione cambia al click
3. Nella funzione cambia: aggiungo la classe sposta all’elemento corrente
4. Nella funzione cambia: rimuovo l’event listener per evitare che continui ad aggiungere la stessa classe

Rimuovere la classe dall’elemento e alternare l’assegna/rimuovi è un po più complesso e va un po fuori l’argomento di questo breve tutorial… e poi ragazzi le librerie Javascript come jQuery esistono proprio per questo .

5. Dateci dentro!

A questo punto direi che è giunto il vostro momento di provare, testare e smanettare. Magari anche con eventi diversi dal click, jQuery UI mette a disposizione anche il trascinamento (drag)!

Ricordatevi che potete riprovare la demo e scaricare un file già completo e funzionante tornando verso l’inizio dell’articolo.

In questo breve tutorial vi mostrerò (qui una demo) come utilizzare questo plugin e alcune, ma non tutte, delle sue funzionalità e particolarità. Quindi basta chiacchiere, andate a scaricare il plugin e via con il codice!

Software richiesto

Code editor di vostra fiducia, stando sull’open source recentemente ho “abbandonato” Aptana in favore di Komodo Edit, dategli un occhio non è male!

Prerequisiti

Conoscenze basilari di jQuery, attenzione che Booklet dipende dai plugin Easing e jQuery UI!

Argomenti trattati

Inclusione e utilizzo del plugin jQuery Booklet

1. Inclusione del plugin e occhio alle dipendenze!

Dovremo copiare nella cartella del nostro progetto tutta la cartella presente nell’archivio zip scaricato dal sito del plugin che sono: vari Javascript, un Css e una cartella con alcune immagini.

Oltre ad includere jQuery e il file del plugin, dovremo aggiungere altri 2 plugin che fanno da “base” per il nostro libro sfogliabile: jQuery UI e Easing. Visto che sono tutti plugin di jQuery le dipendenze dovranno stare dopo l’inclusione della libreria e prima del plugin Booklet, quindi (mantenendo la buona pratica di includere i file Javascript dopo il tag body) l’elenco delle nostre inclusioni sarà il seguente:

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

<script type="text/javascript" src="booklet/jquery-ui-1.8.9.custom.min.js" ></script>

<script type="text/javascript" src="booklet/jquery.easing.1.3.js" ></script>

<script type="text/javascript" src="booklet/jquery.booklet.1.2.0.min.js" ></script>

<script type="text/javascript" >

// Qui il nostro codice

</script>

Ho optato per la versione minificata (.min) di Booklet per il minor peso, ma se vogliamo studiarci il codice al suo interno dovremo aprire la versione normale. L’ordine di jQuery UI e Easing è indifferente, l’importante è come ho detto prima che stiano dopo jQuery ma prima di Booklet. Infine c’è un tag Javascript dove scriveremo il codice per attivare il plugin, ricordo che se volete potete anche scrivere in un file esterno e importare anche quello, ma sempre alla fine in quanto sarà codice che dipende da Booklet, che a sua volta dipende da tutti gli altri…

Non dimentichiamoci di includere anche il file .css di Booklet nella head del nostro documento!

<link href="booklet/jquery.booklet.1.2.0.css" type="text/css" rel="stylesheet" >

Lo so… è un po di roba, ma serve tutta a farci risparmiare tempo!

2. Anatomia del codice Html necessario

Come molti plugin evoluti di jQuery anche Booklet ha bisogno di una struttura Html definita per funzionare, quindi non possiamo strutturare i nostri contenuti liberamente ma dobbiamo seguire una piccola regola che è questa:

<div id="mioLibro">

<div class="b-load">

<div><!-- pagina 1 --></div>

<div><!-- pagina 2 --></div>

<div><!-- pagina 3 --></div>

</div>

</div>

Prima di tutto c’è un div contenitore che serve principalmente da identificatore del libro, quindi gli diamo semplicemente un ID a nostra scelta. Al suo interno un altro div con una classe “b-load”, questo sarà l’elemento che farà compiere al plugin la sua magia, quindi è importante che ci sia e che abbia esattamente questa classe assegnata! Infine all’interno di questo “b-load” ogni div inserito (con o senza id e classi, dipende cosa dovete fare voi) rappresenterà una pagina, in questo esempio di codice li ho lasciati vuoti, idealmente dovrebbero esserci all’interno di ognuno i vari contenuti: titoli, paragrafi, immagini, ec…

3. Diamo vita al libro!

A questo punto, dopo un setup non proprio brevissimo, siamo pronti a far partire il tutto, spostiamoci all’interno dell’ultimo tag script (o del vostro file esterno) e scriviamo questa semplice riga di codice:

$("#mioLibro").booklet();

Questa direi che è stata facile, abbiamo solo selezionato il div principale tramite id con jQuery e abbiamo usato la funzione .booklet() per avviare il tutto. Volete customizzare un po il libro? Mano ai Css e alle opzioni del plugin!

4. Qualche opzione…

Sul sito trovate anche le opzioni del plugin per regolare alcune funzionalità come altezza, larghezza, velocità delle animazioni, aggiunta di tabs o frecce per una navigazione alternativa, alcuni esempi:

$("#mioLibro").booklet({

  width: 600,  // setto la larghezza

  arrows: true,  // attivo le frecce di navigazione

  pagePadding: 20,  // imposto un padding per le pagine

  speeed: 1500,  // durata delle transizioni di pagina

});

Volendo potreste creare dei vostri pulsanti e tramite queste funzioni gestire la navigazione del libro:

$("#mioLibro").booklet("prev");  // pagina precedente

$("#mioLibro").booklet("next");  // pagina succcessiva

$("#mioLibro").booklet(4);  // pagina 5

Attenzione che l’ultimo comando parte da 0, quindi “4″ è riferito alla quinta pagina!

5. Funziona su iPad (e mobile in generale)?

Ho provato questo plugin su un iPad 2 e un HTC Desire e la brutta notizia è che essendo un plugin che si basa molto sulle interazioni con il mouse in ambito touch/mobile da scarsi risultati. Visto che comunque c’è la possibilità di creare dei pulsanti di navigazione delle pagine vi consiglio fortemente di farli se il vostro obiettivo principale sono i tablet e simili.

6. Considerazioni finali

Vi suggerisco di preparare prima in Photoshop (o qualunque sia il vostro editor di immagini preferito) le immagini e le foto da inserire nel libro delle dimensioni che vi servono, tanto ricordatevi che decidete voi la grandezza del tutto!

Usate Firebug o simili per scovare i nomi degli elementi generati dal plugin Booklet per poterli stilare in Css.

Potete scaricarvi i file dell’esempio jQuery Booklet Tutorial   da controllarvi con comodo.

Visto che è una feature molto richiesta (da quello che ho notato nei commenti del precedente post) vi avviso subito che anche in questa soluzione non vi è possibilità di zoomare le pagine.

Il file è molto piccolo ed è scaricabile da qui: Step Debug plugin  .

Questo plugin è un piccolo strumento per velocizzare la ricerca degli errori nel codice e si basa sulla console del browser (su Chrome, IE e Safari è accessibile dal menù di sviluppo, mentre su Firefox e Opera bisogna installare delle estensioni), non è niente che non si potrebbe fare senza, ma come dicevo poco fa velocizza un pochino la cosa, semplicemente una volta incorporato mette a disposizione alcuni nuovi comandi:

$.log("messaggio");

Questo fa semplicemente da abbreviazione rispetto al classico “console.log(blablabla)”, giusto per snellire .

$.step();

Ogni volta che viene ripetuto questo comando nella console apparirà il comando “Step” più il numero di volte che è stato ripetuto, posizionandolo in più parti del codice potremmo verificare che ogni passaggio (step) venga compiuto e si dovrebbe essere in grado di individuare le linee che danno problemi.

$.resetSteps();

Un po’ come dice il nome, questo comando resetta il conteggio dei passaggi, può essere utile se vi servono più conteggi nello stesso file.

Ovviamente consiglio di includere questo plugin solo in fase di sviluppo delle pagine, dato che a sito completato e pubblicato non offre nessuna funzionalità.

Modulo Ajax completamente riscritto

Il cambiamento più grande di questa nuova release sta nella funzione di più basso livello del framework per lavorare con Ajax, leggero cambio di sintassi, nuove funzionalità e perfomance migliorate… tutto aggiunto alla nuova documentazione di questa funzione!

Migliorate perfomance nelle funzioni di traversing

Le funzioni per “attraversare” il codice come .children() , .next() e .prev() vedono un drastico aumento nella velocità di esecuzione in quasi tutti i browser.

.()fadeIn ora funziona anche sugli elementi con “display:inline”

Risolto questo piccolo e a volte veramente fastidioso bug che impediva di usare gli effetti di fade (dissolvenza) sugli elementi con la visualizzazione inline, permettendoci cosi di lavorare con tutti gli elementi indipendentemente dallo stato di questa proprietà.

Mai usato jQuery e vuoi imparare?

Nella sezione tutorial di questo sito puoi trovare tutorial di base per cominciare a smanettare con questa favolosa libreria, mentre se fai un salto su jQuery Italia puoi trovare tanti articoli più approfonditi e recensioni di plugin per ottenere sempre il massimo. Sei dalle parti di Milano e preferisci spiegazioni in classe? prova a vedere se il corso a Mohole di Web Master Avanzato (dove si tratta jQuery) fa per te!

Questa volta nella raccolta ho incluso anche dei libri (disponibili sia in pdf scaricabile che in cartaceo), in italiano ancora non ce ne sono!

Come al solito se volete segnalare altri siti, libri o plugin da aggiungere a questa lista siete liberi di farlo nei commenti!

Ci rivediamo in fondo a questo post con un’ultima notizia molto interessante…

Risorse ufficiali

jQuery official – Dove trovate la libreria, i tutorial di base, la community, il blog di sviluppo.

Documentazione – Tutto quello che volete sapere su cosa può fare jQuery, le sue funzioni e come applicarle è scritto qui!

jQuery UI – Un’estensione ufficiale di jQuery che aggiunge nuove animazioni, interazioni e molti widget comuni come tabs, finestre di avviso pannelli comprimibili.

Siti di tutorial

jQuery Italia – La più grande community nostrana!

Learning jQuery – Il sito numero 1 per chi vuole buttarsi su jQuery in fai-da-te.

CSS Tricks – Il blog di Chris Coiyer ha molti articoli su jQuery e Css!

jQuery 4 Designers – Un sito di tutorial di jQuery dedicato ai designers, tutorial spiegati dall’inizio alla fine con testi, immagini, video, codice e spiegazioni dettagliate.

Net Tuts+ – Il blog di tutorial web della Envato ha una bella sezione dedicata a Javascript e librerie varie.

Script & Style – Un aggregatore di tutorial che vanno dal design allo sviluppo web.

Enterprise jQuery – Un sito di tutorial per jQuery dedicato questa volta agli sviluppatori

Plugin (utili e non!)

Lightbox – Per realizzare gallrie di immagini con popup, il “primo amore” del suo genere!

Corners – Per angoli arrotondati e non solo cross-browser.

EasyTooltip – Per creare dei suggerimenti animati al passaggio del mouse.

Fancybox – Una lightbox evoluta e un po più accattivante.

EasySlider – Un carosello di immagini basilare ma versatile.

Nivo Slider – Come il precendente ma con effetti evoluti.

Plugin directory - L’archivio principale per trovare plugin di jQuery.

Libri

Novice to ninja – Il bestseller di Sitepoint sull’argomento.

jQuery Enlightenment – Una pietra miliare dei libri su jQuery, consigliato dallo stesso team di sviluppo.

jQuery in action – Un classico nella sua 2° edizione.

… in chiusura

A livello personale penso che oggigiorno jQuery sia un must per ogni web designer, ecco perche l’ho fortemente incluso in 2 dei corsi che tengo presso Mohole. In più da poche settimane è stato annunciato dal team di sviluppo un’estensione ufficiale che permetterà di aggiungere funzionalità, eventi ed effetti pensati esclusivamente per il web mobile (quindi smartphones e tablet, un po come vi avevo “predetto” a luglio).

Datevi da fare e continuate a smanettare!

• Cos’è jQuery
• Funzioni anonime e non
• jQuery e i code editor

anche perche questi concetti sono alla base dei tutorial dei prossimi giorni…. quindi iniziamo!

Cos’è jQuery?

(re) introduciamolo velocemente:

jQuery è un framework (libreria di codice) per Javascript, il suo scopo è velocizzare e facilitare le operazioni più comuni in quel linguaggio. Cose tipo animazioni, caricamento di dati esterni, interazioni basilari e non che in precedenza venivano ottenuti con numerose righe di codice ora possono essere implementate in molto meno tempo (e codice), permettendo l’approccio di Javascript anche a chi finora ne era stato alla larga.

Possiamo scaricare la libreria dal sito ufficiale di jQuery, essendo una libreria open source è scaricabile gratuitamente. Inoltre la documentazione ufficiale, sorgenti e community di supporto sono liberamente consultabili dallo stesso sito. Le istruzioni su come scaricarlo e includerlo nel proprio sito le trovate sia sul sito ufficiale che nel mio primo tutorial su jQuery.

Funzioni anonime e funzioni “normali”

Quando lavoriamo con le funzioni in Javascript, abbiamo due scelte principali: possiamo dare un nome alla nostra funzione o lasciarla anonima. Ma cosa cambia tra le due soluzioni?

Immaginiamo che al click del mouse su un oggetto della nostra pagina debba accadere qualcosa, scrivendo entrambi i metodi possiamo notare le differenze:

// FUNZIONE ANONIMA

$("#oggetto").click(function(){
	// succede qualcosa...
});

// FUNZIONE REGOLARE (CON NOME)

$("#oggetto").click(miaFunzione);

function miaFunzione(){
	// succede qualcosa...
}

Quando scriviamo una funzione anonima questa viene scritta (ovviamente senza specificare un nome) direttamente dentro la parentesi dell’evento che la chiama, nel nostro caso un click del mouse su un oggetto.

PRO: più rapida da scrivere – CONTRO: la funzione non può essere riutilizzata, la sequenza delle parentesi aperte/chiuse può essere un po’ ostile all’inizio.

Mentre se lavoriamo con una funzione “normale” dentro la parentesi tonda dell’evento inseriamo il nome di una funzione che prima o dopo andremo a creare (idealmente sarebbe meglio prima della riga che richiama la funzione). Il vantaggio maggiore di questo metodo, oltre a essere la buona pratica, è che ora se ci fosse un “#oggetto2″ che al click deve richiamare la stessa “miaFunzione”… può farlo e noi non dovremmo riscrivere la funzione una seconda volta come invece capita con le funzioni anonime!

PRO: la scrittura del codice è più ordinata, la funzione può essere riutilizzata – CONTRO: è un po più lunga da scrivere del metodo precedente.

Questo era per fare chiarezza tra i due metodi, non c’è uno giusto e uno sbagliato entrambi i metodi mostrati nell’esempio portano allo stesso risultato, dipende da cosa dovete fare e che risultato volete ottenere.

Concatenamento

Il concatenamento indica la possibilità di “attaccare” vari metodi uno dopo l’altro senza dover richiamare più volte lo stesso selettore. Per intenderci se vogliamo nascondere un oggetto, aspettare un secondo e poi mostrarlo abbiamo due modi per farlo:

// Normale
$("#oggetto").hide();
$("#oggetto").delay(1000);
$("#oggetto").show(500);

// Concatenati
$("#oggetto").hide().delay(1000).show(500);

Posso integrare jQuery in un code editor?

Per jQuery basta un qualunque editor di codice, se vogliamo degli “aiutini” 4 dei principali code editor hanno delle soluzioni per integrare questa libreria nell’ambiente di sviluppo:

• Dreamweaver Cs 3/4/5 – Una lacuna del code editor più famoso del mondo è (l’attuale) mancanza di supporto per i framework Javascript, tuttavia grazie a questa estensione avremo a disposizione dal menu “inserisci” un nuovo pannello per inserire le funzioni più comuni di jQuery con un click!
• Aptana Studio – Una cosa bella del caro Aptana (oltre che è gratuito e multipiattaforma) è che supporta nativamente diverse librerie Javascript, i passaggi per attivare il suggerimento di codice con jQuery li trovate nella documentazione ufficiale.
• Coda – Il code editor low-cost e multi funzione per Mac ha anche lui un plugin che permette di integare suggerimenti di codice per jQuery.
• Visual Studio – Il big editor di Microsoft è stato il primo ad assimilare al suo interno jQuery, tramite il plugin jQuery Intellisense potrete sfruttare un buon code hinting in Visual Studio.

Fine prima giornata…

Finita la parte “teorica”… domani vediamo come applicare soluzioni basilari a delle pagine web Html per renderle interattive. Non mancate!

Se non avete mai usato le funzioni di animazione messe a disposizione da jQuery questo tutorial vi fornirà le basi per poterci smanettare!

Software richiesto

Code editor a scelta (Aptana, Coda, Dreamweaver, ecc..)

Prerequisiti

I due precedenti tutorial su jQuery (primo e secondo)

Argomenti trattati

Funzioni animate(), hide() e show() di jQuery, proprietà Css “display”.

1. Accendiamo jQuery

Per questo tutorial metto a disposizione un file di inizio e uno di fine in uno zip scaricabile Animazioni con jQuery . Nel file di inizio troverete una pagina Html basilare con alcuni elementi grafici gia inseriti che animeremo nel corso del tutorial.

Se invece volete utilizzare queste tecniche su una vostra pagina preesistente dovrete innanzitutto “installare” jQuery sulla vostra pagina, se non sapete come fare vi ricordo che ho già pubblicato un tutorial a riguardo.

2. I CSS di partenza

Una cosa bella di Javascript e jQuery è che “continuano” quello che abbiamo iniziato con i Css, quindi spesso potreste notare che per ottenere effetti interessanti è bene iniziare proprio da questo linguaggio. Se vogliamo mostrare qualcosa prima dobbiamo nasconderlo, se vogliamo fare entrare qualcosa prima dobbiamo mandarlo fuori:

 display: none /* Rende un oggetto non visibile */
 right: -100px /* Posizionamento "negativo" */

La proprietà “display” non va confusa con l’opacità, non rende solo trasparente un elemento ma fa in modo che non venga proprio elaborato visivamente, quindi gli elementi circostanti si comporteranno come se questo non ci fosse ; mentre usando dei valori negativi di posizione ad oggetti con posizionamento assoluto o fisso li mandiamo fuori dallo schermo senza cancellari, che è una grande cosa!

3. Animare

Ok ora passiamo allo script, all’interno della funzione principale scriviamo questa riga di codice:

// Il metodo animate()
$("#oggetto").animate({"right":"5px"},1000);

La funzione “animate” di jQuery l’avevamo già vista nel primo tutorial, ora la analizziamo un po più a fondo:

• per prima cosa passiamo una serie di proprietà Css con il rispettivo valore all’interno di una parentesi graffa
• per ogni cosa che vogliamo animare dobbiamo indicare prima la proprietà e il valore verso il quale deve l’interpolazione deve avere luogo (il punto di partenza sono gli attuali valori Css)
• se vogliamo animare più proprietà alla volta le separiamo con una virgola dentro la parentesi graffa, per esempio {“top”:”10px”,”right”:”15px”}
• dopo la parentesi graffa scriviamo una virgola e indichiamo la durata dell’interpolazione in millisecondi, quindi 1 secondo = 1000 millisecondi.

Con questa funzione e dei buoni Css iniziali potete ottenere gran parte delle animazioni più comuni!

4. Nascondi & Mostra

Adesso diamoci dentro con l’elemento che abbiamo nascosto all’inizio con “display:none”:

// Mostro l'elemento nascosto con i Css
$("#oggetto2").fadeIn();

come potete immaginare fadeIn() (le maiuscole sono importanti) è una funzione che esegue un effetto di dissolvenza in entrata, possiamo al contrario usare fadeOut() per fare una dissolvenza in uscita. Nella stessa famiglia ci sono anche le funzioni slideUp() e slideDown() che invece eseguono un’animazione a tendina (il primo nasconde e il secondo mostra), mentre i metodi più generici show() e hide() eseguono fade e slide in modo combinato.

5. Qualche considerazione

Le funzioni del passo precedente condividono una cosa interessante, dentro la loro parentesi tonda possiamo inserire un valore numerico per esprimere in millisecondi la durata dell’animazione, quindi se volessi modificare l’azione di prima per far si che duri mezzo secondo devo solo fare una piccola modifica:

// Dissolvenza in mezzo secondo
$("#oggetto2").fadeIn(500);

Se invece volessimo nascondere un elemento direttamente tramite jQuery per poi mostrarlo con un’animazione possiamo concatenare due o più funzioni per non riscrivere il selettore più volte:

// Nascondo un elemento e lo mostro animandolo tramite jQuery
$("#oggetto3").hide().show(500);
// Senno avremmo dovuto scrivere
$("#oggetto3").hide();
$("#oggetto3").show(500);

Un’ultima nota che vale solo per show() e hide(), se vengono scritti senza specificare una durata, vengono eseguiti istantaneamente, senza animazione.

In Conclusione

Ora avete delle buone basi per animare oggetti Html con jQuery… divertitevi! E se non l’avete ancora fatto scaricate i file di esempio Animazioni con jQuery !

Il tutto inizia oggi (4° compleanno di jQuery tra l’altro)… i contenuti rilasciati giornalmente comprendono: video istruzionali, “pezzi” di codice da riutilizzare, aggiornamenti di jQuery UI e molto altro ancora. In più effettuando una donazione di almeno 20 Dollari al progetto jQuery (14,25 € - e visto l’ottimo lavoro degli ultimi due anni direi che ne vale veramente la pena!) si potrà scaricare liberamente uno degli 8 libri su jQuery messi a disposizione dallo staff.

Se ancora non conoscete jQuery potete rileggere il mio vecchio post dove lo introducevo o il sito ufficiale, mentre se volete muovere i primi passi con questa libreria potete consultare i miei due tutorial più quello di Carlo Panzi su NightDrops.

Facendo riferimento al caso in cui questo non sia l’effetto desiderato, vi propongo un modo semplice per sistemare questa cosa con un paio di righe di jQuery. Considerando che la soluzione che vi sto per illustrare è dinamica, può tornare utile anche nel caso l’elemento contenuto non abbia sempre la stessa altezza, per esempio se al suo interno carica contenuti dinamici che cambiano di volta in volta, impedendo cosi di utilizzare un valore fisso di altezza per sistemare il tutto.

Software Richiesto

Tenicamente anche nessuno… html, css e javascript (e jQuery) si possono editare da un “blocco note”, tuttavia utilizzare editor appositi fa risparmiare tempo e energie. Io utilizzo Dreamweaver CS4 che è a pagamento (potete comunque provarlo gratis per 30 giorni), ma potete anche considerare Aptana che oltre ad essere freeware è maggiormente indicato per scripting.

Prerequisiti

Conoscenza di base di HTML e CSS e il tutorial “iniziamo con jQuery”

Argomenti Trattati

Manipolazione delle proprietà CSS di elementi HTML, aggiunta di contenuti a un documento HTML

1. Creiamo la situazione di partenza

Seguendo rispettivamente il CSS Tip #6 e il tuorial “iniziamo con jQuery” fino al passo 2 (compreso), creiamo la situazione iniziale del “problema” per questo tutorial. Se scaricate il file zip in fondo al tutorial, nella cartella “situazione_iniziale” trovate tutti i file gia pronti.

2. Variabili in jQuery

Nel file dei nostri script scriviamo all’interno della funzione principale la seguente riga di codice:

...
var altezza = $("#oggetto").height();
...

Con il termine “var” facciamo sapere al compilatore che stiamo per definire una variabile (se non sapete cos’è una variabile vi rimando alla definizione di Wikipedia); la parola che segue subito dopo è il nome che decidiamo di dare alla nostra variabile, nel nostro caso “altezza” (in generale è consigliabile usare nomi facili da ricordare o pertinenti a quello che si sta facendo per evitare di incasinarsi da soli!); dopo il simbolo “=” definiamo il valore della variabile, nel nostro caso invece di usare un valore fisso gli diciamo di andarsi a ricavare il valore di altezza del div con id “oggetto” usando il selettore jQuery per prendere quel specifico div ( $("#oggetto") ) e leggendone l’altezza ( .height() ), ricordatevi sempre di chiudere ogni riga di codice con il “;”.

3.  Impostiamo l’altezza del contenitore

Grazie alla prima riga di codice abbiamo anche le conoscenze necessarie per scrivere la seconda:

...
$("#contenitore").height(altezza + 20);
...

Selettore jQuery per div con id “contenitore”, e nella proprietà di height (altezza) gli passiamo come valori la variabile creata nella riga prima + 20 pixel, questa è un’aggiunta personale per fare in modo che il contenitore essendo un po’ più alto dell’oggetto contenuto crei un po di bordo, se questa cosa non vi servisse vi basta cancellare il “+ 20″.

4. La prova del 9 con la proprietà “.append”

Nel caso in cui l’altezza del div “oggetto” non sia specificata da CSS ma dipenda proprio dal ciò che c’è al suo interno (nel file zip da scaricare a fine tutorial vedete la cartella “altezza_variabile”), potreste volere usare queste altre due righe di codice per controllarne l’altezza effettiva:

$("body").append("<h3>L'altezza del div rosso e' " + altezza + "</h3>");
$("body").append("<h3>Il Div nero ora ha un'altezza di " +
 (altezza + 20) + "</h3>");

Con “.append” si aggancia un qualcosa all’elemento selezionato, nel nostro caso attacchiamo delle righe di testo formattate con h3 all’elemento body, il codice va inserito tra virgolette “” e usando l’operatore + gli diciamo di aggiungere la variabile “altezza” che abbiamo definito poco prima, quindi il testo risultante sarà la somma del primo pezzo di codice + il valore della variabile altezza + la seconda parte di codice. Nella seconda riga ripetiamo esattamente quello che accade nella prima, tranne che vogliamo vedere il risultato del valore di “altezza” sommato a 20 pixel, l’espressione “altezza + 20″ la mettiamo tra parentesi tonde per fare in modo che venga visualizzato il risultato di quella somma.

Se aprite ora la vostra pagina nel browser vedrete il div “contenitore” che si adatta all’altezza del div “oggetto” (con qualche pixel in più se avete lasciato il +20) e due righe di testo che vi mostreranno il valore dell’altezza di entrambi i div.

Conclusione

Metto a disposizione un file .zip da scaricare che contiene 3 cartelle, una con la situazione iniziale, una con la soluzione ma dove l’altezza del div “oggetto” è definita da CSS  e una con la soluzione ma senza altezza definita per il div “oggetto”. Ogni cartella contiene 4 file:

• - pagina.html – quella che dovrete lanciare per vedere funzionare il tutto e che contiene i due div “protagonisti”
• - stili.css – dove definisco gli aspetti dei due div
• - jquery.js – il file fondamentale per fare girare il nostro script
• - script.js – il file che contiene lo script ottenuto da questo tutorial

Se invece siete nuovi al mondo di jQuery visitate la mia pagina dei tutorial e consultate “Iniziamo con jQuery”, sotto la voce javascript.

Ho chiaccherato con alcune persone che mi chiedevano perche lo reputo cosi utile, la mia risposta è stata che mi sto accorgendo di come è quasi perfettamente complementare con i CSS… unito poi al fatto che è veramente semplice!  Nello scorso articoletto ho giusto accennato due cose a riguardo di jQuery, quindi ho deciso di fare un mini-tutorial introduttivo, per dimostare l’effettiva semplicità e utilità di questa libreria, con la speranza magari di rendere un po più chiaro l’argomento a chi ne ha sentito parlare ma non riesce a contestualizzarlo nella realizzazione di pagine web.

Un paio di premesse su jQuery…

• non richiede conoscenze di altri linguaggi di programmazione, tuttavia avere un’idea di come funzionano in generale i linguaggi di scripting può essere un buon aiuto.
• è cross-browser, quindi non fatevi neanche domande su eventuali problemi di compatibilià con IE o Firefox e altri.
• utilizza selettori CSS, che sono gli stessi che gia utilizzate per creare regole CSS (es: #menu a – per indincare tutti i collegamenti ipertestuali in un div di nome “menu”)

Software richiesto

Tenicamente anche nessuno… html, css e javascript (e jQuery) si possono editare da un “blocco note”, tuttavia utilizzare editor appositi fa risparmiare tempo e energie. Io utilizzo Dreamweaver CS4 che è a pagamento (potete comunque provarlo gratis per 30 giorni), ma potete anche considerare Aptana che oltre ad essere freeware è maggiormente indicato per scripting.

Prerequisiti

Conoscenza di base di HTML e CSS.

Argomenti trattati

Installazione e sintassi di base di jQuery, interattivià e animazioni di base

1. Scarichiamo e installiamo jQuery

Il primissimo passo da compiere è andare sul sito jquery.com, dove in centro a destra troverete subito il pulsante per scaricare la libreria, lasciate selezionato “Production” sotto la scritta “Compression level”. Una volta scaricato, copiate il file in una sottocartella “/script” della cartella principale del vostro sito, questo non è un passo obbligatorio ma vi aiuta a mantenere ordinati i vostri file e il vostro flusso di lavoro. Altro passo non obbligatorio è rinominare il file di jQuery in un semplice “jquery.js” anziche il nome di base del file che di solito è un qualcosa tipo “jquery.1.2.3.4.5.js”. Ora aprite il vostro file HTML (o i vari file) dove volete applicare jQuery e sotto il tag <title></title> aggiungente questa riga di codice:

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

Cosi facendo dite al vostro HTML di cercare nella cartella “/script” il file “jquery.js” e di caricarlo insieme alla pagina. Ora jQuery è pronto a essere utilizzato!

2. Creiamo un file per i nostri script

Esattamente come i CSS, gli script possono essere salvati in file esterni all’HTML con una loro estensione (nel caso di Javascript e jQuery sono i file .js), con il gia noto vantaggio di mantere il più chiaro possibile il file HTML principale e di fare in modo che diverse pagine accedano allo stesso script, minimizzando così le dimensioni effettive del nostro sito e garantendoci un modo più semplice e dinamico di aggiornarlo. Quindi creiamo un file vuoto chiamandolo “prova.js” e salviamolo nella precedentemente creata cartella “/script”. Ora apriamo il nuovo file e digitiamo queste righe di codice:

$(document).ready(function() {

});

La prima riga tradotto in un linguaggio “umano” dice allo script di attendere il caricamento del documento per poi procedere con una funzione, la seconda riga l’ho lasciata vuota apposta perche è dove definiremo le azioni della funzione, la terza chiude la funzione. Uno dei concetti fondamentali da comprendere in jQuery è il simbolo $ , che è praticamente il suo selettore. Se volete che un’oggetto faccia o subisca qualcosa utilizzando jQuery dovrete sempre indicarlo con $(-oggetto-).

3. “Azione!” o meglio… “Funzione!”

Restiamo nel nostro file “prova.js”, ipotizzando che nel vostro HTML ci sia un div con id “menu” e che al suo interno ci siano dei collegamenti ipertestuali (il solito tag “a”) e volessimo aggiungere una piccola animazione al passaggio su questi oggetti, per esempio che li faccia spostare a destra, il codice necessario è questo:

$("#menu a").hover(function() { 
   $(this).stop().animate({paddingLeft: "10px"}, 300);}, function(){
   $(this).stop().animate({paddingLeft: "0px"}, 300);
});

con il selettore $ indichiamo tutti gli oggetti “a” all’interno di tag con id “menu” e diciamo a jQuery di avviare una funzione al passaggio del mouse (hover). All’interno di questa funzione ne troviamo altre due separate da una virgola, perche l’evento “hover” in jQuery prevede una funzione per far succedere qualcosa al passaggio del mouse e un’altra per far succedere qualcos’altro quando il mouse si allontana. Nella prima indichiamo l’oggetto corrente usando il selettore $ con il termine “this” (questo), e gli diciamo di animare (animate) l’aggiunta di 10 pixel di padding sinistro, facendo cosi spostare il nostro oggetto verso destra; mentre nella seconda ripetiamo quanto appena descritto ma reimpostiamo il padding sinistro a 0 pixel, facendo cosi tornare l’oggetto alla posizione iniziale. A questo punto salvate il file.

4. Incorporiamo il tutto e via…

Ora come abbiamo fatto nel primo passo, importiamo questo file javascript all’interno del documento HTML:

<script src="script/prova.js" type="text/javascript"></script>

E’ fondamentale ricordarsi che la riga che importa la libreria jQuery sia sempre la prima in ordine ascendente rispetto ad altre righe che importano file .js , altrimenti non vedremo funzionare niente! Quindi la riga che importa “prova.js” la scriveremo al di sotto di quella che importa jQuery. Ora salvate il file HTML e fate pure un’anteprima nel vostro browser, dovreste ottenere quello che accade nel menu del sito fitetmilano.org quando passate il mouse sulle voci del menu (tranne il cambio di colore, quello l’ho fatto con i CSS )

Conclusione

Con questo piccolo esempio dovreste esservi resi conto di come si riescono a ottenere effetti accattivanti grazie a jQuery con appena un paio di righe di codice… e questo è solamente l’inizio!

Si tratta di una libreria Javascript veramente versatile e che offre parecchie funzioni, dalle animazioni come fade-in/out e slide, alla manipolazione del DOM fino a alla raccolta e riutilizzo di dati all’interno di feed formattati in JSON, quest’ultima cosa per intenderci è quello che utilizzo in questo sito per prendere le foto dal mio account Flickr e visualizzarle dinamicamente qui. 

La cosa veramente interessante di questo jQuery, è che vi permette di ottenere effetti come quelli che vi ho descritto prima in pochissime righe di codice, e anche se non siete smanettoni di script e codice, scoprirete che non è cosi difficile da usare come sembra; a tutto questo si aggiunge il fatto che sia il sito ufficiale che altri di “supporto” brulicano di tutorial e spiegazioni, che partono dalle fondamenta fino ad arrivare a funzioni più “professionali” e complesse… quindi che dire, se volete esplorare il mondo di Javascript e AJAX ma avevate sempre temuto di dover apprendere papiri di codice incomprensibile,  jQuery è la soluzione giusta per voi!