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'); }
});
});
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:Side note: enquire.js doesn't depend on jQuery.