Flip effect condition

Question

So I’m trying to figure out how to make a click effect work on mobile. I want the hover effect on desktop/laptop and the click effect on mobile.

Currently the hover effect is implemented. As you can see on my website's homepage: http://otownsend.ca/

What I need to figure out is how to implement the click effect at a certain screen size (e.g. 800px). So instead of the card flipping as soon as the curser hovers over ".flipper", the click effect would require the user to click ".flipper" in order for the card to flip. This would require me to place in a conditional statement - however, it isn’t working. I’m not so familiar with JQuery so it has been quite the challenge. This is what I currently have:

if (window.matchMedia('(max-width: 800px)').matches)
{
    $('.flipper').click(function (e) {
  $(this).toggleClass('flipped');
});
}

".flipper" is the parent element to the front and back. All the css and html is the same. I just need to integrate this JQuery stuff and then I’m set.

Any suggestions would be appreciated :)

Answer 1

You can use removeClass() and addClass(). I've also changed your click event with .on('click'). I recommend you to use it that way. Also, add the code in $(document).ready(). I hope this is what you need. If not, please let me know and I will try a different approach:

$(document).ready(function() {
  $('.flipper').on('click', function(e) {
    $('.flipped').removeClass('flipped');
    $(this).addClass('flipped');
  });
});

Regarding matchMedia you can see by running the test snippet that it works:

if (window.matchMedia('(max-width: 800px)').matches) {
  $('.flipper').css('color', '#f00');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='flipper'>
  testing matchMedia
</p>

Also, I've seen that in your code, you are doing something wrong. You are adding a <script> tag which contains jQuery source, inside another <script> tag(or you forgot to close the </script> tag). This is wrong. Please correct this:

<script type="text/javascript">
    $(function(){
      $(".flipper").flip({
        trigger: "hover"
      });
    });
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

To this:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
  $(function() {
    if (window.matchMedia('(min-width: 801px)').matches) {
       $(".flipper").flip({
         trigger: "hover"
       });
    }
 });
</script>

Notice the media query added for desktop only, from 801px up.

As a suggestion, I would like to recommend you to use a library like Modernizr for the media query part. Using Modernizr's way of using media queries, you won't have to refresh the page to see the changes like when using matchMedia. This also helps when you switch from portrait to landscape on mobile devices. You can read the docs about Modernizr media queries here.