paitadesignblog » jQuery

jQuery e Web Designer: 20+ consigli utili e trucchi per tutti i siti!

Giacomo Paita — Sun, 30 May 2010 14:51:25 +0000

jQuery si dimostra molto utile per per tutti gli sviluppatori e i web designer che vogliano dare maggiore usabilità e flessibilità a ogni progetto web che stanno seguendo. Questo framework si rivela straordinario sia per i progetti di grosse dimensioni, sia per i siti più modesti.

Di seguito sono riportati alcuni piccoli trucchi e consigli molto utili, raccolti da varie fonti in Internet, che permettono di migliorare l’interazione dell’utente e di risolvere alcune problematiche in modo semplice ed efficace, anche per i webdesigner meno esperti e gli sviluppatori principianti. Dal momento che questi esempi sono incentrati su jQuery, il codice proposto non entra nei dettagli dei CSS.

CSS diversi per browser diversi

Ecco come dichiarare codice JavaScript per browser specifici:

jQuery.each(jQuery.browser, function(i) {
   if($.browser.msie && $.browser.version <= 6 ){
     // fai questo e quello
   }
});

//Target Safari
  if( $.browser.safari )
//Target IE6+
  if ($.browser.msie && $.browser.version > 6 )
//Target IE6 e precedenti
  if ($.browser.msie && $.browser.version <= 6 )
//Target Firefox 2 e successivi
  if ($.browser.mozilla && $.browser.version >= "1.8" )

Disabilitare il tasto destro del mouse dal menu contestuale

Ci sono molti frammenti JavaScript disponibili per disattivare il tasto destro del mouse dal menu contestuale, ma jQuery rende le cose molto più facili:

$(document).bind("contextmenu",function(e){
	return false;
 });

Verifichiamo che un elemento esista in jQuery...

if ($('#id').length) {
 // fai questo e quello
 }

...per caricare un plugin solo quando serve!

Quando il lavoro su un determinato sito cresce, gli script esterni iniziano ad accumularsi nella sezione del documento, e alla fine ciò impatta sulle prestazioni.
Grazie al metodo $.getScript, ecco una soluzione elegante a questo problema.

if ($('a.email').length > 0){
	$.getScript('js/jquery.mailto.js',function(){
		$('a.email').mailto();
	});
}

Eseguire solo ciò che serve veramente

Ogni programmatore/webdesigner per comodità di solito scrive tutto il codice JS per il sito web in un unico file.
jQuery però impiega tempo per cercare gli elementi nella pagina, anche se non esistono, e questo rallenta le cose. Ci sono due modi con cui è possibile aggirare questa situazione terribile. Quella più semplice è quello mettere un ID al tag body (il nome della pagina, ad esempio) ed eseguire il codice necessario per quell'unica pagina:

$(document).ready (function () {
	if ('body').hasClass ('home') {
  // codice per home page}else if ('body').hasClass ('blog') {
  // codice per la pagina blog
}
// e così via
});

Modalità non conflittuale

Per evitare conflitti quando si utilizzano più framework in un sito web, è possibile utilizzare questo Metodo jQuery, e assegnare un nome diverso alla variabile invece che il segno di dollaro. Ecco tutte le informazioni per utilizzare jQuery con altre librerie.

var $j = jQuery.noConflict();
$j('#mioDiv').hide();

Aggiungere un'icona per link diversi

Questo trucco è molto semplice e utile per l'usabilità. Se i link portano a siti Web esterni, vogliamo che una immagine venga visualizzata accanto al link, così come se sono presenti link a documenti .pdf, o .doc. Dopo aver definito delle regole CSS per ogni tipo di collegamento, associamole ai link corrispondenti:

// Link a pdf
		$("a[href$='.pdf']").addClass("pdf");
// Link a documenti (doc, rtf, txt)
		$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
// Link ad archivi compressi (zip, rar)
		$("a[href$='.zip'], a[href$='.rar']").addClass("zip");
// Email link
		$("a[href^='mailto:']").addClass("email");
//Aggiungiamo uno stile per i link esterni:
		$('a').filter(function() {
//Compariamo l'host name nell'anchor tag con 's host name location
		return this.hostname && this.hostname !== location.hostname;
    }).addClass("external");
//Possimao anche aggiungere l'attributo _blank al terget dei link esterni:
/*
	$('a').filter(function() {
  //Compariamo l'host name nell'anchor tag con 's host name location
  	return this.hostname && this.hostname !== location.hostname;
    }).addClass("external").attr("target", "_blank");
*/

Applicare un effetto hover a qualsiasi elemento

$('#hover-demo2 p').hover(function() {
  $(this).addClass('pretty-hover');
}, function() {
  $(this).removeClass('pretty-hover');
});

Rendere cliccabile qualsiasi elemento

Vogliamo rendere cliccabile qualsiasi elemento (attenzione: il nostro HTML non sarà più validato!):


	Contenuto del div

Ecco come fare:

$("div.clickable").click(
function()
	{
  window.location = $(this).attr("url");
});

Imparare ad usare correttamente le animazioni

Il metodo animate() prende semplicemente qualsiasi stile CSS e lo fa passare in modo fluido da un valore all'altro. Quindi, è possibile modificare width, height, opacity, background-color, top, left, margin, color, font-size tutto quello che accetta un valore numerico. Ecco per esempio come è facile animare tutte le voci di un menù facendole crescere a 100 pixel di altezza quando si passa sopra il mouse:

$('#miaLista li').mouseover(function() {
		$(this).animate({"height": 100}, "slow");
});

A differenza di altre funzioni jQuery, le animazioni sono automaticamente eseguite in coda, quindi se si desidera eseguire una seconda animazione una volta che la prima è finita, basta chiamare il metodo animate() per due volte, senza funzioni di callback ulteriori:

$('#mioBox').mouseover(function() {
		$(this).animate({ "width": 200 }, "slow");
   $(this).animate({"height": 200}, "slow");
});

Se si desidera che le animazioni avvengano in concomitanza, basta mettere entrambi gli stili nei parametri di una singola chiamata, così:

$('#mioBox').mouseover(function() {
	$(this).animate({ "width": 200, "height": 200 }, "slow");
});

È possibile animare qualsiasi proprietà che sia numerica. È però possibile scaricare un plugin per animare le proprietà che non sono numeriche, come i colori.

Shorthand per l'evento ready

Ecco un piccolo trucco che permette di salvare alcuni caratteri utilizzando una scorciatoia per la $(document).ready(function(){}).
Invece di:

$(document).ready(function (){
	// codice da eseguire
});

...possiamo scrivere:

$(function (){
	// codice da eseguire
});

Scorrere fino alla parte superiore di una pagina web

Per tornare a inizio pagina in modo fluido utilizzando le animazioni di jQuery, inseriamo questo codice HTML in pagina:

Torna a inizio pagina

...e settiamo l'animazione così:

$('a[href=#top]').click(function(){
	$('html, body').animate({scrollTop:0}, 'slow');
	return false;
});

Come personalizzare le liste

Aggiungiamo a ogni list-item ,per esempio, l'elemento "»":

$("ul").addClass("Replaced");
$("ul > li").prepend("»");

Impostiamo i CSS in modo tale da nascondere i bullet-point preimpostati:

ul.Replaced {
 list-style : none;
}

Cambiare i fogli di stile

Vogliamo aggiungere uno "style-switch" in modo che i navigatori del nostro sito possano scegliere, per esempio, tra uno stile ad alto contrasto e uno stile di stampa? E' molto facile da fare: quello che ci serve è una serie di link con ID univoco:

Scegli uno stile:
	
  Contrast
  Print
  Normal

Ecco come impostare i comandi JavaScript:

$("#StyleContrast").click(function() {
	$("link[media='screen']").attr("href", "Contrast.css");
  });
$("#StylePrint").click(function() {
	$("link[media='screen']").attr("href", "Print.css");
});
$("#StyleNormal").click(function() {
	$("link[@media='screen']").attr("href", "Normal.css");
});

Campi di ricerca personalizzati

Un piccolo script, che popola un campo di testo di un modulo con un testo predefinito come descrizione.
Questo testo sparisce se l'input è in focus, e ricompare se il focus è perso senza alcun input:

Dato che questo compito può essere usato in diverse situazioni, è una buona idea scrivere una funzione riutilizzabile. Il primo parametro è un selettore (nel nostro caso "#Testo di ricerca", ma qualcosa come "input[@name=search]" potrebbe andare bene), il secondo parametro è il nuovo valore predefinito di tale elemento di input (ad esempio "Inserisci i termini di ricerca qui ..").

function populateElement(selector, defvalue) {
 $(selector).each(function() {
         if($.trim(this.value) == "") {
                     this.value = defvalue;
         }
})
 $(selector).focus(function() {
        if(this.value == defvalue) {
                    this.value = "";
         }
});
$(selector).blur(function() {
        if($.trim(this.value) == "") {
        this.value = defvalue;
        }
      });
}

Nel nostro caso particolare il codice JavaScript potrebbe apparire così:

populateElement('#SearchText', 'Inserisci la parola che cerchi..');

Prevenire il comportamento di default

Supponiamo di avere una pagina molto lunga, e di avere un link simile a quello qui sotto che viene utilizzato per scopi diversi da un collegamento ipertestuale. Se si fa clic su di esso, ci porterà in cima alla pagina. La ragione di questo comportamento è la presenza del simbolo #.

Per risolvere questo problema, è necessario annullare il comportamento predefinito, in questo modo:

$('#chiudi).click(function(e){
     e.preventDefault();
}); 

/* oppure */

$('#chiudi).click(function(){
    return false;
});

Font resizing

Questo è una delle più usate funzionalità in una pagina web, cioè la possibilità di permettere all'utente aumentare/diminuire la dimensione del carattere.
Siamo in grado di specificare l'ID, le classi o gli elementi HTML di cui si desidera regolare il carattere tramite un array.

$(document).ready(function(){
	 //Inseriamo un un array gli ID, classi e tag di cui vogliamo ridimensionare i font
  //Mettiamo html or body se vogliamo rendere tutti i caratteri ridimensionabili:
  var section = new Array('span','.section2');
  section = section.join(',');

	 //Resettiamo il font-size
  var originalFontSize = $(section).css('font-size');
  $(".resetFont").click(function(){
  $(section).css('font-size', originalFontSize);
  });

  //Aumentiamo il font-size
  $(".increaseFont").click(function(){
  var currentFontSize = $(section).css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.2;
  $(section).css('font-size', newFontSize);
  return false;
  });

  //Diminuiamo il font-size
  $(".decreaseFont").click(function(){
  var currentFontSize = $(section).css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.8;
  $(section).css('font-size', newFontSize);
  return false;
  });
  });

Impostiamo adesso un pannello per passare da un font-size a un altro:


		+ |
		- |
		=

	Questo font può cambiare di dimensione
  Questa sezione non cambia il font!
  Questa invece sì!

Rimuovere una parola

Ecco il modo più semplice: usiamo le espressioni regolari:

var el = $('#id');el.html(el.html().replace(/parolaDaRimuovere+parolaDaRimuovere/ig, ""));

Ottimizziamo l'uso dei Plugin

I plugin di jQuery devono essere inclusi nella pagina principale dopo il core jquery.js, così:

Il metodo migliore però è quello di copiare tutti i file JavaScript in un singolo file e poi comprimerli con YUI e impacchettarli.

Aggiungere / inserire elementi HTML dentro un elemento

Il metodo .append() inserisce il contenuto specificato come l'ultimo figlio di ciascun elemento della collezione jQuery (per inserirlo come primo figlio, usare. .prepend()).

I metodi .append() e .appendTo() svolgono lo stesso compito. La principale differenza è nella sintassi, in particolare, nel posizionamento dei contenuti e di destinazione.
Con append(), l'espressione che precede il metodo di selezione è il contenitore in cui è inserito il contenuto. Con .appendTo(), al contrario, il contenuto precede il metodo, sia come espressione di selezione o di markup creati al volo, ed è inserita nel contenitore di destinazione. Ecco cosa scrivere:

$('#questoDiv').append("testo inserito");

..che equivale a:

$('testo inserito').appendTo('#questoDiv');

Aggiungere / inserire elementi HTML dopo un elemento

Dobbiamo usare .insertAfter(), oppure .after()

Rimpiazzare un
con jQuery

$('#questoDiv').replaceWith('Altro div
');

Rimuoviamo un elemento dopo gli effetti Fadeout e Slideup

Combiniamo più effetti in jQuery per animare e rimuovere un elemento dal DOM:

$("#myButton").click(function() {
        $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
            $(this).slideUp("slow", function() { //slide up
            $(this).remove(); //e rimozione dal DOM
        });
});
});

...alla fine: Javascript Error Checker!

Adesso che abbiamo tutti questi script da utilizzare nel nostro sito, come testarli? Il debug di script javascript possono essere molto lunghi in termini di tempo. Così, se non riusciamo a risalire a che cosa sta causando gli errori, è possibile utilizzare questo strumento online gratuito: JSLint

Letture consigliate

http://addyosmani.com/blog/50-jquery-snippets-for-developers/
20 Helpful jQuery Methods you Should be Using
very useful jQuery Tips and Tricks for all jQuery developers
8 awesome JQuery tips and tricks
6 quick jQuery tips: Text manipulation, timers and elements
51+ Best of jQuery Tutorials and Examples
jQuery Tips and Tricks II
Quick Tip – Set Hover Class for Anything
jQuery DIV click, with anchors
JQuery HowTo
30 Javascript Menu Plugins and Scripts
Improve your jQuery - 25 excellent tips
Playing with jQuery Color Plugin and Color Animation
Animate a hover with jQuery
Scroll to the top of a webpage with jQuery
Tutorials:5 Quick jQuery Tips
Useful and Handy jQuery Tips and Tricks
6 fast jQuery Tips: More basic Snippets
6 quick jQuery tips: Text manipulation, timers and elements
10 Tips for Writing Better jQuery Code

Articoli correlati:

CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

Giacomo Paita — Sun, 02 May 2010 10:11:00 +0000

Vi è mai capitato di voler ottenere tramite CSS un layout che ricordi quello dei tradizionali quotidiani cartacei? Per chi volesse cimentarsi con i CSS3, sono già a disposizione alcuni generatori di CSS3 che consentono di testare uno dei nuovi moduli che dispone il testo su più colonne: CSS multi-columns
Vediamo di seguito come funziona questo modulo e quali sono i browser compatibili con CSS3 Columns.

CSS3 Columns

Attualmente solo Firefox, Safari e Chrome sono compatibili con il multi-columns. Mozilla utilizza il prefisso speciale moz-, mentre l’implementazione per Safari utilizza il prefisso -webkit, che abbinati alle regole ufficiali, permettono di creare layout multi-columns:

.columns {
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -moz-column-rule: 1px solid black;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  -webkit-column-rule: 1px solid black;
  column-count: 3;
  column-gap: 1em;
  column-rule: 1px solid black;
}

I browser ad oggi compatibili sono:

Firefox 1.5+
Safari 3+
Chrome
IE 9

Di seguito nel dettaglio ecco cosa abbiamo appena specificato per dividere il layout in colonne.

Risorse Demo

Column-count: come definire il numero di colonne

Abbiamo impostato column-count:3 per dividere il div che contiene il testo in tre colonne di uguale larghezza. Abbiamo inoltre specificato uno spazio tra le colonne, il column-gap:1em, che agisce come la proprietà padding, aumentando notevolmente la leggibilità. Notiamo che l’altezza delle colonne si adatta al contenuto di testo e che, aumentando il numero dei caratteri o la dimensione del testo, essa si adatterà per contenerlo. Di seguito il codice CSS3 che dovremo scrivere:

  column-count: 3;
  column-gap: 1em;

Column-width: impostare la larghezza delle colonne

Un altro modo per definire le colonne è impostare solo il column-width (e, come per l’esempio precedente, il column-gap). Per esempio, defininendo un column-width di 200px, tutte le colonne avranno 200 pixel di larghezza: il browser calcola di conseguenza quante colonne di questa larghezza possono inserirsi nell’elemento contenitore, e le crea in base a questo valore. Anche in questo caso, l’altezza delle colonne è definita dal contenuto testuale. Ecco cosa dobbiamo scrivere:

  column-width: 200px;
  column-gap: 1em;

Column-rule: dividere le colonne con dei filetti

La proprietà column-rule agisce come una sorta di border tra le colonne. Questa regola ha infatti le stesse proprietà del border: (larghezza, stile e colore), e come per esso, possono essere scritte tramite "shorthand":

/*Shorthand per column-rule*/
column-rule:1px solid black;
/*che equivale a:*/
column-rule-color: #000;
column-rule-style: solid;
column-rule-width: 1px;

Column-span: intestazione su più colonne

Questa proprietà non è ancora supportata da nessun browser.
Ecco cosa imposteremo nei fogli di stile con la regola CSS3 per espandere il titolo su più colonne::

/*Settiamo il numero delle colonne: n | all*/
column-span: all;

Colonne CSS3 cross-browser: Columnizer jQuery

Come abbiamo potuto notare, siamo ancora lontani dal poter utilizzare nella pratica la proprietà CSS3 multi-columns. Il framework jQuery ci mette però a disposizione un plugin che fa esattamente quanto abbiamo visto fin’ora. Ecco cosa dobbiamo fare: scarichiamo Columnizer jQuery Plugin e colleghiamolo alla nostra pagina HTML da dividere in colonne, così:

Scriviamo poi in pagina il nostro contenuto, agganciandovi una classe, per esempio columns:

CSS3 e jQuery multi-column module

  The Columnizer jQuery Plugin will automatically layout your content
  in newspaper column format. You can specify either column width or a static
  number of columns. And, of course, it’s easy to use!

Adesso agganciamo il plugin a questa classe, così:

$(document).ready (function() {
  $('.columns').columnize({columns:2});
});

Ecco cosa succede: il plugin suddivide il contenuto in div ai quali assegna una classe column: alla prima aggancia la classe first, all’ultima la classe last.

jQuery e le colonne ad altezza uguale

Terminiamo con un ottima funzione che permette di impostare uguale altezza per elementi flottanti, semplicemente includendo questo script e agganciandolo al .mioElementoFloattante:

$(document).ready(function(){
function equalHeight(group) {
   tallest = 0;
   group.each(function() {
      thisHeight = $(this).height();
      if(thisHeight > tallest) {
         tallest = thisHeight;
      }
   });
   group.height(tallest);
} ;
equalHeight($(".mioElementoFloattante"));

});

Di questa funzione è stato realizzato anche un plugin.

Letture consigliate

NetTuts: Quick Tip: The Multi-Column CSS3 Module
CSS3 Multi-Column Thriller
CSS3 Multi-column layout module
Smart Columns w/ CSS & jQuery
CSS3 multi-column: pagina di test
Multi-column layout: CSS3 Previews
W3C Multi column
CSS3 multiple columns
A list apart: css3 multicolumn
Equal Height Columns with jQuery
Few-column list
Implementare i CSS3 con jQuery

Articoli correlati:

jQuery: imparare le basi con toggle. Mostra e nascondi con stile!

Giacomo Paita — Sat, 06 Feb 2010 10:31:40 +0000

Le pagine web che siamo abituati a navigare fanno ormai un uso notevole di animazioni e di effetti, resi possibili, anche, dall’utilizzo del linguaggio JavaScript.
Dopo anni di cattiva reputazione, perchè associato all’idea di popup invasivi e fraudolenti, è stato particolarmente rivalutato anche grazie alla diffusione di tecniche come AJAX e alla possibilità sempre più estesa di riprodurre effetti grafici dinamici senza la necessità di plugin come Flash.

La caratteristica principale di JavaScript è quella di essere un linguaggio interpretato. Il codice quindi non viene compilato, bensì c’è un interprete incluso nel browser, e dato che ognuno (ma soprattutto IE) interpreta con specifiche ed eccezioni proprie, è spesso impossibile essere certi del funzionamento cross-browser di uno script.
In risposta a questi problemi sono nati progetti di librerie (o meglio framework) in grado di garantire il funzionamento cross-browser degli script e di estendere o comunque facilitare le funzioni native di JavaScript.

Cos’è jQuery?

Proprio per “facilitare” la creazione di pagine web, nel 2006 John Resig pubblicò la prima versione del suo ormai famosissimo framework: jQuery.
jQuery nasce quindi con lo scopo di risolvere tali problemi e di fornire uno strumento che potesse velocizzare la stesura del codice. Ed è così che è diventato il framework più utilizzato e con il più alto numero di plugin disponibili. La libreria ha una dimensione inferiore a quella degli altri framework, ha una community estesa ed è facile da imparare.

JavaScript: cenni introduttivi

Per chi inizia da zero, ecco una breve introduzione alle buone e cattive pratiche da seguire nello scrivere codice JavaScript, quindi valide anche per jQuery.
Per prima cosa, maggiore è la separazione migliore è la qualità del nostro risultato.
Per ottenere ciò, è bene tenere a mente gli scopi per la quale una pagina web è scritta:

descrivere il contenuto della pagina (HTML semantico)
specificare la presentazione di tale contenuto (CSS)
controllare il comportamento del contenuto (JavaScript)

Anche se è possibile agganciare per rapidità il codice JavaScript nei tag all’interno degli attributi “handlers” o all’interno dell’attributo href, questo rappresenta una cattiva pratica.

Evitare quindi gli handlers:

click

e il codice javaScript all’interno dell’attributo href:

click

È poi possibile inserire snippets di codice all’interno del tag script:

Sicuramente, a meno che non sia un piccolo esercizio, il codice JavaScript va messo in file esterni:

La posizione migliore per chiarezza è all’interno del tag head, anche se alcuni tipi di js esterni è meglio metterli al fondo (prima della chiusura del tag body). Questo perchè lo scarico del documento viene bloccato se ci sono problemi nel caricare la risorsa esterna. Se ad esempio il server di Google Analytics rispondesse per qualche ragione con tempi di attesa molto lunghi, ritarderebbe lo scaricamento dell’intera pagina web. Quindi, in generale è buon uso copiare gli script in locale, e se sono esterni valutare bene il loro scopo.

Lo stile di programmazione cambia a seconda della posizione. O per lo meno la chiamata (l’invocazione) di ciò che ho programmato dovra aspettare che il documento sia stato scaricato.

Ecco un’altra risorsa che illustra in modo esauriente questa tematica.

Iniziare ad usare jQuery

Per prima cosa occorre scaricare il core di jQuery, salvarlo in locale (per esempio: root\scripts\) e aggiungere all’intenro dell tag head il codice per richiamare la libreria. Così:





Dove inserire il link al core di jQuery? Qui sotto!

Possiamo poi iniziare a scrivere il codice in un file esterno, che va linkato dentro il tag head, dopo il link al core:

Il codice di jQuery deve sempre iniziare con il costrutto $(document).ready(), per segnalare alla pagina di eseguire il codice quando tutto il contenuto è caricato:

$(document).ready(function(){
	// il codice va qui
});

In jQuery sono molto importanti le parentesi, ogni blocco di istruzioni è racchiuso in parentesi tonde che a loro volta inglobano 2 parentesi graffe.
Nel codice sopra c’è una parentesi tonda che inizia dopo ready e viene chiusa alla fine, seguita dal ;).

Ogni metodo è seguito dalle parentesi tonde che in alcuni casi possono non contenere nulla (tecnicamente si dice che non contengono argomenti), in altri casi invece possono contenere alcuni parametri utili al funzionamento.

Mostra/Nascondi elementi: toggle

Vogliamo creare un menù in cui ci saimo dei semplici box da mostrare/nascondere al click sul titolo.
Ecco tutte le risorse per completare il progetto e una preview del risultato:

Risorse Demo

1. Impostiamo la struttura e applichiamo gli stili

Incominciamo con l’impostare il menù, con il nostro primo contenuto, cioè il titolo con l’anchor, seguito dal contenuto vero e proprio, cioè il titolo h3 e un paragrafo di testo:


	
    Prima Voce del Menù
	
	
	 Title
    Lorem ipsum dolor sit amet, consectetur
    congue justo, at ultricies diam mollis non.
    vestibulum libero. Donec consequat elementum
    tincidunt sapien malesuada fringilla.

Naturalmente possiamo inserire quanti elementi ci occorrono, all’interno del menù.
Applichiamo gli stili al codice, per esempio così:

body {
 font:normal 12px/14px "Lucida Sans Unicode",
 "Lucida Grande", sans-serif;
}
#menu {
 width:351px;
 margin:0 auto;
}
h2 {
 width:298px;
 padding:0 0 0 53px;
 height:40px;
 margin:0;
}
h2 a {
 color:#FFF;
 text-decoration:none;
 font-size:14px;
 line-height:40px;
}
h2.trigger {
 background:url(../gfx/bg_h2.jpg) left top no-repeat;
}
h2.active {
 background:url(../gfx/bg_h2.jpg) left bottom no-repeat;
}
.container {
 padding:20px;
 background:#f3f3f3;
 border:1px solid #999;
 color:#333;
}
h3 {
 margin:0;
 padding:0;
}
.container h3 {
 padding:0 0 20px 0;
 font-size:13px;
}
.container p {
 margin:0;
 padding:0;
}

2. Attiviamo il toggle con jQuery

Attiviamo odesso l’effetto toggle con jQuery. Per prima cosa nascondiamo tutti gli elementi cui è applicata la classe container. Selezioniamo poi tutti i titoli che hanno la classe trigger, applichiamo loro lo stile css cursor:pointer e attiviamo il toggle che aggiunge e rimuove la classe active. Per ultimo, agganciamo al click sul titolo il toggle:

$(document).ready(function()

  $(".container").hide();

  $("h2.trigger").css("cursor","pointer").toggle(function(){
  	$(this).addClass("active");
  }, function () {
  $(this).removeClass("active");
  });

  $("h2.trigger").click(function(){
  $(this).next(".container").toggle();
  });

});

Come si può notare, otteniamo un mostra nascondi piuttosto scattoso. Per ottenere un effetto "a tendina", possiamo utilizzare slideToggle:

$("h2.trigger").click(function(){
	$(this).next(".container").slideToggle("slow");
});

e ottenere una animazione più fluida.

Letture consigliate

Le basi di JQuery
Guida a jQuery
Imparare jQuery
Introduzione a jQuery – Prima parte
jQuery Tutorial – imparare ad usare jQuery da zero
jQuery API: toggle()
Simple Toggle with CSS & jQuerSimple Toggle with CSS & jQuery
Imparare jQuery: alternare le funzioni, le variabili, primi effetti

Articoli correlati:

CSS: immagine di sfondo a tutto schermo

Giacomo Paita — Mon, 28 Dec 2009 11:16:05 +0000

I siti web con immagine di sfondo a tutto schermo sono di sicuro molto eleganti e di grande effetto, perchè allargano la percezione dello spazio dietro ai contenuti principali, e se le fotografie sono "d’autore", il layout può essere minimalista e lasciar parlare solamente le immagini.

Vediamo di seguito non solo come impostare una immagine di sfondo, ma anche come fare affinchè l’immagine si adatti alla pagina del browser, senza usare javascript, ma solo CSS.

Immagine di sfondo al 100%

Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno larghezza e altezza di 100%, il margin e il padding sono azzerati.
Con la proprietà overflow evitiamo che vengano visualizzate le barre di scorrimento della finestra del browser. L’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e potere essere ridimensionata correttamente.

Ecco il codice HTML…

…a cui associamo queste riche di CSS:

html, body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#sfondo{
	position:absolute;
	height:100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

Ecco come appare il nostro esempio.

Immagine di sfondo scalabile

Un limite dell’esempio precedente è che l’immagine, adattandosi alla dimensione della pagina, di fatto si distorce. Vediamo come poter aggirare il problema.
Inseriamo in pagina questo:

Ed ecco come impostare il CSS relativo:

html, body, #bg, #bg table, #bg td {
	height:100%;
	overflow:hidden;
	width:100%;
}

#bg div {
	height:200%;
	left:0;
	position:absolute;
	top:0;
	width:200%;
}

#bg img {
	margin:0 auto;
	min-height:50%;
	min-width:50%;
}

#bg td {
	text-align:left;
	vertical-align:top;
}

Per vedere il risultato, ecco la pagina di esempio.

jQuery: Immagine di sfondo scalabile!

Ecco un aggiornamento al post con il quale segnalo un semplice plugin di jQuery che permette di aggiungere un’immagine di sfondo ridimensionata dinamicamente a una pagina qualsiasi. L’immagine verrà allunagata per adattarsi alla pagina, e verrà automaticamente ridimensionata quando l’utente cambia la dimensione della finestra.
Il plugin si chiama jQuery Backstretch, ed ecco come inserirlo:

Letture consigliate

Perfect Full Page Background Image
How to: CSS Large Background
100 percent background image in css
Inspiration: 80 Large Background Websites
Inspiration: Backgrounds In Web Design: Examples And Best Practices

Articoli correlati:

CSS: Bottoni espandibili con una sola immagine

paitadesignblog » jQuery

jQuery e Web Designer: 20+ consigli utili e trucchi per tutti i siti!

CSS diversi per browser diversi

Disabilitare il tasto destro del mouse dal menu contestuale

Verifichiamo che un elemento esista in jQuery...

...per caricare un plugin solo quando serve!

Eseguire solo ciò che serve veramente

Modalità non conflittuale

Aggiungere un'icona per link diversi

Applicare un effetto hover a qualsiasi elemento

Rendere cliccabile qualsiasi elemento

Imparare ad usare correttamente le animazioni

Shorthand per l'evento ready

Scorrere fino alla parte superiore di una pagina web

Come personalizzare le liste

Cambiare i fogli di stile

Scegli uno stile:

Campi di ricerca personalizzati

Prevenire il comportamento di default

Font resizing

Rimuovere una parola

Ottimizziamo l'uso dei Plugin

Aggiungere / inserire elementi HTML dentro un elemento

Aggiungere / inserire elementi HTML dopo un elemento

Rimpiazzare un con jQuery

Rimuoviamo un elemento dopo gli effetti Fadeout e Slideup

...alla fine: Javascript Error Checker!

Letture consigliate

CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

CSS3 Columns

Column-count: come definire il numero di colonne

Column-width: impostare la larghezza delle colonne

Column-rule: dividere le colonne con dei filetti

Column-span: intestazione su più colonne

Colonne CSS3 cross-browser: Columnizer jQuery

CSS3 e jQuery multi-column module

jQuery e le colonne ad altezza uguale

Letture consigliate

jQuery: imparare le basi con toggle. Mostra e nascondi con stile!

Cos’è jQuery?

JavaScript: cenni introduttivi

Iniziare ad usare jQuery

Mostra/Nascondi elementi: toggle

1. Impostiamo la struttura e applichiamo gli stili

Prima Voce del Menù

Title

2. Attiviamo il toggle con jQuery

Letture consigliate

CSS: immagine di sfondo a tutto schermo

Immagine di sfondo al 100%

Immagine di sfondo scalabile

jQuery: Immagine di sfondo scalabile!

Letture consigliate

Rimpiazzare un
con jQuery