How to speed up jQuery on click on the iPad?

Question

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();
);

they are loaded dynamiccally, not fixed numbers – rob.m Jan 14 '15 at 08:13 — rob.m, Jan 14 '15 at 08:13
Why not `$(".is-expanded").removeClass(".is-expanded")` – shevski Jan 14 '15 at 08:14 — shevski, Jan 14 '15 at 08:14

score 4 · Accepted Answer · answered Jan 14 '15 at 08:20

4

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

answered Jan 14 '15 at 08:20

Dominik Goltermann

4,276
2
26
32

it talks about Chrome and IE but what about Safari iPad? – rob.m Jan 14 '15 at 08:23

score 2 · Answer 2 · edited May 23 '17 at 12:10

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

score 0 · Answer 3 · edited May 23 '17 at 10:24

0

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

edited May 23 '17 at 10:24

Community

1
1

answered Jan 14 '15 at 08:15

Tuncay Göncüoğlu

1,699
17
21

How to speed up jQuery on click on the iPad?

3 Answers3