-3

I have a calorie calculator working here:

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

Thing is, it works fine, but when I try to filter on a calorie with an iphone 6 / 6 plus, it registers my click events in the wrong place. Meaning I can't unfilter my diet preferences.

Any idea as to what might be causing this?

Pbalazs89
  • 170
  • 12

1 Answers1

3

I've had a little look into your code and my first suggestion would be using 

event.preventDefault();

inside your .diet-filter-button on click function because the dropdown menu items are anchor tags.

Hope this helps. P.s. I really like the visual design!

EDIT: Please see comments - the solution was actually CSS related, due to :hover being triggered by touch/click events on mobile devices.

Ffion
  • 559
  • 3
  • 16
  • Hi, thanks for the tip! Unfortunately, it did not seem to do the trick, but maybe I'm implementing it wrong. Did you mean putting $(this).event.preventDefault(); at the end of the click function? @Ffion – Pbalazs89 May 07 '18 at 12:20
  • You will need to pass 'event' in to the function `function(event)` in order to use it, and it should go at the start. Please also see the following question regarding virtual click events on touch devices: https://stackoverflow.com/questions/21776570/jquery-mobile-click-event-doesnt-work – Ffion May 07 '18 at 12:30
  • 1
    I've just looked again on my mobile and it seems that the filtering itself is working, but the highlighting class is not being turned off. So the problem may be relating to css rather than your click event. I am new to stackoverflow so I'm not sure if posting multiple comments like this is ok, but I wanted to keep you updated. I will look into it further shortly. – Ffion May 07 '18 at 12:40
  • 1
    Sorry, the filtered class _is_ being removed, but the background colour is not being changed back to white as there seems to be an overriding rule setting it to turquoise. – Ffion May 07 '18 at 12:46
  • Ahh, thanks, I'll have a look at it and get back to you. – Pbalazs89 May 07 '18 at 13:03
  • Yup, that was it. The :hover was registering as a click on mobile devices and that's what caused it. Thanks for the help and I'm happy you like it :) @Ffion – Pbalazs89 May 07 '18 at 13:09