Sources :
- Page officielle du plug-in enquire.js
- Getting Started With EnquireJS
- Enquire.js – Media Query Callbacks in JavaScriptllbacks
- Getting Started With EnquireJS
Déclaration de base :
Attention : pour une raison que j’ignore, je n’ai eu aucun succès avec les déclarations de ce type (pourtant donnée en exemple sur css-tricks.com) :
|
1 2 3 |
enquire.register("min-width: 992px", function() { alert("toto"); }); |
Afin de pouvoir bénéficier de la magie d’enquire.js, il faut au minimum préciser le contexte dans lequel les styles doivent être appliqués à savoir (screen pour les écrans, print pour la version imprimable, etc…
|
1 2 3 |
enquire.register("screen and (min-width: 992px)", function() { alert("toto"); }); |
Plus proche de la logique Media Queries avec match et unmatch :
Enquire.js laisse la possibilité d’activer/désactiver des évènements en fonction de la résolution ciblée à l’aide de match et unmatch.
|
1 2 3 4 5 6 7 |
enquire.register("screen and (min-width: 992px)", { match : function() { alert("toto"); }, unmatch : function() { } }); |
Utiliser destroy pour annuler un évènement :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
enquire.register("screen and (min-width: 992px)", { match : function() { // desktop ONLY ! $(".second-nav-group").sticky({ zIndex:3, topSpacing: 0 }); }, unmatch : function() { $(".second-nav-group").sticky('destroy'); } }); |
Un template de base pour utiliser Enquire.js avec jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
jQuery(document).ready(function(){ enquire.register("screen and (max-width: 767px)", { match : function() { jQuery('body').removeClass('is-desktop').addClass('is-mobile'); }, unmatch : function() { jQuery('body').removeClass('is-mobile').addClass('is-desktop'); } }); enquire.register("screen and (min-width: 768px)", { match : function() { jQuery('body').removeClass('is-mobile').addClass('is-desktop'); }, unmatch : function() { jQuery('body').removeClass('is-desktop').addClass('is-mobile'); } }); }); |
Utiliser les variables des breakpoints de la grille Bootstrap avec enquire.js
Source jsFiddle.net : enquire JS + bootstrap grid breakpoints as global vars
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// breakpoints global vars // bootstrap grid bps var bs_screen_sm_min = '768'; var bs_screen_md_min = '992'; var bs_screen_xs_max = bs_screen_sm_min - 1; var bs_screen_sm_max = bs_screen_md_min - 1; // enquire JS bps var bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)'; var bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)'; var bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)'; // enquire JS enquire.register(bpSmartphone, { match : function() { console.log('bpSmartphone'); }, unmatch : function() {} }); enquire.register(bpTablet, { match : function() {}, unmatch : function() {} }); enquire.register(bpDesktop, { match : function() {}, unmatch : function() {} }); |