CODEWITHSUNDEEP
javascriptandroidjqueryhtmlios
DIM3NSION
DIM3NSION

Reputation: 1761

Javascript not firing properly on Mobile - iOS / Android

I have a full screen overlay menu that appears on mobile.

Mobile Menu

All of the sections on this menu appear in the DOM on that page, I want to be able to click the link and it scroll down to the relevant ID element. This is currently working on desktop devices, but on iOS / Android the script isn't firing.

  $('.on-page-item').click(function(event) {
       var $this = $(this);
       var href = $this.attr('href');
       var changedhref = href.substring(1);
       var target = changedhref;
        $( "button.overlay-close" ).trigger( "click" );
        $( "div.demo" ).scrollTop(changedhref);
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
       classie.remove( overlay, 'close' );
  });

Would you know the reason that this isn't firing?

Thanks for your help.

Upvotes: 1

Views: 314

Answers (2)

Abdullah Rasheed
Abdullah Rasheed

Reputation: 3752

You can bind for both desktop and mobile like this:

$('.on-page-item').on('click touchstart', function(event){
  //your code here
});

Also MDN has a great reference for your future touch events that I bookmarked:

Touch Events - Web API Reference

Upvotes: 0

Jai
Jai

Reputation: 74738

If you bind any event with .on() method, then you can bind for both devices like: 

$('.on-page-item').on('click touchstart', function(event) {

click: for desktop devices
touchstart: for mobile devices

Upvotes: 3

Related Questions