Toogle not opening on first click about sidr

[zbabtkis]

I'm having this same problem. I'm calling a function called sidrSetup() when the window is resized which checks to see if the window is less than 960px and then calls .sidr() on my menu link.

[artberri]

I will try to reproduce it and to solve it during this weekend.

[josholdham]

Thanks - much appreciated.

Let us know if you crack it.

[josholdham]

Still can't crack this the proper way, but I came up with a cheap dirty hack: it's a pretty obvious and inelegant solution but thought I'd post it.

1. Set a variable (e.g. counterHack) to 0.
2. In the on-complete function, which does activate first time even if the toogle itself doesn't, add a decision layer in that checks if the counterHack === 0, and if so adds one, and then runs the toogle function as you tried originally.
3. The next time the on-complete function is run (which will actually be right after this, as the toogle function you activate from within the decision pathway will have this same on-complete call), the else side of the decision will be activated, so this is where you need to put any code you want to execute genuinely on a successful toogle event.

That seems over-explained - it's actually very simple and hopefully will help.

If anyone finds a better solution let me know though. Thanks.

[zbabtkis]

Thanks a lot man -- I'll use this for now and post here if I come across a better solution.

[chrismadrigal]

@josholdham can you give a code example? Thanks

[DWboutin]

I got it! :D Simple, add

$sideMenu.hide(); //at line 195.

The problem is that the menu .is(':visible') at start and doesn't go trought the condition

if('open' === action || ('toogle' === action && !$menu.is(':visible'))) { ... } //at line 71 

[betoflakes]

I tried adding $sideMenu.hide(); but still not working...

[DWboutin]

Check this file
http://www.soluvox.ca/wp-content/themes/soluvox/javascripts/jquery.sidr.min.js
It worked for me. Maybe it's the line 195 who aren't the exact line

[charly83]

I have the same problem, but when I use your file the menu works only one time.

[DWboutin]

Check this website http://soluvox.ca/ i uses it and it works well. Maybe it can help you!

[charly83]

I can not find the error. :(
My code for the menu: http://jsfiddle.net/Db6hs/

EDIT: I found it in the css file... display: none; :)

[ryanbotha]

@artberri I am having the same issue with having to click/tap the menu button twice for the sidr menu to open. Is there a solution?
I have looked through all the forums and not one solution.
I tried adding the $sideMenu.hide(); as suggested by @DWboutin , but that seemed to work on a previous version when the code had some typos.
Great plugin :)
...but kinda desperate.

[aaron-niemi]

I posted a potential solution here: #133
It might work for you all?
HTH
-Aaron

[MichelMathijssen]

I used this:

< style>
#mobile-header {
display: none;
}

@media only screen and (max-width: 767px){
#mobile-header {
display: block;
}
}
</ style>

< script>
$(function() {
$('#responsive-menu-button').sidr({
name: 'sidr-main',
source: '#navigation'
});
jQuery.sidr('close', 'sidr-main');
$(window).resize(function () {
jQuery.sidr('close', 'sidr-main');
});
});
</ script>

< div id="mobile-header">
< a id="responsive-menu-button" href="javascript:void(0)">Menu</ a>
</ div>

Solved the double click and does the menu disapeare when resizing.
No need to adjust the source js file.

Not tested on mobile devices yet...

The only solution that works for me is closing sidr after its initialization. So code looks like:
$(document).ready(function() {
$('#sidr-menu').sidr();
$.sidr('close', 'sidr');
});

Hope it will help someone

[biyanpasau]

Script from @DWboutin worked. Thank you!

[sham2bam]

@MichelMathijssen this worked like a charm—thanks man

[maorb]

I had similar issue with sidr on my android device (on chrome mobile debugger obn desktop the bug didn't reproduced), when I click the link to open the sidr, it always redirected me back to homepage
I tried @DWboutin code, and that bug also disappered! thank you very much!

[maorb]

Well, when using @DWboutin version of code, it appears that the onOpen and onClose events are missing, how can the two be merged?

[wpexplorer]

Just make sure whatever you named the sidebar to hide it with CSS:

// JS
$( '.mobile-toggle-button' ).sidr({
name: 'sidr-main',
source: '#navigation'
});

/*css*/
#sidr-main { display: none; }

[artberri]

@wpexplorer gave you the proper answer. You need to hide the sidebar on CSS.