Using Enquire.js and Media Queries Effectively for Jquery Animations

Question

Hi i've been trying to get my head around how to use enquire.js. I am using .mouseenter(function() to activate the functions .show and .hide. But when you view it on a tablet and mobile .mouseenter becomes redundant. I want to tell the jquery to show the div once the screen width reaches my media query.

 @media only screen and (min-width : 769px ) and (max-width : 959px) 

Below is an example.

Here is my jquery:

$(".slidingDiv_how").hide(); 
          $(".show_sub").show(); 

          $('.show_sub').mouseenter(function(){
          $(".slidingDiv_how").slideDown();
            return false;
          });
            });

Here is my html

<div class"right-wrapper"><!--How wrapper -->
                                <div id="how_we" class="show_sub1" style="cursor: hand; cursor: pointer;">
                                    <h1><a href="#">How We Work:</a></h1>
                                        <div class="slidingDiv_how">
                                            <p class="show_sub1">The heat of the vertical rays of the sun was fast making our horrible prisons unbearable, so that after passing a low divide, and entering a sheltering forest, we finally.</br> 
                www.dochouse.co.uk</p>

                                        </div> <!-- end slidingdiv2 -->

I have read the documentation and don't really understand which part to put were. Any help would be much appreciated.

Answer 1

Hope this helps, pretty much copied straight from the docs

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

Note change for latest version

v2.0.0 (2013-04-17)

listen and fire are no longer needed as of v2, and have been dropped from the API. Removing any usage of them in your code is all that is required. Also, as enquire no longer relies on resize events you must make sure your polyfill supports matchMedia.addListener. Details of this can be found in the legacy browser section.