Hi Andrea,

Hope you are doing good.

The menu slider is open the first time I open the the menu and later it stays closed. But I would like it to be closed initially too. How is it possible to achieve this. I am not really good at JavaScript so need your help.

Thank you very much.

Hi,
I really love this slide menu, but I have one issue:
I already use FontAwesome in my current project and I don't wanna add a second font language.
In your sample you are using glyphicon for the icons - and there seems to be no way to change these, is this right?

Hi,
I have downloaded your code & it worked perfect & all my filter condition are now on sidemenu.
but i observed that my Chosen Dropdown & chosed listbox does not work under sidemenu.

can you please guide me what is fix for that.

The js code that takes the element and wraps the element html around custom elements doesnt take into account the fact that dom elements may have event handler's attached to it.

The old code below uses this.html() and appends it to the new html. I have attached a fix to it below.

OLD CODE:

oldCode = this.html();

    newCode += "<div class=\"row\">\n";
    newCode += "    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg1-12\" data-side=\""+side+"\">\n"+ oldCode+" </div>\n";
    newCode += "</div>";
    newCode += "<div class=\"toggler\">\n";
    newCode += "    <span class=\"glyphicon glyphicon-chevron-right\">&nbsp;</span> <span class=\"glyphicon glyphicon-chevron-left\">&nbsp;</span>\n";
    newCode += "</div>\n";

    this.html(newCode);

NEW CODE:

    newCode += "<div class=\"row\">\n";
    newCode += "    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg1-12 panel-content\" data-side=\"" + side + "\"></div>\n";
    newCode += "</div>";
    newCode += "<div class=\"toggler\">\n";
    newCode += "    <span class=\"glyphicon glyphicon-chevron-right\">&nbsp;</span> <span class=\"glyphicon glyphicon-chevron-left\">&nbsp;</span>\n";
    newCode += "</div>\n";

    var wrapper = $(newCode);

    // copy the children to the wrapper.
    $.each(this.children(), function () {
        $('.panel-content', wrapper).append(this);
    });

    // Empty the element and then append the wrapper code.
    $(this).empty();
    $(this).append(wrapper);

    if (autoClose) {
        $(this).find(".toggler").trigger("click");
    }

    if (autoClose) {
        $(this).find(".toggler").trigger("click");
    }

you're script is really good and planning to include this script on a commercial website. What's your license terms? thanks :)

I use BootSideMenu in my project, and the error is as follow, how could I solve it?

angular.js:12221
TypeError: $(...).BootSideMenu is not a function
at HTMLDocument.eval (eval at (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:2:2620), :3:18)
at j (http://localhost:8081/SurveyTemplate/templates/4/assets/js/jquery.min.js:2:27136)
at Object.k.add as done
at n.fn.ready (http://localhost:8081/SurveyTemplate/templates/4/assets/js/jquery.min.js:2:29551)
at eval (eval at (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:2:2620), :2:15)
at eval (native)
at http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:2:2620
at Function.m.extend.globalEval (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:2:2631)
at m.fn.extend.domManip (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:3:22994)
at m.fn.extend.append (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:3:20507)

Hi Andrea,

Wonderful update loved every bit of it.

Just wanted to know if it is possible to click outside the menu slider which would auto close the menu?

Regards,
Vivek

When i use angularjs controller inside bootsidemenu div then it is not working.
I want to load content for bootsidemenu from angularjs controller.
It is not recognising any angularjs code, and when i look into console of browser the angular code is commented. Can anyone please provide me a solution?

Hi,
I really like this BootSideMenu, it's one of the best I've seen. It does everything I'd like it to except that it's built for a one page site. I'm trying to use it on a multi-page site with the correct tags staying selected but not getting it. Been trying to add show/hide active class which it will work correctly after I'm on the page and click another link. I'd like the correct tag to be selected when I navigate to its respective page. Could you please help by providing some code to guide me along?

Regards.

When you change the width of the window button disappears. This code how to remedy:

(function ( $ ) {


    var delay = (function() {
        var timers = new Map();
        return function(callback, ms, key) {
            var timer = 0;

            if(!key){
                key = 'default';
            }

            timer = timers.get(key);
            clearTimeout(timer);        
            timer = setTimeout(callback, ms);
            timers.set(key, timer);
        };
    })();

    $.fn.BootSideMenu = function( options ) {

        ....

        $( window ).resize(
            $.proxy(function(event) {
                var container = $(this);
                var listaClassi = $(container[0]).attr('class').split(/\s+/); //IE9 Fix - Thanks Nicolas Renaud
                var side = getSide(listaClassi);
                var containerWidth = container.width();
                var status = container.attr('data-status');

                delay(function() {
                    doSet(container, containerWidth, side, status);
                }, 700, container[0]);
            }, this)
        );
    };

    ....

    function doSet(container, containerWidth, sidebarSide, sidebarStatus){
        if(sidebarStatus=="closed"){
            if(sidebarSide=="left"){
                container.animate({
                    left:-(containerWidth+2)
                });
            }else if(sidebarSide=="right"){
                container.animate({
                    right:- (containerWidth +2)
                });
            }
        }
    }

}( jQuery ));

I believe Remote control methods are still not working. Calling .open or .close doesn't work. Come to find out it doesn't work in the example either: https://andrealombardo.github.io/BootSideMenu/examples/11-remote-control.html
The error when calling the method: "Uncaught TypeError: $(...).BootSideMenu(...).close is not a function"
Hope you can give me an idea of how to fix this since I love this BootsideMenu. It fits my needs perfectly.

Originally posted by @igorski88 in #24 (comment)

Hi Andrea,

Hello once again. I am just wondering if this feature which I had written long back has been fixed in the new version ?

This is not a problem with only 1 menu but if you want to use multiples it becomes a problem...

For example if you make both a left and right side menu. the last instance overrides all previous ones...

This seems to be due to the design of the plugin frame work. This post better explains what I mean:
https://stackoverflow.com/a/22976877/1815624

This other post has helped me:
https://stackoverflow.com/a/24359224/1815624

This plugin is cool. User interface is simple and flexible. Are there these feature in this plugin?

• Multi-level submenu (already found it, Nice!)
• Auto push body content when use large screen and push body content off when use small screen
• Assign arrow position from top, the arrow position always slightly move in mobile device when scrolling up and down, it's better if there is option to solve this problem
• The method to show, hide or toggle menu, that can be called from button or link
  ( already found the method #9 )

Thank you BootSideMenu

Hi Andrea Lombardo,
Thank you very much for your awesome work.
I did fork your work then update it for easy to reuse with bower.
Thanks to that, and here the repository result
I keep it with an MIT license and absolutely you're the author.
Thanks and happy coding!

How do you make the content of the sidebar not visible when the page is first loaded. Right now the content is visible on the page for a second before the sidebar is initialized.

Hi Andrea
I am currently integrating BootSideMenu for a flight reservation system. Within the BootSideMenu you can filter bookings by date (from ... to). I am using jQuery Datepicker as my calendar. But unfortunatly the calendar does not show up when I click the textbox. The field is recognized as the trigger field, as it has already received the class "hasDatepicker" dynamically on pageload. Just the calendar does not show up. I already tried different settings for z-index, but no success.

Do you have any idea on this?
Thanks for your help!

Bianca

Quick question: is there a way to toggle the sidebar (or just open it) via a separate link on the page? I'm trying to include an icon that will open it that is grouped with other icons, for users who may not notice the toggle on the side.

The side menu seems too long for me, can I modify its height and length

Hello,

First of all this is a wonderful menu slider. Loved every bit of it. But I am stuck in a small problem.

if(autoClose){
  $(this).find(".toggler").trigger("click");
}

I have implemented the BootSideMenu in my application but on every page refresh or moving on to a new page the slider curtains pop out and go back in. I would like the it to stay in the same place and not animate.

Can you please help me to achieve this. Thanks in advance.

I am using anuglar ng-repeat to show list of item in UL format but i am not able to do it. So please look to this matter.

Please, can you add package.json file to your repo?
Regards

Is there any way to expose open/close/toggle functionality through a method/function ?

Hi Andrea
Is there any possibility to have a (dark) content overlay while showing the BootSideMenu?

Greetings!
Bianca

Dear Andrea,
i would like to use your BootSideMenu, since it exactly fits what i need. However i was not able to control the width of the expanded sidebar. In you test.html this is nicely set to approx 1/4th of the screen. In my case, the expanded sidebar always goes over 2/3 of the screen. I would need exactly 1/2 of the screen. How can i control the width of the sidebar?