Category: JavaScript

JavaScript

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

Bootstrap Datetimepicker e l’evento change

bootstrap-datetime

 

Bootstrap Datetimepicker è un’ottima libreria basata su jQuery, Bootstrap e Moment.js che ci permette di implementare un campo input/calendario con cui selezionare data e/o orario.

Di seguito il codice HTML e JavaScript per l’implementazione:

 
<input type="text" class="form-control" id="datetime">
 
$('#datetime').datetimepicker({
    format: "DD-MM-YYYY",
    locale: 'it',
    widgetPositioning: {
        horizontal: 'left',
        vertical: 'bottom'
    }
Leggi tutto

Bootstrap Offcanvas: creare un menu laterale a scorrimento

bootstrap-offcanvas

Ormai tutti utilizziamo Twitter Bootstrap per il frontend dei nostri progetti web e mobile. Si, lo usi anche tu, lo so. Perchè è fico, bello, utile, ben progettato e, soprattutto, ben supportato. Io non ne farei mai a meno.

Oggi vediamo come implementare un menu laterale a scorrimento per le nostre mobile app in html5. Bootstrap, di base, prevede nella sua navbar che il menu “collapsi” (si, l’ho detto) …

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