jQuery click function slow (lagging) on mobile

Question

So i have this click function that toggles a dropdown-menu, but on Smartphones this is slow and not smooth.

Is there any other way to make this dropdown work with a smooth transition on any mobile device using jQuery?

(I've heard about "vclick" but couldn't find out how to make this work.

$j('.dropdown-menu').click(function() {
$j('.dropdown-menu').not(this).children('ul').slideUp("slow");
$j(this).children('ul').slideDown("slow");
});


$j('.dropdown-menu').blur(function() {
$j('.dropdown-inside').hide('slow', function() {
});
});

`vclick` is a custom event only available in JQM framework. – Omar Jul 06 '14 at 18:57 — Omar, Jul 06 '14 at 18:57

score 3 · Answer 1 · answered Jul 06 '14 at 17:27

3

Try the click on Id rather then class. Class is always slow. So suppose if your dropdown has id like 'myDropdown' then do it like

$j('#myDropdown').click(function(){
    //your code here
});

answered Jul 06 '14 at 17:27

Ashish Rajput

1,489
1
11
20

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

The first part can be simplified to this:

$j('.dropdown-menu').click(function() {
    $j('.dropdown-menu').not(this).children('ul').slideToggle(2000);
});

Also, try wrapping the hidden content in a div and giving it a width. When you click on the div, it actually pulls it out of position to measure it before quickly replacing it because JQuery doesn't know the dimensions of your hidden div until it's displayed. So . This could make the whole animation laggy!

Another suggestion:

ID is faster than class. Part of the reason is that ID is supposed to be unique, so the API stops searching after the ID is found in the DOM.

If you must use a class or attribute selector, you can improve performance by specifying the optional context parameter.

Credits

Thanks! seems to be a bit faster now. Giving the hidden div a width makes the transition even on the desktop version look much better! I'm afraid I need to find another way of coding this, because it is still not the desired result. — user3332274, Jul 06 '14 at 19:28

score 2 · Answer 3 · answered Dec 16 '14 at 15:58

Cause
According to Google :
...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

Solution
1. Use fastclick.js to get rid of this 300ms lag
https://github.com/ftlabs/fastclick
2. Use application cache to speed up the load
https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

jQuery click function slow (lagging) on mobile

3 Answers3