ctrlmaniac / sidebar Goto Github PK

Sidebars for web apps

Home Page: https://codepen.io/collection/MgvLea

JavaScript 85.65% TypeScript 14.35%

sidebar's Introduction

SIDEBAR

Sidebar is a collection of javascript packages distributed via the npm registry. It aims to simplicity and to provide a range of tool that allow users to implement sidebar (or side navs) in their web apps!

Packages

Demo

You can play with all sidebars in this codepen collection.

`simpler-sidebar`

simpler-sidebar is the most downloaded package. It's a jQuery plugin that allows to create a side nav as in modern mobile apps. It aims to simplicity so that everybody can use it no matter if expert programmers or not. It is written entirely in javascript so that you won't need to include any css file and the only css you must adds is not even required!

// Install

// with npm
npm install simpler-sidebar

// with yarn
yarn add simpler-sidebar

The full documentation is available here.

`simpler-sidebar-css3`

simpler-sidebar-css3 is a fork of simpler-sidebar plugin. The difference between the two is that this package doesn't use jquery animation method but it uses CSS3 animations! This should make this package less brutal against memory! Options differ slightly so read the documentation first if you intend to migrate to this package!

// Install

// with npm
npm install @ctrlmaniac/simpler-sidebar-css3

// with yarn
yarn add @ctrlmaniac/simpler-sidebar-css3

The full documentation is available here.

`vanilla-sidebar`

vanilla is a simple sidebar package written in plain vanilla javascript. It aims to have no dependencies!

// install

// with npm
npm install @ctrlmaniac/vanilla-sidebar

// with yarn
yarn add @ctrlmaniac/vanilla-sidebar

sidebar's People

Contributors

Stargazers

Watchers

sidebar's Issues

Any option to trigger with code hide/show

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(); ?

Mask over the sidebar

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.

How to scroll the page when side bar is opened ?

Hello,

When side bar is opened, we can’t scroll the page. Is it possible to activate the scroll ?

Regards,

Sébastien

jQuery 2.x compatibility

Is this sidebar compatible with jQuery 2.1.4 ?

Triggering animation after clicking

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

animate and easing bugs?

Actual behavior

When 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)

Steps to reproduce the behavior

Download the latest from git
Add jquery in <script> at the bottom of the page
Add jquery.simpler-sidebar.js <script> after that
Add allow-scrolling.js <script> after that
Paste in the html from the demo, except swap out the hamburger icon for the link below
Paste in the css from the demo (added a high z-index just to be sure)
Clear cache
Click on this: <a href="#" id="sidebar-main-trigger" class=".toggle-sidebar">test</a>

Expected behavior

I expect to click the # link above and have the sidebar appear

event-driven callback

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!

init: opened

init opened does not trigger the mask.

To avoid issues, set top to the fixed height of the navbar.

Resize Issue

Hi I liked your plugin but noticed a few things not sure if it is a bug.

On Samsung S6 on Firefox 39 if you switch from Vertical to horizontal view, the menu closes means you have to click the button again otherwise menu disappears
When in horizontal view, if the menu is long you can't scroll down to see the bottom of the menu is cut off. Although the background page scrolls, this menu doesn't so you can't select the bottom menu

Keep Scrollbar

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

prevent page from jumping once the scrollbar disappears and the sidebar opens.

See title.

Not exactly a bug, could be an improvement

overflow: initial causes IE's scrollbar to disappear forever

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:

Add overflow: $('html').css('overflow') to the arguments list upon plug-in invocation
Changed the source code from

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

Triggerless run

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

Multiple sidebars do not hide correctly

Actual behavior

I 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

Steps to reproduce the behavior

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

Expected behavior

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

Mask over the sidebar

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.

'Readme - Getting Started' needs revision; I followed it and get a blank page.

[x ] I have installed the latest version
- [x ] I have downloaded the plugin with github

Actual behavior

Blank page

Steps to reproduce the behavior

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 )

sidebarNav.html.txt

Expected behavior

Basic page showing sidenav

Bugs in README options

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 ?

link to working examples

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.

any animation in the side panel causes it to close

Actual behavior

When 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

Steps to reproduce the behavior

Place any jQuery driven animation in the simpler-sidebar

Expected behavior

Only clicking on the quitter selector or on the mask should close simpler-sidebar

Demo of actual behavior

http://screencast.com/t/ERiZhBsT219p

ctrlmaniac / sidebar Goto Github PK

sidebar's Introduction

SIDEBAR

Packages

Demo

simpler-sidebar

simpler-sidebar-css3

vanilla-sidebar

sidebar's People

Contributors

Stargazers

Watchers

Forkers

sidebar's Issues

Actual behavior

Steps to reproduce the behavior

Expected behavior

Actual behavior

Steps to reproduce the behavior

Expected behavior

Actual behavior

Steps to reproduce the behavior

Expected behavior

Actual behavior

Steps to reproduce the behavior

Expected behavior

Demo of actual behavior

Recommend Projects

Recommend Topics

Recommend Org

Jobs

`simpler-sidebar`

`simpler-sidebar-css3`

`vanilla-sidebar`