ctrlmaniac / sidebar Goto Github PK
View Code? Open in Web Editor NEWSidebars for web apps
Home Page: https://codepen.io/collection/MgvLea
Sidebars for web apps
Home Page: https://codepen.io/collection/MgvLea
Here there. Thanks for the lib =) I have been using this successfully in my html for several months.
Now I am wondering if I can run this within another js function. Here I have an ajax call and I want to fire the sidebar as part of the ajax success function.
The thing that I am clicking on is within a canvas - so there is no html element for the required trigger.
...
success: function (response) {
console.log("AJAX call NeedEmployeeData made successfully!")
$( "#sidebar-main" ).simplerSidebar( {
attr: "sidebar-main",
selectors: {
trigger: "", // <--- problem?
quitter: ".close-right-panel"
},
animation: {
easing: "easeOutQuint"
},
mask: {
display: true
}
});
...
Funny thing is... it works on the first click... kind of. But it appears on the left with no mask. It does ease out though - so the quitter seems to work! Subsequent clicks don't slide it back onto the page from the right side of the window, but I can see it over there if I try to scroll off the page.
First click img https://imgur.com/a/n85PEl7
I used the basic example with the sidebar-wrapper, but when the sidebar opens, the mask is over it. I made just a few simple links in the sidebar, but the cursor does not change when I hover them and onclick the sidebar simply closes, the links are not clicked...
This is the code I use:
$('#sidebar').simplerSidebar({
top: 0,
opener: '#toggle-sidebar',
attr: 'simplersidebar',
animation: {
easing: 'easeOutQuint'
},
sidebar: {
align: 'left',
width: 300,
closingLinks: '.close-sidebar',
}
});
<div id="sidebar">
<div id="sidebar-wrapper" class="sidebar-wrapper">
<table width="100%" height="100%" border="0" class="close-sidebar">
<tr>
<td align="center" valign="middle">
<a href="http://google.com" target="_blank">google</a><br /><br />
<a href="http://google.com" target="_blank">google</a><br /><br />
<a href="http://google.com" target="_blank">google</a><br /><br />
<a href="http://google.com" target="_blank">google</a>
</td>
</tr>
</table>
</div>
</div>
But in general, the z-index of the sidebar element seams to be messed up. Some of the page elements are over it even though they have a smaller z-index.
I am using it inside a Meteor app, and this may have something to do with it :(
For example, a new mask div is created over and over everytime I open the page where the sidebar should exist.
I would love to see this in action without too much hassle (i.e. without doing git clone
, instead just a link to something like http://jillix.github.io/jQuery-sidebar/), ideally the link is somewhere at the top of README.md
.
init opened does not trigger the mask.
To avoid issues, set top to the fixed height of the navbar.
github
npm
- npm install simpler-sidebar
bower
- bower install simpler-sidebar
doc
folderdoc
foldereditorconfig
plugin in my editorjscs
plugin in my editorjshint
plugin in my editorgrunt lint
to test if I made some mistakesgrunt build
to apply changesdemo
folder on my computerWhen placing any other Javascript (in this case Bootstrap's collapse) with animations in the side panel, taking an action that fires any animation closes the simpler-sidebar
Place any jQuery driven animation in the simpler-sidebar
Only clicking on the quitter
selector or on the mask should close simpler-sidebar
Actually you can trigger only with the given selector :
$('#searchbar-right').simplerSidebar({
opener: '#oce-toolbar-find',
sidebar: {
align: 'right', //or 'right' - This option can be ignored, the sidebar will automatically align to right.
width: 200, //You can ignore this option, the sidebar will automatically size itself to 300px.
closingLinks: '.close-sidebar' // If you ignore this option, the plugin will look for all links and this can be buggy. Choose a class for every object inside the sidebar that once clicked will close the sidebar.
},
mask:{
css:{
opacity :0
}
}
});
There`s any method to trigger something like ? $.simplerSidebar.show(); or .hide(); ?
I used the basic example with the sidebar-wrapper, but when the sidebar opens, the mask is over it. I made just a few simple links in the sidebar, but the cursor does not change when I hover them and onclick the sidebar simply closes, the links are not clicked...
This is the code I use:
$('#sidebar').simplerSidebar({
top: 0,
opener: '#toggle-sidebar',
attr: 'simplersidebar',
sidebar: {
align: 'left',
width: 300,
closingLinks: '.close-sidebar',
}
});
<div id="sidebar">
<div id="sidebar-wrapper" class="sidebar-wrapper">
<table width="100%" height="100%" border="0" class="close-sidebar">
<tr>
<td align="center" valign="middle">
<a href="http://google.com" target="_blank">google</a><br /><br />
<a href="http://google.com" target="_blank">google</a><br /><br />
<a href="http://google.com" target="_blank">google</a><br /><br />
<a href="http://google.com" target="_blank">google</a>
</td>
</tr>
</table>
</div>
</div>
But in general, the z-index of the sidebar element seams to be messed up. Some of the page elements are over it even though they have a smaller z-index...
I am using it inside a Meteor app, and this may have something to do with it :(
For example, a new mask div is created over and over everytime I open the page where the sidebar should exist.
Is this sidebar compatible with jQuery 2.1.4 ?
github
npm
- npm install simpler-sidebar
bower
- bower install simpler-sidebar
dist/jquery.simpler-sidebar.js
file is the same as the latest version
bower install simpler-sidebar -F
to force latest version on conflictdoc
folderdoc
foldereditorconfig
plugin in my editorjscs
plugin in my editorjshint
plugin in my editorgrunt lint
to test if I made some mistakesgrunt build
to apply changesdemo
folder on my computerI have two sidebars, only in the mobile sized version of my website, and the one on the left is fine but the one on the right does not hide completely no matter what I do
Javascript: (Jquery 3.1.1)
var $rightSidebar = $(".login-bar"), $leftSidebar = $(".mobile-nav-bar"); optSidebarLeft = { align: "left", top: 0, sidebar: { width: 240, }, selectors: { trigger: ".sandwich", quitter: ".quitter" }, animation: { easing: "easeOutQuint" }, mask: { display: false } }, optSidebarRight = { align: "right", top: 0, sidebar: { width: 240, align: "right", }, selectors: { trigger: ".login-btn", quitter: ".quitter" }, animation: { easing: "easeOutQuint" }, mask: { display: false } }; $rightSidebar.simplerSidebar(optSidebarRight); $leftSidebar.simplerSidebar(optSidebarLeft);
HTML:
<div class='mobile-nav-bar'> <a class='quitter' style='font-size:35px;margin-left:6%;margin-top:5px;width:240px;' href='#'>x</a> <div class='wrapper'> <a class='quitter' href='index.html'>HOME</a> <a class='quitter' href='request.html'>REQUEST QUOTE</a> <a class='quitter' href='contact.html'>CONTACT</a> <a class='quitter' href='about.html'>ABOUT US</a> </div> </div> <div class='login-btn'>Login</div> <div class='login-bar'> <a class='quitter' style='font-size:35px;margin-left:6%;margin-top:5px;width:240px;' href='#'>x</a> <div class='wrapper'> <form action="login.php" method="post"> <div class='login_text' style='display:inline;'>My Portal Login</div> <input type='text' name='username' required class='input_box' placeholder="Username" maxlength="64"> <input type='password' name='pass' required class='input_box' placeholder="Password" maxlength="64"> <input type="submit" name="submit" value="Login" class="button"> </form> </div> </div>
CSS:
.nav_bar td { width:25%; padding:0; } table{ width:100%; border-collapse: collapse; } div .s_piece { width: 35px; height: 5px; background-color: white; margin: 7px 0; } div .sandwich { width: 35px; height:36px; margin: 5px 0 0 15px; display: none; float:left; } .mobile-nav-bar{ background: #0e212a; } .wrapper { margin: -5% 0 0 10%; position: relative; width: 100%; height: 300px; overflow: auto; } .mobile-nav-bar a { display: block; color: white; font-size: 20px; font-weight: 700; text-decoration: none; margin: 0 50px 30px 0; } .mobile-nav-bar a:hover { color: #0dcfdb; } .login-btn { right:0; position:fixed; color:white; font-size:24px; margin-top:4%; display:none; } .login-bar { position: relative; right:-300px; background: #0e212a; font-size:24px; margin: 0 50px 30px 0; }
Right sidebar should hide completely.
I can force the sidebar to hide completely with javascript, but that only works the first time and its heavy
github
Blank page
Follow the instructions on the Getting Started readme.
I ended up with the following HTML, which gives me a blank page !
(attached - renamed html extension to txt for github to accept )
Basic page showing sidenav
Hello everyone.
I have some issue with triggering animation. When I click somewhere, sidebar is always closing, even if it's not link(just a div or another one element)
here is my code:
$(document).ready(function(){
$('#link-list').simplerSidebar({
opener: '#links-menu',
sidebar: {
align: 'right',
width: 300,
closingLinks: '.fa-angle-left'
}
});
$('#cart-list').simplerSidebar({
opener: '#cart-menu',
sidebar: {
align: 'right',
width: 300,
closingLinks: '.fa-angle-left'
}
});
$('#search-list').simplerSidebar({
opener: '#search-menu',
sidebar: {
align: 'right',
width: 300,
closingLinks: '.fa-angle-left'
}
});
});
p.s. opening sidebar works fine
github
npm
- npm install simpler-sidebar
bower
- bower install simpler-sidebar
dist/jquery.simpler-sidebar.js
file is the same as the latest version
bower install simpler-sidebar -F
to force latest version on conflictdoc
folderdoc
foldereditorconfig
plugin in my editorjscs
plugin in my editorjshint
plugin in my editorgrunt lint
to test if I made some mistakesgrunt build
to apply changesdemo
folder on my computerWhen I click on the object that I expect to trigger the sidebar to open, I get the following error in the js console:
// if i try jquery 3.1.0
//
jquery.simpler-sidebar.js:213 Uncaught TypeError: $sidebar.animate is not a function
at animateOpen (VM2272 jquery.simpler-sidebar.js:213)
at HTMLAnchorElement. (VM2272 jquery.simpler-sidebar.js:288)
at HTMLAnchorElement.dispatch (VM2265 jquery-3.2.1.slim.min.js:3)
at HTMLAnchorElement.q.handle (VM2265 jquery-3.2.1.slim.min.js:3)
animateOpen @ jquery.simpler-sidebar.js:213
(anonymous) @ jquery.simpler-sidebar.js:288
dispatch @ jquery-3.2.1.slim.min.js:3
q.handle @ jquery-3.2.1.slim.min.js:3
// if i try jquery 3.2.1 and 2.2.4
//
jquery.min.js:3 Uncaught TypeError: r.easing[this.easing] is not a function
at init.run (VM2587 jquery.min.js:3)
at i (VM2587 jquery.min.js:3)
at Function.r.fx.timer (VM2587 jquery.min.js:3)
at gb (VM2587 jquery.min.js:3)
at HTMLDivElement.g (VM2587 jquery.min.js:3)
at Function.dequeue (VM2587 jquery.min.js:3)
at HTMLDivElement. (VM2587 jquery.min.js:3)
at Function.each (VM2587 jquery.min.js:2)
at r.fn.init.each (VM2587 jquery.min.js:2)
at r.fn.init.queue (VM2587 jquery.min.js:3)
<a href="#" id="sidebar-main-trigger" class=".toggle-sidebar">test</a>
I expect to click the # link above and have the sidebar appear
Hello, using this plug-in, v2.2.3 downloaded from GitHub, causes my site to forever lose the scrollbar using IE 9-11 in Windows 7.
According to https://developer.mozilla.org/en-US/docs/Web/CSS/initial#Browser_compatibility IE's CSS does not support the value of "initial".
I have found two separate remedies for this so far:
overflow: $('html').css('overflow')
to the arguments list upon plug-in invocation // Set the overflow setting to initial
overflow = cfg.overflow ? cfg.overflow : "initial",
// Set anything else than "left" to "right"
align = ( "left" === cfg.align ) ? "left" : "right",
duration = cfg.animation.duration,
easing = cfg.animation.easing,
animation = {},
// Set anything else then true to false
scrollCfg = ( true === cfg.events.callbacks.animation.freezePage ) ?
true :
false,
freezePage = function() {
$( "body, html" ).css( "overflow", "hidden" );
},
unfreezePage = function() {
$( "body, html" ).css( "overflow", overflow );
},
into
// Set the overflow setting to initial
html_overflow = cfg.overflow ? cfg.overflow : $( "html" ).css( "overflow" ),
body_overflow = cfg.overflow ? cfg.overflow : $( "body" ).css( "overflow" ),
// Set anything else than "left" to "right"
align = ( "left" === cfg.align ) ? "left" : "right",
duration = cfg.animation.duration,
easing = cfg.animation.easing,
animation = {},
// Set anything else then true to false
scrollCfg = ( true === cfg.events.callbacks.animation.freezePage ) ?
true :
false,
freezePage = function() {
$( "body, html" ).css( "overflow", "hidden" );
},
unfreezePage = function() {
$( "html" ).css( "overflow", html_overflow );
$( "body" ).css( "overflow", body_overflow );
},
Thank you.
Hi, i like your plugin.
However, i don’t know how to change the mask color or to set it to false. In documentation, i see i can use :
$.fn.simplerSidebar.mask.display = false;
But i still see the mask.
Here is my code :
$('#sidebar').simplerSidebar({
opener: '#toggle-sidebar',
sidebar: {
align: 'left', //or 'right' - This option can be ignored, the sidebar will automatically align to right.
width: 300, //You can ignore this option, the sidebar will automatically size itself to 300px.
closingLinks: '.bt_close' // If you ignore this option, the plugin will look for all links and this can be buggy. Choose a class for every object inside the sidebar that once clicked will close the sidebar.
}
});
$( '#sidebar' ).fn.simplerSidebar.mask.display = false;
$( '#sidebar' ).simplerSidebar();
Is there something wrong ?
Do you have any hooks for events that can fire when the sidebar is open or closed? Something like Bootstrap's modal:
$('#myModal').on('shown.bs.modal', function () {
// do some stuff
})
If not, I'll see if I can extend it and open a PR. Thanks in advance!
See title.
Not exactly a bug, could be an improvement
Hello,
When side bar is opened, we can’t scroll the page. Is it possible to activate the scroll ?
Regards,
Sébastien
Hi,
is there a way to keep the scrollbar , please?
At the moment the content will jump anytime the Sidebar is opened and closed.
After inspecting the code I found : freezePage
Is there a way to set this to false
?
Best Regards
Marc
Hi I liked your plugin but noticed a few things not sure if it is a bug.
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.