mango / slideout Goto Github PK
View Code? Open in Web Editor NEWA touch slideout navigation menu for your mobile web apps.
Home Page: https://slideout.js.org
License: MIT License
A touch slideout navigation menu for your mobile web apps.
Home Page: https://slideout.js.org
License: MIT License
Is there a slideout.destroy(); or similar? I'm looking to use it with enquire.js and initiate 2 variations at different breakpoints on the same elements. When I leave the breakpoints I would like to destroy it, before I start a new instance. Thanks
Hello,
is there a way to set a sidebar opened as defaut on large screen only? On others closed.
Thank you
https://mango.github.io/slideout/
hi, im using tumblr and dropbox,where can i install the files to make the code for this work,and what should write to redirect the code to the files? thanks, btt3rfly.com
An instance of Slideout should emit the following events:
beforeclose
close
beforeopen
open
translate
The Slideout should emit translate
event only when it is opening/closing via touch events.
slideout.on('translate', function(translated) {
console.log(translated); // eg. 120 in px
});
Im having an issue where a slider that has touch events is conflicting with slideout. The problem is that when trying to interact with the slider, both the slider and slideout will do their things and the app breaks.
Is there anything I can do to prevent this?
Or any other fixed content for that matter? Much appreciated!
Hi, love this menu and works fine on everything apart from ie9 and lower is there any fix for this or any way round it thanks
Scrolling of main content of page is available when menu is open. Tested on Android native browser 4.1 and 4.4.2
When the menu is opened this has effect on the panel: the panel "scrolls" to the top. This behaviour seems not restricted to particular devices or browsers. Especially on longer pages on touch devices, swipping to the bottom may open up the menu (when swiping a little bit to the right) and then you have to close the menu and swipe down again.
Can this behaviour be changed? I'd like the position of the panel be unchanged when the menu is opened.
I'm trying to use Slideout.js on a Jekyll site that I'm building but, when I try to use Jekyll variables for the navigation it creates an error and break the script. Here's the markup I'm using...
<nav id="menu">
<ul>
<li><a href="{{ site.baseurl }}" title="Home">Home</a></li>
<li><a href="{{ site.baseurl }}/about/" title="About">About</a></li>
</ul>
</nav>
Here's the error I get...
Uncaught TypeError: Cannot read property 'className' of null
Hi,
the link to the demo page lands to a 404 error.
I think don't have the index.html file.
I understand the idea is to keep it as simply as possible, but it would be nice to have:
translateX
instead of content, and obviously higher z-index
.Would you be accepting PRs for these?
In my web site I cant render all the content in the sidebar. Is this an issue? thanks!
how to remove the connectors that are connected to each box?
Is there a reason that I have to give the full github url when installing via bower?
I understand that slideout is taken, but slideout.js (for example isnt)
It would be nicer to use:
$ bower install slideout.js
than
$ bower install https://github.com/Mango/slideout.git
Good Afternoon,
I am trying to implement slideout in a site but it seems to show the nav div on the next page. You can see and example here: http://abatapsendowment.org/mobile-index-test.html. I am not sure what the issue is as it worked fine until about two hours ago when I changed something. Any help would be greatly appreciated. Thanks
Edit: this issue only happens when i click on an internal link from the slideout. Seems like its not toggling of once a link is clicked.
Edit#2: I am new to Github so please let me know if this is not the right place to ask a question like this.
Hi,
Very nice work, would love to use this in an Ionic project I'm busy with - do you have any plans to support AngularJS?
Thanks
Demo file works well on Chrome 41, Opera 28, Firefox 38 but testing on old Opera 12 it doesn't work.
As I'm testing this to see if could use it on a cross-platform app being developed using the Titanium platform, then I packed the test demo as a webview and the same problem happening with Opera 12 also shows up there too.
It pass, on both Opera and Titanium, all tests except two: should translateX the panel to the given padding, and the should translateX the panel to 0.
It seems it's related to the translate3d so use "left" instead ??
anyway, nice solution you developed.......
when you have a div with overflow hidden and you want to scroll on x axis, your slideout.js code gets fired. so scrolling back is not possible because everytime the menu opens. any idea?
If the browser doesn't support CSS transform
, we should use left
property.
I copied the full example content and the js in a new .html, and it isn't work.
The .js is loaded, everything in place.
Hi guys,
I have a silly question. What is 'tolerance' option? I can't see any effect :)
On the Slideout demo page, moving the mouse in IE10+ throws the following error over and over again:
SCRIPT5007: Unable to get property '0' of undefined or null reference
slideout, line 186 character 3494
and highlights the following minified JavaScript as the culprit:
var n=t.touches[0].clientX-e._startOffsetX;
It appears line 193 of the unminified slideout.js is the issue:
var dif_x = eve.touches[0].clientX - self._startOffsetX;
RTL support please?
Fix is to use left instead of transform3d property applied on main tag.
https://connect.microsoft.com/IE/feedback/details/806517/ie11-tramsform3d-and-position-fixed-problem
ok. this is very special now but it can happen on desktop. because i use mediaqueries to just have the slideout menu on mobile devices:
as you can now see the panel still have that translate3d property although the slideout menu is hidden because of the mediaqueries. this looks strange now. do you have any idea how to handle that case properly?
Hi,
Just playing around with the menu and I found an issue. When closing the menu the this._opened is set to false before the menu is really closed. The same goes for opening the menu, it is set to true before it is even opened.
relevant code this._opened is set before setTimeout:
/**
* Opens the slideout menu.
*/
Slideout.prototype.open = function() {
var self = this;
if (html.className.search('slideout-open') === -1) { html.className += ' slideout-open'; }
this._setTransition();
this._translateXTo(this._padding);
this._opened = true; // it is not really opened now
setTimeout(function() {
self.panel.style.transition = self.panel.style['-webkit-transition'] = '';
}, this._duration + 50);
return this;
};
/**
* Closes slideout menu.
*/
Slideout.prototype.close = function() {
var self = this;
if (!this.isOpen() && !this._opening) { return this; }
this._setTransition();
this._translateXTo(0);
this._opened = false; // it is not really closed now
setTimeout(function() {
html.className = html.className.replace(/ slideout-open/, '');
self.panel.style.transition = self.panel.style['-webkit-transition'] = '';
}, this._duration + 50);
return this;
};
Consider the following usage scenario:
elastoApp.prototype.createMenu = function () {
this.menu = new Slideout({
'panel': document.getElementById('container'),
'menu': document.getElementById('menu'),
'padding': 256,
'tolerance': 70
});
};
elastoApp.prototype.scrollToLinks = function() {
var self = this;
var scrollers = document.querySelectorAll('.menu[href^="#"]');
var scrollEvent = function(e) {
e.preventDefault();
var link = e.target.getAttribute('href');
var domid = link.replace(/#/,'');
var ele = document.getElementById(domid);
if ( ele ) {
self.scrollIntoView(ele);
}
};
for ( var i=0; i<scrollers.length; i++ ) {
scrollers[i].addEventListener('click', scrollEvent);
}
};
// we need to scroll into view after the menu is closed, else the browser
// will remember the position with an open menu
// so we wait for the menu transition to finish
elastoApp.prototype.scrollIntoView = function(element) {
var self = this;
var wait_for_it = function(ele) {
// the problem occurs here, if the menu is _opened = false
// we scroll into view, but if the menu is not really closed because
// of the setTimeout, we run in to trouble
if ( self.menu._opened ) {
setTimeout(function() {
wait_for_it(ele);
}, 100);
} else {
element.scrollIntoView(true);
}
};
wait_for_it();
};
Regards,
Frodo
Its annoying when page scrolls to top when menu is opened.
Hi,
The documentations is not smooth as like demo.
Please help me to fix it
Here is the demo link http://sevakart.com/kolkata/menu/
I was really wondering how awesome would it be to have a fixed header in the #panel div.
I made a little demo by the full example. Unfortunately, if I scroll down in the panel and open the slideout menu after that, the fixed header disappears.
Here is a fiddle about the problem:
https://jsfiddle.net/ZRdesign/v4LbssjL/2/
document.querySelector('#panel button').addEventListener('click', function() {
slideout.toggle();
});
Had a strange bug where every time I opened the slideout, the page jumped to the top on mobile view. I tracked it down to the overflow-x property being set to hidden. Finally fixed it by giving html
and body
the display: inline-table
property. Not sure if this was purely due to the floated elements I have on the page for this project or if anyone else experienced it.
Hello:
I'm using the Meteor package version of Slideout and I get this error in my browser when the page loads:
Uncaught TypeError: Cannot read property 'className' of null
It appears to come at slideout.min.js:1. Any ideas? The package is chriswessels:slideout
Thanks!
When I browse the demo pages, after scrolling, if I open the menu, the pages scroll back to the top, losing my position.
Tested on Chrome on Android 5.
The version is old and the Mango/emitter
dependency is not specified.
Is there any way currently to only trigger the slideout on a button press and not on swipe?
since this version slideout.js has stopped working for me. i get the js error "exports is not defined". version 0.1.6 worked fine
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.