Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

How do I install and use enquire.js in a WordPress theme? WordPress

I want to use enquire.js ([[LINK href="http://wicky.nillia.ms/enquire.js/"]]http://wicky.nillia.ms/enquire.js/[[/LINK]] to load another script conditionally based on a media query.

Right now I'm doing this with Modernizr:

Modernizr.load({
test: Modernizr.mq('only screen and (min-width: 1000px)'),
yep : {
'yesResponse' : 'http://mysite.com/js/jquery.backstretchV1.min.js'
},
callback: {
'yesResponse' : function () {
jQuery.backstretch( "http://mysite.com/images/lory-background.jpg" );
}
}
});

How would I do this with enquire.js? I need a step-by-step for using it in WordPress by setting up a media query-based test like the one shown below, please, targeted toward non-programmers.

enquire.register("screen and (min-width:45em)", function() {
// load another script
});

2013-08-02 by kanjigirl

Answers (3)

2013-08-02

Arnav Joy answers:

you can see following article for how you can add javascript to wordpress

http://www.tipsandtricks-hq.com/how-to-add-javascript-in-a-wordpress-post-or-page-1845

kanjigirl comments:

I know how to add JS to WordPress, thanks. I need to see an example of how to use enquire.js in WordPress...

Arnav Joy comments:

firstly you have to add enquire.js to your's theme js folder and then a another file for writing js content



<?php

function my_scripts_method() {
wp_enqueue_script('jquery');
wp_enqueue_script('enquire', get_stylesheet_directory_uri() . '/js/enquire.js', array( 'jquery' ) );
wp_enqueue_script('custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' , 'enquire' ) );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

?>

in custom-script.js add something like


enquire.register("screen and (min-width : 769px ) and (max-width : 959px)", {
match : function() {
$(".slidingDiv_how").show();
},
unmatch : function() {
$(".slidingDiv_how").hide();
}
}).listen();


hope it will help you

Arnav Joy comments:

the php code will go in your theme's functions.php file

2013-08-02

Giri answers:

Here is a tutorial.

[[LINK href="http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/"]]http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/[[/LINK]]

kanjigirl comments:

I went through this tutorial, thanks. I need a WP-specific one.

2013-08-02

Hariprasad Vijayan answers:

Hi,

Check these threads

http://stackoverflow.com/questions/12777622/how-to-use-enquire-js
http://jsfiddle.net/WickyNilliams/3nXce/
http://www.armagost.com/zaccordion/a-responsive-example-using-media-queries/