Archivi autore: alemux

jQuery plugin: knob.js, il plugin studiato per … manopole

Pubblicato il da
Rispondi

Vi starete ancora chiedendo cosa c’entra la parola manopola con questo plugin: beh, se vi cercate la traduzione letterale, knob vuol dire proprio manopola. Non prendetevela con me.

Questo plugin permette di realizzare dei diagrammi grafici piuttosto interessanti, con delle varianti grafiche adattabili a molte situazioni. Il nome di una delle skin grafiche disponibili per questo plugin è tron, come il film della Disney: effettivamente il richiamo mentale è abbastanza azzeccato, anche se l’unica cosa decente di quel film era l’attrice principale, Olivia Wilde. Non aggiungo altro.

Come in tutti i plugin di jQuery, il codice è piuttosto semplice da inizializzare.

<input class="knob" data-width="100" data-displayInput=false value="35">

L’esempio si configura gestendo alcuni tag, come data-width e data-displayInput.
Vi state ancora chiedendo il risultato finale? Eccolo qui:

Non ho avuto ancora la possibilità di testare la compatibilità, nè tantomeno le prestazioni “sul campo”. Ovviamente, non mancherò di aggiornare l’articolo quando i test del caso saranno conclusi.

Ora qualche riferimento: sito ufficiale del plugin, plugin su github

Speciale intervista a @benedettomotisi, un vero SEO Jedi

Pubblicato il da
1

Vi anticipiamo che la prossima settimana pubblicheremo la prima di molte interviste a designer, blogger, seo specialist e programmatori, sia italiani che esteri.

La prima intervista sarà con Benedetto Motisi, blogger e seo specialist, conosciuto al SEO Training di Roma, svoltosi il 27 Aprile 2012 a Roma all’Hotel dei Congressi ( che chiamavo Aula Bunker per la totale assenza di qualsivoglia segnale cellulare ).

Se volete scoprire il legame che c’è tra il SEO e Star Wars, vi consiglio di visitare il blog di Benedetto Motisi, oppure seguendo il suo account @benedettomotisi.

Se volete invece informati su quando uscirà la sua intervista, seguiteci su twitter @oneblackcat_it

Aggiornamento di Venerdì 10 Maggio 2012

Eccovi il link all’intervista integrale –> Intervista a Benedetto Motisi

Mappe vettoriali con jQuery

Pubblicato il da
Rispondi

Se la necessità del momento è di interagire con una mappa vettoriale, gestendone i vari click / mouseenter, questo plugin è una vera manna.

Stiamo parlando di JQVMap, un plugin che renderizza nel DOM le mappe vettoriali richieste attraverso poche righe di codice jQuery.

Per il suo funzionamento utilizza alcuni file SVG ( Scalable Vector Graphics ) e ne garantisce la compatibilità totale con IE9, Firefox, Chrome, Opera e Safari.

Ecco un esempio di codice per produrre una mappa del territorio europeo:


<script src="js/jquery.vmap.js"></script>
<script src="js/jquery.vmap.europe.js"></script>

<script>
jQuery('#vmap').vectorMap({
    map: 'europe_en',
    backgroundColor: null,
    color: '#ffffff',
    hoverColor: '#999999',
    enableZoom: false,
    showTooltip: false
});
</script>

<div id="vmap" style="width: 600px; height: 400px;"></div>

Risultato finale:

Eccovi il link alla homepage del plugin: http://jqvmap.com/

Curtain.js: plugin jQuery per gestire alcune transizioni in pagina

Pubblicato il da
Rispondi

Curtain.js è uno di quei plugin che posso tornare molto utili in alcuni casi.
Poniamo il caso di dover mostrare un pannello che, normalmente, rimane nascosto alla vista del visitatore: ecco, curtain.js può fare al caso nostro.

Realizzato da Victor Coulon ( seguilo su Github o su Twitter ), il plugin permette di gestire, mostrare, nascondere e scrollare alcuni pannelli, contenenti foto, testi e tutto quello che può servire.

Pur essendo molto snello come codice, ho trovato ( opinione personale ) un pelo di lentezza nello scroll di contenuti grafici tipo foto fullscreen, mentre il ritorno con testi e foto piccole è eccellente.
La compatibilità con altri script è un po’ borderline: ho riscontrato, per esempio, che utilizzando qualche ChromeApp, queste ultime si schiantano allegramente direttamente sulla Home di curtain.js.

Quindi: usare, ma ( per quanto mi riguarda ) con moderazione.

Come per tutti i plugin, vale di più la pena di andare sul sito ufficiale e testare con mano il funzionamento.

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

Pubblicato il da
Rispondi

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!