[ZeshanMember]

Glad to hear we could help @spinejoint! 🙂

[Bobby BoslerParticipant]

A note to those who are interested, I think I may have solved the mobile card issue, at least to my liking. I took the code provided above and changed it slightly and it works great now! Try it out!

jQuery ( function($) {
 $(document).ready( function() {
  $('.x-card-outer').each(function(){
    var element = $(this);
    element.on('touchstart', function() {
      element.addClass('flipped');
    });
    element.on('tap', function() {
      element.removeClass('flipped');
    });
  });
 });
});

All I did was change the second item to “tap” instead of “touchend”. It works much better and feels more intuitive. Feel free, anyone, to improve on this solution!

[Rue NelModerator]

Hello @spinejoint,

Thanks for updating this thread! We’re just glad that the solutions works out for you.
We appreciate for letting us know.

Best Regards.

[lasallewebsiteParticipant]

I’m on 4.3.4 and I’m still having to tap twice on an iPhone 6 with iOS 9.2.1 to make a card flip.

[ZeshanMember]

Hi there @lasallewebsite,

Did you try the solution provided above? If you didn’t, please try adding both the jQuery and CSS code and see if the single tap works for you.

Thank you!

[lasallewebsiteParticipant]

I did try the solution above, however, this makes the cards flip when you swipe down the page and the user can miss the front of the card just by scrolling down. Is there a solution that makes the cards flip on a single tap?

[Bobby BoslerParticipant]

There is a script that supposedly lets you specify “tap” as opposed to “swipe”, but I haven’t had time to figure out how to use it. You can find it here: http://gianlucaguarini.github.io/Tocca.js/

If someone can figure out how to use this with cards, please post your solution here!

[Bobby BoslerParticipant]

You can view the demo for that script in action here: http://gianlucaguarini.github.io/Tocca.js/demo-fun.html

[lasallewebsiteParticipant]

We are specifying “touch” and “touchstart” using the scripts above, not swipe, yet they still flip on swipe. jQuery has mobile touch events built in.

[Bobby BoslerParticipant]

Right, but in my testing, the built in touch events that should work, don’t work without two taps. That’s why I was wondering if the Tocca.js would somehow bypass that first “activating” tap.

[RadModerator]

Hi there,

Swipe is considered touch too by other libraries, hence, the solution is unbinding other libraries so your library works as you expected.

You should use jQuery’s off() to unbind touchstart, touchend, touch or any touch functionality that is binded by another library. If you don’t, then it will still be executed along with your new bindings. That’s quite tricky, unbinding doesn’t always work that way since the binding happens later than your script. You may want to use $(document).ready, $(window).load, and setTimeout() to unbind and rebind your code.

Thanks!

[Author]

Posts