Dragdealer.js – Slider, Scrollbar e tanto altro in questo plugin di jQuery

Oggi vi propongo questo interessante plugin di jQuery, dragdealer.js.

Questo prodotto, creato da Ovidiu Cherecheș @skidding, è molto interessante, perchè permettere di automatizzare in maniera semplice, veloce e flessibile alcune azioni tipo lo sliding ( es. volume dell’audio ), una scrollbar personalizzata su un DIV e tanto altro ancora.

Gestendo con un semplice callback la risposta dello slide, possiamo adattare questo plugin alle nostre esigenze.

Con un semplicissimo blocco di codice possiamo gestire la scrollbar di un DIV, contenente un testo troppo lungo per essere mostrato interamente:

new Dragdealer('scroll-bar',
{
	horizontal: false,
	vertical: true,
	yPrecision: content.offsetHeight,
	animationCallback: function(x, y)
	{
		var margin = y * (content.offsetHeight - mask.offsetHeight);
		content.style.marginTop = String(-margin) + 'px';
	}
});

Questo è quello che dovreste ottenere:

Potere di jQuery!Non so voi, ma io non riesco a farne a meno.
Prima di darvi il link, ci state già seguendo su twitter? NOOOO? Allora cliccate qui, è il nostro account!

Eccovi il link al plugin: http://code.ovidiu.ch/dragdealer/ . Buon lavoro!

Turn.js: plugin jQuery per simulare le pagine di un catalogo

Ogni tanto capita che qualche cliente, per la gestione del proprio catalogo e/o delle offerte del giorno, richieda una pagina con un effetto usato principalmente sui siti delle agenzie di viaggi.

Ad onor del vero, l’effetto che simula le pagine di un catalogo cartaceo è una cosa che mi lascia alquanto perplesso: usare la tecnologia per simulare quello che sarebbe tanto facile fare…a mano. Non so voi, ma io preferisco starne alla larga. La maggior parte delle volte, inoltre, è più di intralcio alla consultazione effettiva delle pagine che altro.

Nel caso, invece, che la vostra volontà non sia chissà quanto tenuta in considerazione da parte della committenza, allora forse questo plugin di jQuery fa al caso vostro.

La Homepage del plugin la trovate qui.

Come mostrato sul sito, l’utilizzo di questo plugin è piuttosto semplice:

#magazine{
	width:800px;
	height:400px;
}
#magazine .turn-page{
	width:400px;
	height:400px;
	background-color:#ccc;
}

<div id='magazine'>
	<div> Page 1 </div>
	<div> Page 2 </div>
	<div> Page 3 </div>
</div>

$('#magazine').turn();

Converrete con me che è piuttosto di facile utilizzo.
Per la configurazione e la personalizzazione vi consiglio di visitare subito la pagina dedicata http://www.turnjs.com/#reference .

Se Flash non è compreso tra le vostre scelte, forse questo plugin fa al caso vostro.
Il peso è quasi risibile, appena 6kb, e la inizializzazione è presto fatta.

Il problema, piuttosto, nasce dal fatto che non è completamente compatibile con tutti i browser.
Sarà difficile spiegare al cliente che il fantastico catalogo di turno non girerà a pieno su IE.
Avevate qualche dubbio?