Polyfill for enquire.js in wordpress

Question

I'm trying to use Enquire.js in my Wordpress install. I'm trying just to push the left column under the central column for small screens.

I got it to work in most browser my the laptop, but it does not work on older Androids browser (2.2), saying it needs a polyfill. I tried to get this polyfill to work, but still not getting the functionality on Android, I still get the warning about matchmedia polyfill in android console.

Please help me pinpoint what is possible problem. Basically, I load couple of scripts in function.php:

function rr_scripts() {
  wp_enqueue_script( 'polyfill', get_stylesheet_directory_uri() . '/js/polyfill.js', array( 'Modernizr' ), '1.0.0', true );
  wp_enqueue_script( 'enquire', get_stylesheet_directory_uri() . '/js/enquire.js', array( 'jquery' ), '1.0.0', true );
  wp_enqueue_script( 'reorder', get_stylesheet_directory_uri() . '/js/reorder.js', array( 'enquire' ), '1.0.0', true ); 
} 
add_action( 'wp_enqueue_scripts', 'rr_scripts' );

Then my Child template has js folder with couple of files, polyfill.js, that is supposed to polyfill the mediamatch (media.match.js is in the same folder):

Modernizr.load([
{
    test: window.matchMedia,
    nope: "media.match.js"
} ]);

reorder.js (below), that actually uses the enquire.js that is in the same folder as well:

jQuery(document).ready(function() {
   enquire.register("screen and (max-width: 599px)", {
       match: function() { jQuery('#leftside').insertAfter('#primary'); },
       unmatch: function() { jQuery('#leftside').insertBefore('#primary'); }
   }); 
});

score 0 · Answer 1 · answered Dec 05 '13 at 00:23

If I understand your scenario correctly, then it might be related to a timing issue, i.e. enquire.js is being loaded before media.match.js. I'm not sure how .wp_enqueue_script() works but you could try the following (based on this comment:

Modernizr.load([{
    // First test requirement for .matchMedia() polyfill
    test: window.matchMedia,
    nope: 'media.match.min.js'
  }, {
    // ...and then load enquire.js
    load: 'enquire.min.js',
    complete: function() {
      enquire.register(...);
    }
  }
]);

Side note: enquire.js doesn't depend on jQuery.

Polyfill for enquire.js in wordpress

1 Answers1