Category: jQuery

jQuery

Implementare l’infinite scroll con JavaScript/jQuery

infinite scroll

 

Implementare la tecnica dell’infinite scroll è piuttosto semplice ed, oggi, vedremo come farlo realizzando una comoda funzione in JavaScript e servendoci di jQuery.

Qui puoi visionare il risultato finale: http://www.emawebdesign.com/demo/infinitescroll

In pratica:

Caricheremo dinamicamente 3 pagine di contenuto testuale, in aggiunta alla pagina iniziale, ogni volta che scrolleremo verso il basso. Un pò come facciamo quando scorriamo i contenuti sui social media (Facebook, Instagram ecc.).

Implementazione

Leggi tutto

Chart.js e jQuery: caricare dati JSON in un grafico

chartjs json

Chart.js è un’ottima libreria JavaScript per la creazione di grafici, una delle mie preferite. Open source, responsive, 8 tipi di grafico e una vasta gamma di opzioni che ne fanno una libreria utile per qualsiasi rappresentazione statistica su web e mobile.

Nel seguente esempio ti mostro come caricare dati JSON in un grafico, utilizzando il metodo getJSON di jQuery:

var data = [];
 
$.getJSON(
Leggi tutto

Applicare l’evento touch al carousel di Twitter Bootstrap

twitter bootstrap carousel

No, non cliccare sul carousel che vedi qui sopra. E’ solo un’immagine 😀

Se, in un sito responsive, abbiamo utilizzato il carousel di Twitter Bootstrap, nella versione mobile, è il caso di applicargli l’evento touch, la gesture corretta per la migliore esperienza utente sui device mobili.

Per farlo possiamo utilizzare un plugin di jQuery che trovi qui: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

Per attivare il plugin puoi copiare il seguente codice da richiamare …

Leggi tutto

jQuery scrollTop e scroll to div: un esempio pratico

jquery

In questo articolo vediamo come implementare lo scroll verso un elemento della pagina web (scroll to div) e lo scroll al top tramite jQuery. Ci può tornare utile per implementare un menu di navigazione con effetto “smooth scroll“, particolarmente adeguato per una landing page o single-page application.

Se, per esempio, il nostro link al top avesse id uguale a “btnHome”, il codice jQuery sarebbe:…

Leggi tutto

Associare più animazioni a un singolo elemento con Animate.css e jQuery

animate.css

Per un progetto a cui sto lavorando ho avuto la necessità di associare molteplici animazioni CSS3 per un singolo elemento HTML. Come ogni volta che ho una simile esigenza, ho scelto di utilizzare l’ottimo Animate.css di Daniel Eden.

Per utilizzare Animate.css è sufficiente includere il file:

<link rel="stylesheet" href="animate.min.css">

e associare l’animazione all’elemento tramite jQuery:

$('#element').addClass('animated bounceOutLeft');

Nel caso …

Leggi tutto