CODEWITHSUNDEEP
javascriptjquery
rob.m
rob.m

Reputation: 10571

How to speed up jQuery on click on the iPad?

This bit of code works fine, but on the iPad it is a bit slow the opening. Basically I have a set of divs with class .item and when I click on one of them I need to add a class called .is-expanded and open the box while closing the others if any was opened. The boxes have an image, on click it should be fast to hide it and open the selected box. This works fine on the computer while on the iPad the whole thing is a bit slow delays. Is there anyway to make it quicker or am I doing anything which makes it slow?

Html:

<div class="item">
  <img .. />
  <div class="wrapVideo">..</div>
</div>
<div class="item">
  <img .. />
  <div class="wrapVideo">..</div>
</div>
<div class="item">
  <img .. />
  <div class="wrapVideo">..</div>
</div>

Jquery:

$(document).on( 'click', '.item:not(.is-expanded)', function() {
  $(".item").removeClass('is-expanded');
  $(".wrapVideo").css("display", "none");
  $("img").css("display", "block");
  $(this).addClass('is-expanded');
  $("img", this).css("display", "none");
  $(".wrapVideo", this).show();
);

Upvotes: 0

Views: 411

Answers (3)

Dominik Goltermann
Dominik Goltermann

Reputation: 4306

That is not a problem with your code but touch events have a 300ms delay because you could be doiung a double tab or something else. Use Fastclick.js to eliminate that delay

Upvotes: 4

AbdealiLoKo
AbdealiLoKo

Reputation: 3317

I am guessing your problem isn't that the animation is clunky, rather it takes time from when you touch the .item and it opening.

You can see a solution here : Eliminate 300ms delay on click events in mobile Safari

The iPad assumes a 300ms delay after you tap it. It isn't slow because of your code. This is solved in Android phones using

<meta name="viewport" content="width=device-width, user-scalable=no">

And on windows phones using : 

html {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

Apple's safari doesnt have a solution as of yet

Upvotes: 2

Tuncay G&#246;nc&#252;oğlu
Tuncay G&#246;nc&#252;oğlu

Reputation: 1767

That is a known and often tackled problem. There are several solutions here on this question:

Replace all click events with tap in jquery mobile to speed up

Upvotes: 0

Related Questions