In alcuni casi è utile aprire un documento PDF in un popup, magari in seguito al click su un logo oppure sull’immagine di una anteprima. Ecco un piccolo tutorial che mostra come aprire un PDF in un popup con Fancybox.

Quando si tratta di popup, di solito preferisco utilizzare il plugin per jQuery Fancybox. È uno strumento molto valido, che permette di aprire come popup praticamente qualsiasi cosa: dalle immagini agli iframe. In quest’ultimo caso rientrano anche i PDF: l’unico requisito è che il browser dell’utente abbia un lettore PDF integrato.

Il codice per attivare una fancybox che apre un PDF è davvero semplice:

$(".fancybox").fancybox({
    iframe : {
        preload: false
    }
});

Ecco una demo funzionante, dalla documentazione ufficiale di fancybox.

Recentemente ho dovuto personalizzare delle barre di scorrimento per il sito Cantiere Triplok. Le soluzioni che prevedono il solo utilizzo di CSS non sono sufficienti, in quanto permettono di agire solo su un piccolo insieme di caratteristiche (colore, dimensione), e soprattutto non sono compatibili con tutti i browser.

Questo il risultato che volevo ottenere:

L’unica via percorribile è quindi quella di Javascript / jQuery. Dopo una rapida ricerca ho deciso di utilizzare jscrollpane, un plugin jQuery che mi ha dato la possibilità di raggiungere il mio obiettivo (l’immagine in cima a questo post mi ha convinto che jscrollpane fosse il plugin giusto, esempio della personalizzazione delle barre di scorrimento che è possibile raggiungere).

Il codice javascript non ha nulla di eccezionale

jQuery(function () {
 jQuery(".scrollable").jScrollPane({
   showArrows:true,
   verticalDragMinHeight: 40,
   verticalDragMaxHeight: 40
 });
});

Un po’ di CSS ha fatto il resto: ho definito due immagini per le freccine in alto e in basso, e una terza immagine per il cursore verde.