Tempo fa avevo scritto un post sull’effetto pulse di jquery. Quel codice non è più reperibile ed il sito originale pare essere sparito. Ho fatto alcune ricerche ed ho trovato qualcosa di nuovo.
Posts Tagged ‘Ajax’
Che cosa è json? Un esempio …
17
Sep
Oggi è una giornata speciale perchè ieri questo blog ha avuto il suo record di visite giornaliere (per lo meno stando a google analytics). Siamo addirittura arrivati a 113. Un branco di pazzi =). Fatto sta che oggi sono qui per parlare di una cosetta nuova per me: json.
effetty jquery
10
Sep
jquery sa essere sbalorditivo anche senza l’utilizzo di plugin. Qualche post fa ho mostrato un plugin per ottenere l’effetto pulse. Un effetto simile si può ottenere anche solo con l’utilizzo di funzioni base come fadeTo ed un setTimeout, anzi … sfruttando gli effetti presenti in jquery (e senza l’uso di plugin) si possono fare tante cose davvero interessanti.
Vorrei davvero elencarli tutti, e mostrare un esempio davvero completo su questa parte del mio framework preferito (eheheh non ne ho ancora guardati altri).
Andiamo per cose più o meno necessarie:
- modificare l’opacità di un elemento;
- far sparire o scomparire un elemento;
- animare un elemento;
Non è tutto quello che si può fare i con jquery effects ma è senz’altro molto. E’ ovvio che se vogliamo nascondere un elemento con jqery dobbiamo usare $(…).hide(); Eheheh più conosco la libreria più rimango sorpreso. $(…).show(); invece mostrerà l’elemento. C’è un effetto decisamente interessante: fade. Possiamo lanciare fadeIn per mostrare, fadeOut per nascondere … un elemento. Lo vedremo scomparire. Come al solito possiamo impostare l’attributo speed per indicare la velocità. fadeTo poi, è l’effetto che preferisco perchè ci permette di non mostrare o nascondere completamente un elemento, ma di impostare la sua opacità. $(…).fadeTo(“slow”,0.5);
Immaginate di avere una pagina piena di contenuto tanto da far perdere la testa a chi ci sta navigando. Possiamo opacizzare per qualche secondo l’intero sito, esclusa la parte che ci interessa.
Tra tutti gli effetti che jquery ci mette a disposizione, quello senz’altro più maestoso è .animate(). Infatti, se passiamo ad animate un array con gli stili che vogliamo modificare, e successicamente la durata dell’animazione, potremo ottenere degli effetti decisamente grafici e spettacolari.
Tanto per fare un esempio, immaginiamo di volere un effetto che sposta il menu dal top al bottom della nostra pagina web:
$(…).css({‘position’:'absolute’});
$(…).animate({‘width’:’90%’,'height’:’30px’,'bottom’:’0px’,'margin’:'auto’,'align’:'center’},2000);
Purtroppo, per ragioni che ignoro (forse un bug)animate non mi ha consentito di impostare position. Così ho dovuto farlo a mano. Bene, questo semplice esempio altro non fa che reimpostare alcune proprietà del css di un elemento. Per farlo impiega 2000 millisecondi. Modifica l’allineamento, cambia le dimensioni… Sono tute cose che avranno un movimento decisamente fluido. Se sommiamo questo al fatto che non ci sarà bisogno di plugin, e sopratutto non avremo bisogno di preoccuparci di quale browser avrà il nostro utente… beh… darei un altro 10+ a jquery =).
Slides di immagini con Groject.ImageSwitch.yui.js
09
Sep
Mi piacerebbe fare una presentazione completa del plugin Groject.ImageSwitch.yui.js, ma mi soffermerò ad un esempio un po’ “architettonico” che mi ha permesso di giocare un po’ con gli array di javascript. Nel codice che segue, definisco un array che è formato dai nomi delle immagini che si vogliono mostrare una dopo l’altra.
Per non utilizzare una variabile contatore, ho usato uno stratagemma particolare. In verità, credo si tratti di pessima programmazione, perchè rende il tutto meno leggibile. L’idea è quella di usare il primo elemento dell’array come contatore e ad ogni ciclo si carica l’immagine in posizione (imgs[0]++%(imgs.length-1))+1. Un codice di questo tipo è molto comodo in quanto l’aggiunta o l’eliminazione di un’immagine dall’array, comporta ZERO modifiche al resto del codice javascript. Non dipende da nulla se non dall’array di immagini. L’idea è quella di avere un contatore che venga incrementato ad ogni click. Allo stesso tempo, il valore di questo contatore in modulo a imgs.length-1 ci darà la posizione dell’indice. Il +1 finale ci serve perchè non dobbiamo avere imgs[0] come immagine perchè non lo è.
Altra piccola questione: l’immagine che deve essere caricata nel codice html, deve coincidere con l’ultima dell’array.
Esempio semplice
<html>
<head>
<title>Groject.ImageSwitch.yui.js Plugin</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="Groject.ImageSwitch.yui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
imgs = new Array (0,"17082009263.jpg","17082009258.jpg","19022009195.jpg");
$("#Imgs").click(function(){
$(this).ImageSwitch({
Type:"FadeIn",
NewImage:imgs[(imgs[0]++%(imgs.length-1))+1],
Speed:150});
});
});
</script>
</head>
<body>
<img src="19022009195.jpg" id="Imgs" width="300" />
</body>
</html>
effetto pulse con jquery – testo lampeggiante
09
Sep
Acciderbolina! Il post che vedete qui sotto è praticamente inutile: avevo bisogno di quel plugin di jquery ed ho scoperto che non esiste più il sito che me lo forniva. Mi ritrovo a dover riscrivere due righe riguardo chi ha bisogno di questo effetto.
Effettuando altre ricerca, ho trovato un link interessante che sfrutta un plugin scritto sfruttando .animate() di jquery:
blog sul plugin pulse per jquery
Il resto dell’articolo lo lascio per “memoria storica”.
Il plugin di cui voglio parlare oggi è pulse. Pulse.jquery.js è un plugin che ci permette di far pulsare una porzione di testo, ma non solo. Il plugin può avere scopi più ampi, vediamo ora di fare qualche esempio per renderci davvero conto di che cosa può fare:
Riporto di seguito e ben commentati alcuni esempi proposti direttamente dal sito del plugin jquery.
Esempio semplice
<html>
<head>
<title>Pulse Plugin</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="pulse.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#payattention').pulse({
speed: 100,
opacityRange: [0.4,0.9]
});
});
</script>
</head>
<body>
<div id="payattention">Pay attention</div>
</body>
</html>
In questo esempio (che vi consiglio di provare) avrete la possibilità di vedere pulsare la scritta “Pay attention” sul vostro browser. È importante, a questo punto, definire il significato dei paramentri che si possono passare al metodo pulse. Quali, quanti sono, che cosa possono fare:
- backgroundColors
- textColors
- borderColors
- opacityRange
- speed
- duration
- runLength
backgroundColors: ['#ccc','#666','#999','#000']
textColors: ['#ccc','rgb(200,200,200)']
borderColors: ['red','blue']
Questi tre parametri ci aiutano a configurare il comportamento di pulse. Tra parentesi quadre, dobbiamo indicare quali colorazioni assumeranno rispettivamente sfondo, testo e bordo del nostro elemento, ad ogni pulsazione. Non ci sono limiti nel nnumero di colori che si vogliono passare. Non solo: in questo esempio ho passato il colore nel formato #CCC (CSS2.1) ma dovete sapere che potete usare la sintassi che preferite:
- ‘#ccc’
- ‘#cccccc’
- ‘rgb(200,200,200)’
Se io ho utilizzatto quella più compatta è solo per comodità e compattezza del codice, non per altro.
Un altro fatto importante da sapere, è che non è possibile modificare il bordo del nostro elemento se prima non è stato assegnato a questo uno spessore. Infatto il bordo è 0px di default. Visto che stiamo usando jquery, modificheremo il nostro elemento sempre con jquery (senza uso di plugin):
$(‘#payattention’).css({‘border’:’1px dashed’});
(Ovviamente questo è solo un esempio: potete usare lo spessore che preferite ed anche lo stile del bordo che preferite)
opacityRange
Questo parametro ci permette di scegliere il livello di opacità del nostro elemento. Il livello di opacità va passato come valore compreso tra 0.0 ed 1.0. La logica è la stessa dei tre parametri precendenti: possiamo avere più livelli di opacità per ogni pulsazione:
- [0.2,0.9]
- [0.1,0.2,0.3,0.4]
- e via dicendo …
speed, duration, runLength
Infine, abbiamo i parametri speed che indicano la durata della singola pulsazione in millisecondi. Quindi se volessimo fare si che ogni pulsazione duri mezzo secondo, utilizzeremo la sintassi ‘speed: 500′. duration invece lo dovremo utilizzare per indicare la dudata di tutta l’animazione.
A di, ci sarebbe anche sto runLength, ma se devo dirla tutta non ho ben capito come usarlo per cui passo =).