1.1.1 Perfect. 1.2.1 Broken in android

[kiddac]

Having used sidr(1.1.1) on a previous project and working fine on all devices tested, IE, Chrome, firefox, safai, opera, io6, iphone 4, android 2.3, android 4.2 I came across problems when I tried to use it for a second project.

The newest version 1.2.1 and also the sidr-master files just didn't work like the old one. Fine on the desktop, unusable on my Android (4.2.2).

The problem is the side menu is used to link to anchor tags in my one page website. I therefore have the following code to close the sidr menu on a click.

$(window).resize(function(){
$.sidr('close', 'sidr-main');
});

$(document).click(function () {
$.sidr('close', 'sidr-main');
});

Now the problem I was having is if I click on the menu icon, the sidr menu opens and then closes straight away. For some reason it is registering a click on the top item of my list.

i.e if my top item is "about" it is closing the menu and jumping straight to the about section with out me clicking on anything.

After pulling my hair out for hours changing my code, disabling all other script calls etc etc, I decided to try the old version 1.1.1. And all is working perfectly again.

Therefore, is this something that has been modified in version 1.2.1 or is it an android bug that is auto selecting this top item.

[chennecke]

I can confirm this problem. In my case also the second menu item can be "auto-selected" since the menu item height is smaller than the height of the menu button.

[wolf128058]

I can confirm this problem, too.
Feels strange, because in the moment I click the menu-toggle the link cannot be reached (is disabled by "display: none")

[godsdog]

Have the same problem! On iOS it is working fine on Android the bug occurs! Hope there is coming a fix... Maybe it has something to do with: ontouchstart ?!

// Edit
This code is wrong for android:

if('ontouchstart' in document.documentElement) {
$this.bind('touchstart', function(e) {
var theEvent = e.originalEvent.touches[0];
this.touched = e.timeStamp;
});
$this.bind('touchend', function(e) {
var delta = Math.abs(e.timeStamp - this.touched);
if(delta < 200) {
e.preventDefault();
methods.toggle(name);
}
});

FIX:
I inserted the following (no touch event support anymore):

if('ontouchstart' in document.documentElement) {

     $this.click(function(e) {
            e.preventDefault();
            methods.toggle(name);
          });
        }
        else {
          $this.click(function(e) {
            e.preventDefault();
            methods.toggle(name);
          });

It is also possible to drop the hole if statement. Should be fixed in a better way. But this is now working in Android and iOS.

[adamobrien1882]

This issue was causing me some grief also, I fixed it by using the callbacks to hide and show the menu

$('#responsive-menu-button').sidr({
    name: 'sidr-main',
    source: '.menu',
    onOpen: function() {
        // Enable menu after 0.5secs
        $('#sidr-main .sidr-inner').delay(500).show('fast');
    },
    onClose: function() {
        // disable menu
        $('#sidr-main .sidr-inner').hide();
    }
});

and hiding the menu in the css to start with

#sidr .sidr-inner {
    display: none;
}

[raphael-m]

I can confirm that removing the condition checking for ontouchstart solves the problem in Android. I did not see any side effects.

Instead of

if('ontouchstart' in document.documentElement) {
    $this.bind('touchstart', function(e) {
        var theEvent = e.originalEvent.touches[0];
        this.touched = e.timeStamp;
    });
    $this.bind('touchend', function(e) {
        var delta = Math.abs(e.timeStamp - this.touched);
        if(delta < 200) {
            e.preventDefault();
            methods.toggle(name);
        }
    });
}
else {
    $this.click(function(e) {
        e.preventDefault();
        methods.toggle(name);
    });
}

Use

$this.click(function(e) {
    e.preventDefault();
    methods.toggle(name);
});

What is the purpose of this condition?

[artberri]

Preparing a new version with a fix for this https://github.com/artberri/sidr/tree/reborn