Trasformare degli SVG linkati con img in SVG inline con jQuery

Per modificare i valori, siano il colore o la dimensione, di immagini SVG in CSS è necessario che siano inline e non inseriti con il tag <img>, risulta però molto più comodo includerli in quest’ultimo modo;
Includendoli con il tag <img> infatti potremmo aggiornare il file senza modificare il sorgente della pagina e al tempo stesso mantenere molto più ordinato il sorgente.
La soluzione è molto semplice in realtà, grazie a jQuery:

// cicliamo tutti tag img che hanno la classe 'svg'
$('img.svg').each(function(){
    // memorizziamo il file e gli attributi del file
    var $img = $(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    // effettuiamo una chiamata ajax al file per recuperare il contenuto dell'SVG
    $.get(imgURL, function(data) {
        // memorizziamo solamente il contenuto del tag svg ignorando il resto
        var $svg = $(data).find('svg');

        // se ha un id lo memorizziamo e lo assegnamo al nostro nuovo svg
        // ricostruito
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        // aggiorniamo allo stesso modo le classi aggiungendoci anche un prefisso
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Rimuoviamo tutti i tag xml che non sono validi per il w3c
        $svg = $svg.removeAttr('xmlns:a');

        // sostituiamo il tag iniziale img con il nuovo svg inline
        $img.replaceWith($svg);

    }, 'xml');
});

Capire se il sito è visualizzato da mobile in jQuery

Con una piccola espressione regolare possiamo capire se i visitatore sta visualizzando il sito da un dispositivo mobile:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    // fate qualcosa...
}

Lo script altro non fa che verificare se nella stringa di testo dell’user agent sono presenti le parole Android, webOS, iPhone, iPad, iPod o Blackberry comprendo così una fascia sufficiente di dispositivi.

Creare un effetto parallasse con le trasformazioni CSS 3d e jQuery

Il parallasse è un effetto ottico che fa sembrare che un oggetto si sposti cambiando il nostro punto di vista, questo è dettato dal fatto che l’oggetto è più vicino a noi rispetto allo sfondo e di conseguenza si sposterà più velocemente di quest’ultimo.
Creare un effetto parallax basilare con javascript/jquery è più semplice di quel che si potrebbe pensare:

///////////////////
//  PARALLASSI  ///
///////////////////
//  Per il funzionamento dello script è sufficiente assegnare agli
//  elementi che devono scrollare due "custom data":
//  data-type="vertical_parallax"
//  data-speed="1"
//  Impostando data-speed a "1" lo scorrimento sarà alla stessa velocità
//  della pagina; sono contemplati anche valori negativi o decimali.

//  Dichiarazione delle variabili
var win = $(window);              
$('[data-type="vertical_parallax"]').each(function(){

    //  Dichiarazione delle variabili
    var elm = $(this);
   
    //  Gestione dell'evento on scroll        
    win.on('scroll', function() {    

        //  Trasformo il valore di "speed" moltiplicandolo per la distanza
        //  dal top della finestra;              
        var position = -(win.scrollTop() * elm.data('speed'))/10,

        //  Assemblo la stringa per la proprietà CSS
            vertical_translate = 'translate3d(0,' + position + 'px, 0px)';

        //  Assegno all'elemento la nuova posizione
        elm.css({
            WebkitTransform : vertical_translate,
            MoxTransform : vertical_translate,
            transform : vertical_translate
        });

    }); // Fine Window scroll
}); // Fine each elements

Come commentato all’interno del codice per funzionare è sufficiente assegnare due attributi custom all’elemento che vogliamo che abbia l’effetto:

<div data-speed="1.8" data-type="vertical_parallax">
    <img src="/img/immagine.png">
</div>

Ed il gioco è fatto.

È possibile ottenere questo effetto anche in altri modi, utilizzando altre proprità CSS ma, sfruttando transform3d sfrutteremo la GPU e lo scorrimento e il movimento saranno estremamente più fluidi!
NB: Ricordo che è necessario avere incluso jQuery perchè il codice funzioni

Rimuovere una classe di un elemento in jQuery

Per rimuovere una classe ad un elemento html con jQuery possiamo utilizzare il metodo removeClass():

<ul class="emphasis">
    <li>ciao</li>
    <li>ciao due</li>
    <li>ciao tre</li>
</ul>
<script>
    $('ul').removeClass('emphasis');
</script>

In questo modo avremo rimosso la classe “emphasis” a tutti gli elementi passati a jQuery.