better understanding of jquery with enquire.js

Question

I'm currently trying to improve my overall understanding of jQuery and have a problem that I think will help me achieve that. I'm looking into enquire.js to enhance a responsive site.

Here's the (simplified) html for a small section detailing the services of a company:

<section id="services">
  <article id="services-coaching" class="closed">
    <div class="image">
      <?php include("library/images/service-coaching.svg"); ?>
      <div class="fallback">
    </div>
    <div class="text">
      <?php the_content(); ?>
    </div>
  </article>
  <article id="services-workshops" class="closed">
    <div class="image">
      <?php include("library/images/service-workshops.svg"); ?>
      <div class="fallback">
    </div>
    <div class="text">
      <?php the_content(); ?>
    </div>
  </article>
  <article id="services-courses" class="closed">
    <div class="image">
      <?php include("library/images/service-courses.svg"); ?>
      <div class="fallback">
    </div>
    <div class="text">
      <?php the_content(); ?>
    </div>
  </article>
</section>

jQuery for screens smaller than 47em:

// Services - mobile
    $('#services-coaching, #services-workshops, #services-courses').waypoint(function(direction) {
        if (direction === 'down') {
          $(this).addClass('open').removeClass('closed');
        }
        else {
          $(this).addClass('closed').removeClass('open');
        }
    }, { offset: 100 });

Here I'm using waypoint.js to trigger a CSS transition on an SVG image by changing the class - everything is done progressively with CSS.

For larger screens the CSS hide's the text (.text) on .closed and reveals it when the article is clicked (changing the class to .open) as well as triggering the animations.

// Services - large screen 
$('#services article').click(function() {
    $(this).addClass('open').removeClass('closed');
});

This is where my understanding of jQuery needs improving! I know that I can use these jQuery objects with enquire.js to essentially match and unmatch them depending on screen size, something like this:

jQuery(document).ready(function($) {

  enquire.register("screen and (min-width: 47.0625em)", function() {

    match : function() {
        // enable 'waypoint' jQuery object
        // disable 'click' jQuery object
    },
    unmatch : function() {
        // disable 'waypoint' jQuery object
        // enable 'click' jQuery object
    }

  });

});

But I don't know how to best create the objects so that they can be used in this way. I started looking into jQuery fundamentals but it has not helped me :(

UPDATE: ~~Trying but failing~~

Thought .bind / .unbind might work. Tested this on the click event initially but ~~doesn't work~~ I was doing it wrong. Following works for click:

enquire.register("screen and (min-width: 47.0625em)", {
  match : function() {
    $('#services article').bind('click', function() {
      $(this).addClass('open').removeClass('closed');
    });    
  },
  unmatch : function () {
    $('#services article').unbind('click');
  }
});

Getting there!

Mr Jonny Wood · Accepted Answer · 2013-08-01T12:22:52.367

Okay, so I haven't improved my understanding of jQuery objects and functions as I'd have liked, but I have got this particular problem solved and working.

My main issue was that the 'waypoint' and 'click' functions were both active once the window was resized. I knew the solution was to cancel out each one where it was not required but I didn't know how to do it. I do now…

jQuery(document).ready(function($) {

  enquire.register("screen and (max-width: 47em)", {

    match : function() {
      $('#services-coaching, #services-workshops, #services-courses').waypoint(function(direction) {
          if (direction === 'down') {
            $(this).addClass('open').removeClass('closed');
          }
          else {
            $(this).addClass('closed').removeClass('open');
          }
      }, { offset: '50%' });
    },
    unmatch : function () {
      $('#services-coaching, #services-workshops, #services-courses').waypoint('destroy');
    }
  });

  enquire.register("screen and (min-width: 47.0625em)", {

    match : function() {
      $('#services article').removeClass('open');
      $('#services article').bind('click', function() {
        $(this).addClass('open').removeClass('closed');
      });
    },
    unmatch : function () {
      $('#services article').unbind('click');
    }

  });

});

bind/unbind click event and waypoint('destroy') did the trick! :D

better understanding of jquery with enquire.js

1 Answers1