andrealombardo / bootsidemenu Goto Github PK
View Code? Open in Web Editor NEWBootSideMenu is a jQuery plugin to easily build a sliding menu in a Bootstrap based application.
Home Page: https://andrealombardo.github.io/BootSideMenu/
BootSideMenu is a jQuery plugin to easily build a sliding menu in a Bootstrap based application.
Home Page: https://andrealombardo.github.io/BootSideMenu/
This plugin is cool. User interface is simple and flexible. Are there these feature in this plugin?
Thank you BootSideMenu
you're script is really good and planning to include this script on a commercial website. What's your license terms? thanks :)
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!
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.
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.
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
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.
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.
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)
Is there any way to expose open/close/toggle functionality through a method/function ?
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
The side menu seems too long for me, can I modify its height and length
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,
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.
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 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
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\"> </span> <span class=\"glyphicon glyphicon-chevron-left\"> </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\"> </span> <span class=\"glyphicon glyphicon-chevron-left\"> </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");
}
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?
Please, can you add package.json file to your repo?
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 ));
Hi Andrea
Is there any possibility to have a (dark) content overlay while showing the BootSideMenu?
Greetings!
Bianca
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?
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?
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.
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 ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.