1

I am using the Sidr plugin to add a side-menu to my site when viewed on mobile devices. When a user clicks one of the side-menu items I want the menu to close and then animate down to the item they have selected. Essentially its a glorified internal links menu with a load of hash links to content with IDs.

Below is my current code for this purpose:

    $(".mobile-nav button").sidr({source: ".sidr" });
    $('.sidr nav ul').on('click', 'li a[href^="#"]', function(){
        $(".mobile-nav button").click();
        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });

        return false;
    });

This works fine when viewed on a desktop browser at say 400px wide. But when viewed on an actual mobile the .click() which effectively closes the Sidr menu does not work.

I believe this is because you can't "click" on mobiles but can anyone think of how I can get around this? Any help would be great.

Thanks

James Howell
  • 1,392
  • 5
  • 24
  • 42

2 Answers2

1

Use click touchstart:

$('.sidr nav ul').on('click touchstart', 'li a[href^="#"]', function(){
//rest of your code
}
Nishanth Matha
  • 5,993
  • 2
  • 19
  • 28
0

I was having a similar problem with sidr on mobile devices. Finally, I used 

$.sidr("toggle","sidr-0");

rather than

$( "#sidr-0" ).trigger( "click" );

and it worked. It is apparently something to do with document ready on mobile devices and mobile browser use of ajax page loads causing the click() to be fired to early. I hope this helps.

JimJSJr
  • 1
  • 2