[Foundation 6] Une fonction pour récupérer les valeurs des breakpoints Current, From, To

Code source maintenu ici : https://github.com/franklang/foundation-sites-js-utils/tree/master.

Cette fonction permet de récupérer, au chargement de la page :

la valeur (Current) du breakpoint en cours.

Puis chaque fois que la largeur de la fenêtre est modifiée (redimensionnement, passage portrait/paysage, autre…) :

la valeur (From) du breakpoint précédent,
la valeur (to) du nouveau breakpoint en cours.

// Foundation 6 MediaQuery info function
function zfMediaQueryInfo() {
  var currentSize = Foundation.MediaQuery.current;
  console.log('Current: ' + currentSize);

  $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
    console.log('From: ' + oldSize + ' to: ' + newSize);

    var medium2small = oldSize == 'medium' && newSize == 'small';
    var medium2large = oldSize == 'medium' && newSize == 'large';
    
    if(medium2small){
     console.log('from MEDIUM to SMALL');
    }
    if(medium2large){
     console.log('from MEDIUM to LARGE');
    }
  });
}
zfMediaQueryInfo();

// Foundation 6 MediaQuery info function

function zfMediaQueryInfo() {

var currentSize = Foundation.MediaQuery.current;

console.log('Current: ' + currentSize);

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {

console.log('From: ' + oldSize + ' to: ' + newSize);

var medium2small = oldSize == 'medium' && newSize == 'small';

var medium2large = oldSize == 'medium' && newSize == 'large';

if(medium2small){

console.log('from MEDIUM to SMALL');

}

if(medium2large){

console.log('from MEDIUM to LARGE');

}

});

}

zfMediaQueryInfo();

Articles récents

Catégories

Archives

Méta

[Foundation 6] Une fonction pour récupérer les valeurs des breakpoints Current, From, To