Skip to content
Advertisement

Jquery – Opacity toggle and pointer action cancelling not working on mobile

I’m building a calorie calculator and ran into some issues. I want to filter based on certain diets. The elements that do not fit the description get greyed out, and become unclickable. All works fine on desktop, none of these however take effect on mobile. I have no idea why, I tried playing around with opacity, fadeout and css settings but nothing seems to do the trick.

here’s the js:

JavaScript

And the html:

JavaScript

And here’s a live link where I am trying to test it.

https://www.padthaiwokbar.com/Calorie/Hun/

Advertisement

Answer

The problem is : you have some elements on a top/z-index of the buttons like #vegetarianDescription, #glutenFreeDescription, #noAddedSugarDescription, #lactoseFreeDescription, #veganDescription with opacity and #dietDescriptionTexts as well .. you need to use display : none; for them or use z-index : -1 or max-width :0 when you trying to hide them

You can take a look at https://stackoverflow.com/a/273076/3385827

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement