Close button inside Sidr

[benio178]

Did you notice, that if you try to put closing button inside Sidr id simply does not work, but works outside Sidr div. Any ideas or fixes?

[rareyman]

I was able to implement a close button inside of div#sidr:

<div id="sidr">
…
<button type="button" onclick="$.sidr('close', 'sidr');">Close</button>
</div>

(Yes, I know onclick attributes are no good—I just included it here for the sake of brevity. :) )

[Jessman5]

Thank you rareyman, this helps me a lot!

[rareyman]

Awesome. I am glad I was able to help out. :)

[ghost]

when closing, the sidr is closing very fast. Is there any way to delay it

[LanceTurri]

@rareyman This was exactly what I needed. Thank you very much. I used what you said in the form of an anchor inside the sidr menu itself.

<li><a href="#" onclick="$.sidr('close', 'sidr');return false;">Close Menu</a></li>

@malleswarchinta there is an option to change the speed of the animation, though I haven't had much luck getting it to work. Example:

$('#simple-menu').sidr({
    side: 'left',
    speed: 5000   //Value is in milliseconds I believe. Adjust this for the duration of opening and closing. Default: 200.
});

[solarta]

Sadly this way of closing the menu does not work for me, it doesn't respond. Doesn't give any errors either. Are there any other options?

[avyner]

@vanillaweb make sure that the Div ID 'sidr' matches the '$.sidr('close', 'sidr');' in the onclick function :)

This worked for me

[lan123]

Hi, I tried to use the code

Click Me

it does not work for me, it doesn't respond. When i click the button, it has this error "Uncaught TypeError: Cannot read property 'sidr' of undefined onclick". Can you please help? Many thanks.

[lan123]

dont know how to add the code. :( i tried to use the code from rareyman and LanceTurri. but no luck,it has this error "Uncaught TypeError: Cannot read property 'sidr' of undefined onclick".

[rareyman]

Bummer! It would be helpful if you can set up a test example on JsFiddle or show some source code so we can see what is going on.

My guess is you don't have jQuery connected properly on your page or perhaps some other generic Javascript errors.

Good luck!

[koteva]

Rareyman, here is a sample HTML code, that did not work on my site as well:

Menu

Close Menu

$(document).ready(function() {
$('#menu').sidr({name: 'imemenu',source: '#iammenu'});

Any idea as of why would be highly appreciated

[rareyman]

HTML

<div id="sidr"> <!-- this is the div holding the sidr; it has an ID of "sidr" -->
    …
    <a id="btnClose" href="#">Close</button> <!-- this is the close sidr button; it has an ID of "btnClose" -->
</div>

Javascript

$(document).ready(function() {
    $('#btnClose').click(function(){ // when 'btnClose' is clicked…
        $.sidr('close', 'sidr');  // close the div with the ID of "sidr"
    });
});

[davidlomidze]

@koteva I know it's late but for future readers, @rareyman wanted to add that if you want to implement close button

1. You need to have loaded html

<div id="sidr"><ul>... YOUR MENU ...</ul><a id="closeButton">Close</a></div>

2. You should not use source property in your .sidr() initialization, otherwise plugin will erase your div#sidr (with close button inside) and fill with source content, which is not cool at all

So the fastest solution I can imagine right now using only JS is to build div#sidr with close button inside, prepend cloned ul of your source menu and then initialize .sidr() without source property

// build div#sidr with close button inside
var sidrDiv = $('<div id="sidr"><a id="closeButton">Close</a></div>');

// fill div#sidr with source menu, using jquery .clone() method
sidrDiv.prepend( $("#yourSourceMenu > ul").clone() );

// insert our div#sidr into DOM
$("body").prepend( sidrDiv );


// things under you would do anyway

// initialize sidr
$("#yourMenuOpeningButton").sidr({
   name: "sidr" // same as our div ID
});

// and finally bind .sidr close functionality on our #closeButton click event
$("#closeButton").on("click", function() {
   $.sidr("close", "sidr");
});