Close button inside Sidr about sidr HOT 13 CLOSED

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. :) )

from sidr.

Thank you rareyman, this helps me a lot!

from sidr.

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

from sidr.

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

from sidr.

@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.
});

from sidr.

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?

from sidr.

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

This worked for me

from sidr.

Hi, I tried to use the code

Click Me

from sidr.

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".

from sidr.

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!

from sidr.

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

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

Any idea as of why would be highly appreciated

from sidr.

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"
    });
});

from sidr.

@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");
});

from sidr.