Categoria: JQuery

JQuery: Script Multilingua, the easy way

Posted on | by cesare

Vi presento un Work-around molto semplice per eseguire i nostri Script a seconda della lingua visualizzata sulla pagina web. Se il nostro script deve fare cose diverse (o non fare nulla) a seconda della lingua che stiamo visualizzando sul browser, quello che possiamo fare è guardare quale è l’attributo LANG contenuto all’interno del tag html e utilizzarlo come selettore di JQuery, mi spiego meglio:

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag SCRIPT e la sua dichiarazione deve essere successiva a quella della libreria JQuery
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.
Nello snippet che segue abbiamo assunto di voler inserire un testo tradotto per l’elemento EL quindi abbiamo sfruttato il selettore di JQuery TAG[ATTRIBUTE] in questo modo:

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
/**
* Developer Corsaro.it - JQuery Translate String
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/

       jQuery('document').ready(function ($) {

           /*Assumendo ad esempio <html lang="en-US"> */
          $('html[lang="en-US"] #EL').text("eng TRANSLATED");

        });
    </script>

Utilizzi

Non è il modo migliore di farlo, ma è uno dei più furbi, con questo script possiamo andare ad esempio a tradurre alcuni elementi della pagina (ad esempio pulsanti, titoli, etc)

Lo hai trovato utile? Codividilo con i tuoi follower :)

JQuery: azioni con i Cookie

Posted on | by cesare

Pensate per un attimo a questo scenario: volete creare un pop-up di iscrizione alla newsletter da mettere in home page del vostro sito web: mostrarlo ad ogni refresh diventa davvero troppo invaso e fastidioso per i nostri utenti, tant’è che il più probabile risultato è che nessuno si iscriverà alla nostra lista, o che se ne andrà infastidito verso qualche altro sito web. La cosa migliore da fare questi casi è mostrare il pop-up solo una volta per sessione, e per fare questo ci viene in aiuto la librearia di JQuery: JQuery Cookie. Questa libreria ci fornisce tutte le funzionalità necessarie per creare un cookie in Javascript e di manipolarlo.

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag SCRIPT e la sua dichiarazione deve essere successiva a quella della libreria JQuery (in questo caso abbiamo linkato in prima riga JQuery Cookie da remoto, ma potete facilmente includerlo nel progetto).
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.

Viene effettuato un controllo su ‘cookie-name’ per vedere se il nostro cookie è già stato creato in precedenza, ciò vorrebbe dire che abbiamo già eseguito questa azione e che quindi non deve essere ripetuta. Se NON esiste il cookie allora vado libero con la mia esecuzione (in questo esempio mostriamo una modale Bootstrap ma potete inserire una qualsiasi funzione). Finita l’esecuzione dei comandi viene creato il cookie e gli viene settata anche una durata (7 giorni in questo caso), in questo modo al prossimo refresh non sarà di nuovo eseguita nessuna istruzione finchè questo resta valido.

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
/**
* Developer Corsaro.it - JQuery Cookie Check
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/

              jQuery('document').ready(function ($) {

            if ($.cookie('cookie-name') == null) {
                setTimeout(function() {
                $('#modal-shop').modal('show');
                // doStuff
                }, 10000);
                $.cookie('cookie-name', '7');
            }
        });
    </script>

Utilizzi

Script estremamente versatile, può essere incluso in qualsiasi punto del DOM, per effettuare i test basterà eliminare i cookie dal browser svuotando la cronologia.

Lo hai trovato utile? Codividilo con i tuoi follower :)

Uno Smooth Scroll in JQuery

Posted on | by cesare

Oggi vi lascio uno snippet per implementare uno smooth scroll verticale sulle vostre pagine web. L’idea di base è far scorrere la pagina fino ad un determinato punto una volta cliccato su un pulsante, utile ad esempio se abbiamo una copertina che occupa il 100% dello schermo e vogliamo far scorrere la pagina all’utente semplicemente cliccando su una freccia o un link qualsiasi.

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag <script></script> e la sua dichiarazione deve essere successiva a quella della libreria JQuery.
Innanzi tutto lo script viene incluso in document.ready() in modo che tutti gli elementi del DOM siano correttamente disegnati.

Andiamo a triggerare l’evento click sull’anchor che vogliamo utilizzare $(‘anchor‘).click(). All’interno dell’evento click appena scritto inseriamo la funzione di callback che eseguirà l’animazione vera e propria ( mediante animate() di JQuery ).  Nello snippet poi abbiamo indicato un ipotetico elemento con id #target-anchor per indicare alla funzione fin dove far scorrere la pagina  ($(“#target-anchor”).offset().top).  Infine, il valore 800 rappresenta la durata dell’animazione ( in millisecondi), per cui sentitevi liberi di impostare quella che più si adatta alle vostre esigenze

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* Developer Corsaro.it - JQuery Smooth Scroll
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/

$(document).ready(function() {
$('anchor').click(function(event){
$('html, body').animate({
scrollTop: $("#target-anchor").offset().top
}, 800);
event.preventDefault();
});
});

Utilizzi

Come ho detto in precedenza questo Snippet può essere utlizzato in un sacco di tipologie diverse di progetto, ad esempio possiamo includerlo nel footer del tema WordPress attivo.
Domande?  🙂

 

 

Lo hai trovato utile? Codividilo con i tuoi follower :)

Serializzare una form ed inviarla via Ajax

Posted on | by cesare

Questo snippet JS agisce lato front-end su una form, permettendo di inviare i dati via Ajax, in maniera asincrona quindi e senza ricaricare la pagina. Può quindi essere inclusa in varie tipologie di progetti, anche su un sito WordPress, a patto che sia incluso correttamente nel DOM del sito web e che sia richiamato correttamente JQuery in precenza, al quale lo script si appoggia.

Come funziona questo Snippet?

Per funzionare correttamente lo snippet deve essere incluso in un tag <script></script> e la sua dichiarazione deve essere successiva a quella della libreria JQuery.

Grazie a $(‘#FORM_ID‘).submit() La funzione scatta al momento della submit della form con l’id che abbiamo inserito, in questo caso #FORM_ID, ma qui ci possiamo inserire un qualsiasi selettore del DOM.

Invio dei Dati

Viene bloccato il normale invio di informazioni con e.preventDefault() (e quindi il refresh della pagina),mentre i dati della form sono serializzati con la funzione serialize(), ovvero convertiti in  stringa e salvati all’interno della variabile data. Tramite il campo url indichiamo allo script dove effettuare la chiamata Ajax econ il parametro type invece il metodo (POST / GET).

Ricezione dei Dati

Bypassiamo la ricezione lato server ma potete immaginare di avere uno script PHP che riceve tutti i dati della form all’interno della variabile $_POST[‘name’]. Dopo la chiamata Ajax, se tutto è andato bene, riceveremo il risultato delle operazioni lato server all’interno della variabile data definita dentro Successe potranno essere utilizzati come meglio credete.

LO SNIPPET

Di seguito lo snippet, pronto per il copia-incolla 🙂

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
* Developer Corsaro.it - Send post data through ajax
* Website: https://developercorsaro.it
* cesare@developercorsaro.it
*/

$(document).ready(function() {
$('#FORM_ID').submit(function(e) {
e.preventDefault();
var $element = $(this);
var data = $element.serialize();
$.ajax({
url: "URL",
type: "POST",
data: data,
success: function(data) {
//dosomething
}
});
});
});

Utilizzi

Come ho detto in precedenza questo Snippet può essere utlizzato in un sacco di tipologie diverse di progetto, ad esempio possiamo includerlo nel footer del tema WordPress attivo.

 

 

Lo hai trovato utile? Codividilo con i tuoi follower :)