paitadesignblog

HTML, CSS e tutto il resto

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

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:

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:

Verifichiamo che un elemento esista in jQuery…

…per caricare un plugin solo quando serve!

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

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:

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.

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:

Applicare un effetto hover a qualsiasi elemento

Rendere cliccabile qualsiasi elemento

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

Ecco come fare:

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:

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:

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

È 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:

…possiamo scrivere:

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:

…e settiamo l’animazione così:

…oppure possiamo realizzare lo stesso scroll animato con jQuery tramite una funzione a cui passiamo come parametro l’ id del selettore desiderato:

Come personalizzare le liste

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

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

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:

Ecco come impostare i comandi JavaScript:

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 ..”).

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

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:

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.

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

Rimuovere una parola

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

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:

..che equivale a:

Aggiungere / inserire elementi HTML dopo un elemento

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

Rimpiazzare un <div> con jQuery

Rimuoviamo un elemento dopo gli effetti Fadeout e Slideup

Combiniamo più effetti in jQuery per animare e rimuovere un elemento 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