ascott1 / bigslide.js Goto Github PK

Fantastic script which has helped me create just the right effect I was looking for.

Complete noob question though....

What's the correct way to make use of the simple menu.open() & menu.close() functions from a separate standalone JS file?

I understand that it needs to be initialized first somehow.

Ideally, in the standalone file, I'd like to do something like this:

    $('body').on('click', 'a.brand_link', function(e) {      
    e.preventDefault();            
menu.open();
// maybe do something else
menu.close();
    });

Any pointers or help would be really appeciated.

The nav on the demo causes the browser to zoom out. Initially I thought this was tied to an incorrect meta viewport tag, but that doesn't seem to be the case.

I am very happy using this plugin on my websites but I I miss a couple functionalities.

The first one and related to the issue #23 I would like to choose if the menu is opened by default depending on the scree size. I would also have an option to store in local storage if the user had the menu opened or closed so when changing the page, the menu could remain opened.

The second one is that I think it would be very nice to have a semi-open state in which only the icons or a part of each menu entry would be shown. Without the text or the second part. This way, on low resolution devices, the menu could be visible anytime because it would be thin.

If you don't mind, I can try to code it with a pull request.

Happy coding!

Hi, so i like your menu and thinking how to integrate

1. touch gesture
   So when i want to open menu, i just swipe to right to open left menu and to close it just swipe to left, i think it will be useful for responsive website
2. sub menus
   Thinking maybe a much better way to handle sub menus? like some kind of dropdown in smartphone or tablet apps
   3.horizontal scroll
   How to disable horizontal scroll when menus appear? i don't want my content to scroll into behind menus, so it will be better to make horizontal disabled

Is there an API for closing the menu of bigslide?
I would like close the menu when clicked in main content (outside of panel)
or perhaps a jquery function to simulate this?

Hi, my website is m.uplabel.com.my
There is a bug if using iphone6 and iphone6 plus to view, whole website will zoom out after click on the side menu bar,
Is there a way to fix?
Thanks in advance

Is there a simple way to know if the side Panel is open or closed ?
Thanks,
Joao

If the menu option is changed to something other than the default 'menu', say $('#sidenav'), the panel doesn't close even when easyClose is set to true. The following error is also referenced in FF's console: ReferenceError: menu is not defined.

Not sure if this is a bug or something I'm doing.

Thanks for the great plugin. I use it a lot!

Is there a native function for a "close"-button on the menu or do I need to fake the click via jquery and easyclose?

Thanks!

Hi!

There is a problem with the right menu not working properly. I was just testing the simple.html file from the downloaded source and I tried to change the option to 'right' but the menu didn't show up. Only white space.

See also attached screenshot for visual (easier) explanation haha.

http://cl.ly/image/3S3g1o1N1U16

Love this plugin! Hope you can help fix the issue. Thank you! :)

Hi

Great work on the plugin, I'm having an intermittent issue when you scroll up and down the page on a mobile device (iPhone 5) the menu pops out, I can't work out what would be triggering this and as I say it seems pretty random without any real pattern to it. Apologies I can't diagnose this any further at the moment but there is a link below if you wanted to try and replicate the issue. Have you come across any similar issues?

http://isodo3d.atelierhq.com/

Hi! I'm using bigSlide for a homepage. However, it's support for JSPM is not so good.

~/Projects/Homepage on  master! ⌚ 14:18:42
$ jspm install bigslide=npm:bigslide
     Looking up npm:bigslide
     Updating registry cache...
     Downloading npm:[email protected]

warn Main entry point not found for npm:[email protected].
     Adjust this property in the package.json or with an override, setting "main": false if this is the intention.

ok   Installed bigslide as npm:bigslide@^0.11.0 (0.11.0)
ok   Install tree has no forks.

ok   Install complete.

Although it's saying installation complete, I cant actually import it because it cant find the script file to work with

For anyone wanting to make this work, you can do some overrides like this (depends on your environment setup though):

jspm install bigslide=npm:bigslide -o "{ main: 'dist/bigSlide', shim: { 'dist/bigSlide': ['jquery'] } }"

Can you add support custom easing? Like this:

$('.sp-toggle').bigSlide({
    menu: $('.slidepanel'),
    easing: 'ease-in-out'
});

Thank you!

I want to implement left & right side nav similar to http://www.vouchercodes.co.uk/ but right side nav is not working. Because style of .wrap has left: 0px (left side causes it).

To solve it: set left: auto when toggling right side

I'm currently using bigSlide on a site that uses a "sticky" nav menu. The issue is that the menu only becomes "sticky" once the user has scrolled down to the top of the menubar. In order to become "sticky" once the appropriate event is triggered, the element is given a position: fixed styling, which, importantly, takes it out of the context of it's containing div. That containing div, of course, has the .push class, and everything within it gets pushed. But now, since the menu is fixed after a scroll, it no longer resides within the .push element.

The problem, in terms of the code, is that for any given click (or touchend) event, the plugin does not search again for elements with the .push class. The .push elements are only ever collected once -- when the plugin first loads on the page. This could also pose a problem in other use cases where .push is added or removed to elements dynamically via JS. The question is whether this is a big enough issue to warrant any changes. Thoughts?

The way I see it there would be two possible solutions:

1. Update the query of .push elements each time a touchend or click event fires (costly, but applicable in more cases most likely)
2. Update the query of `.push' elements each time a media query is called or the window size changes.

This video shows what I'm talking about. You'll see that, once "fixed", the navbar no longer "pushes". If I attempt to pre-empt this by giving that specific element a .push class ahead of time (it's parent already has that class), it gets "pushes" over 2x when not in a "fixed" state.

Hi!

I was making some changes to the repository to contribute but I ran into a problem.

After doing the modifications I had in mind I ran the grunt command to generate the minified files and the the other checks. However, I got this error:

Testing jasmine specs via PhantomJS

exposed internal components
 x Expected '' to be '0px'. (1)
 x Expected '' to be '-200px'. (1)

>> 2 failures
Warning: Task "jasmine:test" failed. Use --force to continue.
Aborted due to warnings.

I am not a grunt or phantomJS expert and I don't recognise this error. If somebody has a clue about it I would appreciate it.

Thanks,
Joan

bigSlide works by adding some inline CSS to an element. This is pretty simple and could be accomplished without jQuery and still support IE8+.

First off, love the simplicity of this plugin.

It is probably worth mentioning in your documentation that a CSS position is needed to actually push the element with the 'push' class.

I couldn't get the push element working until I added a position: relative.

Cheers

I'm on the latest Firefox, version 26.0 - rather than try to explain the behavior I just recorded it https://www.evernote.com/shard/s248/sh/217e1515-b76e-4446-a481-b6db125dd84b/d2480e5f71811ce92c9055835a36f720

The browser on the left is Chrome, the browser on the right is Firefox. As you can see bigSlide works beautifully in Chrome. In Firefox, the initial toggle jumps instead of animating, but every toggle thereafter is smooth. Same code obviously.

Hi - I've been reviewing the issues and didn't really find anything that spoke to opening a panel based on an event (such as a successful form validation). I have 2 panels - and both of them have dependencies on when they need to show up.

Any pointers?

-Michael

Awesome plugin! Is there an easy way to have multiple slides in multiple locations, or at the very least 2 different slides on both sides of the screen?

Thank you!

I've been trying to add a .menu-link inside of my .panel which is working fine on Desktop. I have a link in my content area to open the panel and a link inside of the panel to close it. The thought behind this was to create a "X" in the upper left hand side of the panel to close the menu .panel

As stated above, the .menu-link works fine on the Desktop to close the .panel but when I click the link on my iPhone to close the .panel it does not work.

When I remove the following from the script from the JS the .menu-link seems to work fine again.

menuLink.on('touchend', function(e){
menuLink.trigger('click.bigSlide');
e.preventDefault();
});

Thoughts on this?

UPDATE: I tried using e.stopImmediatePropagation(); instead of e.preventDefault(); and it's working fine too.

hi,

i downloaded the latest release (0.9.2) and in the dist files the version is still 0.9.1. it's not a huge problem but maybe something went wrong in the build. i did not have time to check it out just wanted to notify you. :)

Have you considered extending the plugin in such a way that would determine the width of the menu on page load and use that rather than a hard-coded value? I could see this being useful for dynamically generated menus with white-space:nowrap on their list items.

First of all: thanks for a great plugin! Been using it a lot!

Quick question: Is it possible to have two BigSlides on one page? (one from the left, one from the right).

Thanks!

Hi, Any idea why the animation is so slow on phones? it's not only your plugin, many have this problem..

When menu is opened for the first time on page load i get a gap between the menu and warp div showing the body color in the gap.

If i close the menu and open it again the gap will not appear until i refresh the page and open menu.

Anyway to fix this?

Can someone explains me, why the "click.bigSlide" event is triggered when I use the click() method of jQuery ?

Thanks !

First, love the plugin. Lightweight and quick to integrate.

One thing that I was hoping to do is disable scroll/swipe on the pushed content; fix its position, in other words. Any thoughts on how to best achieve this with CSS, or is this something you can roll into the plugin?

Cheers, and keep up the great work.

Like with similar panels I'd like to call toggleClose on body when its open so people can close a bit easier. Is there a way to tap into that?

Look at this: http://codepen.io/anon/pen/lBhbC

There you can see the right menu is not pushing the container, I think it is because you set the css rule left: 0 and you should set left: auto. Can you take a look to fix it?

When menu is open, clicking anywhere on the slide will automatiicaly close the slide. Is there a way to prevent this? This does't seem to be an issue on the official BigSlide website demo, however in the downloaded demo it behaves this way.

Also, is there a way to disable automatically close of slide when clicking on pushed content similar to the official website?

Cheers

I want to close the panel only on click of icon cancel. Is that possible?

You also need to add overflow-x to body and html otherwise the main content can be swiped under the nav.

Maybe this can be added the dom when the panel is open?

I just add it to my style sheet in a mobile media query though..

Hello. bigSlide is a great plugin! Thanks! I just have one question: is there any way to have the menu open on page load? I would like to have it default to open on certain pages of my site.

Best,
Brad

hi,

i've found that if the body style has "direction:rtl" then the slide in menu doesn't work in Chrome Desktop or in Chrome on android, if you use the 'push' style.
it works fine in all other browsers.
the menu is supposed to slide in from the right.

with rtl sites where 'push' isn't applied then the menu slides in correctly over the top of page content.
if you add the 'push' to any elements then the menu opens to the right (off screen)...

i can get round this by applying the 'direction:rtl' style to individual elements within the page, rather than the whole content, but this isn't ideal...

any suggestions?

I really like this library and would like to use this in our project. However, one major problem is that the project has to support Internet Explorer 9+.
Many libraries similar to this one depend on IE10 or have limited support for IE9. I was wondering if that's also the case with this library.

Since I know that you don't want to add too many extra features in the spirit of keeping this lightweight, how about adding a custom bigSlide event? Users of this plugin can then add listeners to the event in their own scripts. All the event really needs to track is whether the menu is open or not.

Here's how you could do it:
var getState = function(){ return menu._state; };
var bigSlideEvent = new CreateEvent('bigSlide', { 'detail': { 'state': getState }});

Now all you have to do is all the following line to both menu.open() and menu.close():

document.body.dispatchEvent(bigSlideEvent);

Each time the menu opens or closes, it will trigger the event on the document body. People can chose to handle the event however they wish. For example:
foo.addEventListener('bigSlide', function(e){ var state = e.details.getState(); doStuffWithState(state); }, false);

What do you think? 4 additional lines.

Hello,

Would it not be interesting for this (very good!) slide to implement a «click anywhere of the page to close the slide» function? I tried but didn't manage to do it.

Thanks!
Jonas

Hi thee

Great plugin

I am trying to workout how to trigger the menu to open, not toggle.

I do not mean open on page load.

I am adding things dynamically to the menu, and i need to be able to show the menu while items are added and then use the usual menu-link to close the menu when finished adding items to it.

At the moment every time I add items to the menu it toggles, and is driving me crazy.

I have gone through all the issues here and tried to figure out how to do it and I can't get it to work.

Is there a way make an on click function that only opens the menu not toggles it?

Any assistance would be great.

It would be a good feature to add.

Regards

All .push elements jumps to the end points instead of sliding on the first menu click. However if menu is clicked again it will slide in and out properly, its just on the first click that doesn't slide.

MAC OSX 10.8.5
Chrome 32.0
Firefox 26.0

Hi,

I am using bigSlide for one of my project on mobile. I have one left menu and one right menu triggered by to links:

$('#a_list').bigSlide({
    menu: '#menu',
    side:'left'
});
$('#a_option').bigSlide({
    menu: '#option_menu',
    side:'right'
});

The second one is not working. When I remove the first one, the second one is working... Can't we have 2 instance of bigSlide() ?

Many thanks

I have tried many ways to increase the width of the menu so that there isn't a 20px white space between it and my content. I must be manipulating the wrong piece of code. Any help would be greatly appreciated.

thanks

https://github.com/vojtajina/grunt-bump

It seems with easyClose set to true the menu only closes if you click an actual link in the page (instead of anywhere). In desktop browsers and android I can close by clicking anywhere on the page. I am seeing this behavior on the bigslide.js homepage as well so I suspect it is an new iOS issue?

I've installed the package using bower and then is not clear which file should I use:

Usually all libraries use dist folder, so I started using the file bigSlide.min.js but it doesn't work as expected, then I tried jquery.big-slide.js and that one is more recently updated than the other one, I think thats the one you want people to use.

Should be great if you put into the src folder one file called jquery.bigSlide.js and then in dist folder put one file jquery.bigSlide.min.js so you can avoid confusion to users trying to use the library.

Maybe you have this layout because of the demo, but you can easily update it to match this new layout.

Thanks.

Hi,

I am having an issue where on Android phones the menu slides in then immediately slides out. Working fine on desktop browsers and on iPhone.

Hi,

I can get the nav working and I love how light-weight and smooth this is, however, I can't get my main content page div to slide out as well when the nav slides out.

Currently the nav just slides out over the top of the page. I want the page to also slide right with the div like the main example on the bigSlide site.

I also have a problem with an img that is contained below the page div that I am trying to slide right with the nav. It's going crazy massive when I apply the position:relative to the page div I am trying to slide right with the nav.

I have my page set up like this:

<container class="wrap push">
<nav>...</nav>
<hamburger button>...</button>
</container>

All the correct code is in place because the nav works perfectly except that the container doesn't move right with the nav.

Hope I explained this ok.

Thank you for any help.

I called this for a onclick event instead of document ready; so that it is started expanded. I am able to collapse, then expand, and then nothing. I only get two passes; cannot figure out why. Would be nice if this was an option.

I installed this and it works flawlessly in a desktop browser. As soon as I try it on my iPhone 6+ it was was very particular on where I pressed in order to make it work. Clicking directly nudges things 1px and then back again. If I click on the very edge of the button it seems to mostly work. I thought this might be just something I did wrong, however looking at the plugin site yields the same results. Is anyone else having this issue and figured out how to solve it? Is this something I have to get use to on mobile devices? Let me know, thanks!