0
Dic 19 2011

jQuery 1.7: callbacks

Mi sono appena accorto che in jQuery 1.7 è stato aggiunto un primordiale supporto per gli hook, basato sulle classi.

Molto bello!

In pratica si usa con l’oggetto window.jQuery.callbacks() o, più velocemente, $.callbacks();.

Una volta assegnato quest’oggetto a una variabile potete aggiungere e rimuovere funzioni, mentre per chiamarlo fate variabile.fire(); sostituendo a variabile il nome della variabile a cui avete assegnato $.callbacks().

Uno dei probabili errori è pensare che una volta settati siano globali o che facendo $.callbacks() rimangano salvati globalmente, invece no, perciò state attenti.

0
Ago 17 2011

WebSocket

Grazie al changelog di Firefox 6 (uscito oggi) ho scoperto questa funzionalità di Javascript, che ovviamente, come tutte le più belle funzionalità, saranno in HTML 5, ma intanto i browser si stanno preparando.

La funzionalità di cui voglio parlare è la “websocket”.

Generalmente, quando si parla di socket in informatica si parla di una connessione tra un server e un client. Anche i normali protocolli che siamo abituati a usare utilizzano delle socket: per esempio quando si visita una pagina web, si apre una socket con un server, ma questa connessione viene subito chiusa dopo che il server ha inviato il contenuto della pagina.

In una web-socket invece la connessione rimane aperta, in attesa che una delle due parti la chiuda, e intanto si possono inviare dati.

Una delle applicazioni che potrebbero sfruttare questa caratteristica è senza dubbio la chat.

Si potrebbe mettere il server in ascolto di nuovi messaggi che poi sono inviati subito al client, anziché sfruttare continue richieste AJAX.

Un giorno magari potrei provare a fare dei test con una chat “ibrida”: le websocket saranno preferite, ma in caso il browser non le supporti, si va di AJAX.

6
Lug 16 2011

Notifiche Destkop di Chromium

Che dire… Chromium su certe cose è proprio avanti, specialmente se si parla di javascript, da sempre punto molto curato nel suo sviluppo.

Non era la prima volta che sentivo parlare delle “Notifiche Desktop” però oggi ho voluto provarle e, che dire?

Sono proprio una bellissima idea.

Ormai la chat si è spostata nel web e si sta parlando di spostare anche la video chat, ci sono applicazioni nel web che sostituiscono praticamente ogni programma.

Uno degli svantaggi che è capitato spesso anche a me però accade quando si usa qualche programma diverso dal browser: non sempre ci si può accorgere di cambiamenti vari (nuove email, nuovi messaggi) che invece avverrebbero con i programmi tradizionali.

Chrome risolve questo problema con le Notifiche Desktop: però non funzionano solo su Gmail, bensì ogni sito le può sfruttare.

Basta un po’ di javascript. Questo articolo spiega molto bene come fare e propone anche una demo.

Come idea la considero ottima, però la concorrenza si deve mettere alla pari: non mi dispiacerebbe poterne usufruire anche con Firefox.

Invece con Internet Explorer 9 ci sono i Pinned Sites che supportano delle API interessanti.

2
Lug 06 2011

Come fare un menu “espandibile”

C’è un mio amico che si diletta a creare siti web e poi visto che io sono più esperto di lui mi chiede spesso cosa ne penso.

L’altro giorno ha aggiunto al suo sito un menu che con javascript apriva e chiudeva i sottomenu.

Quando mi ha chiesto: “Cosa ne pensi?” gli ho risposto “Una schifezza. Di grafica è anche bello però è anti accessibile…”.

È vero che ormai tutti i browser hanno javascript sempre abilitato, però c’è chi javascript non ce l’ha ed è molto più intransigente dei normali utenti: i motori di ricerca.

Visto che spesso mi fa delle sfide ho deciso di far vedere come creerei io un menu con questo articolo.

Userò un po’ di HTML, la proprità display di CSS e Javascript, precisamente il DOM e l’evento onclick.

La struttura HTML è molto semplice, anche se deve essere per forza fatta così: ogni menu è una lista ul e i sottomenu hanno un elemento span che fa da loro titolo.

È necessario che l’ul principale abbia un id, il resto viene estrapolato col DOM. Perciò si possono fare infiniti sotto menu.

Ecco un HTML di esempio:

[Leggi il resto...]
5
Ott 16 2010

Effetto slide Javascript

Ecco un effetto slide per javascript.

Premetto che è una cosa fatta un po’ così, proprio per non rivolgersi a un framework JS.

Dico subito che questo script ha dei limiti e cioè funziona solo con elementi dalla proprietà CSS (dichiarata o nativa non fa differenza) display: block.

Il secondo limite è che per farlo funzionare in modalità di far vedere serve che l’altezza sia fissata (oppure, visto che la fissa, che sia stato chiuso con questa funzione).

L’ho testato su Firefox e Chromium e funziona ma non so dirvi per altri browser.

Comunque da questo script si può anche creare un fade (è proprio da lì che l’ho creato, infatti tempo fa ho fatto uno script simile a bobu) usando opacity al posto di height.

Ma veniamo allo script:

[Leggi il resto...]