mango / slideout Goto Github PK

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.

It looks like a CSS error. Probably related with the position fixed of the menu

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

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

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

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!

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

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?

how to remove the connectors that are connected to each box?

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;

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?

RTL support please?

Is there any way currently to only trigger the slideout on a button press and not on swipe?

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

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/

If the browser doesn't support CSS transform, we should use left property.

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

The content is dragged not only horizontally but vertically also when sliding at 45 degrees..
Also you can't slide the menu just after scrolling in the page

Tested on iPhone 5. I posted some screenshots of the first bug.

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, 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

Get an issue when doing npm install and building. Anyone else managed to build slideout on windows, or is it not supported?

Or any other fixed content for that matter? Much appreciated!

Hi guys,

I have a silly question. What is 'tolerance' option? I can't see any effect :)

Is this currently possible? It would be cool to be able to have an option to set the 'touch region' on the far left hand side so the menu will only be allowed to open if sliding within e.g. <= 20% of the far left hand side, similar to how Android apps work.

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

Reproduced at least in Firefox and Chrome. The navigation gets cut during the transition if the height of the main content is lower than the height of the window.

Hello,
is there a way to set a sidebar opened as defaut on large screen only? On others closed.
Thank you

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.

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:

1. resize window down to mobile view so that slideout menu appears. open it
2. now resize back to desktop size

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?

In my web site I cant render all the content in the sidebar. Is this an issue? thanks!

Hi,

the link to the demo page lands to a 404 error.
I think don't have the index.html file.

The version is old and the Mango/emitter dependency is not specified.

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

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

Scrolling of main content of page is available when menu is open. Tested on Android native browser 4.1 and 4.4.2

Hi!

I just update the new version and the new option side: 'right' is not working. Screenshot:

Code:

var slideout = new Slideout({
  'panel': document.getElementById('content'),
  'menu': document.getElementById('menu'),
  'side': 'right'
});

Looks like some CSS is missing

I understand the idea is to keep it as simply as possible, but it would be nice to have:

1. Ability to have Push Panels instead of Slide/Reveal.
2. Ability to have the navigation appear on top of the content instead of behind. This means, animating the hidden menu translateX instead of content, and obviously higher z-index.
3. Ability to have it on the right, instead of the left (this might get tricky with overflows).

Would you be accepting PRs for these?

Its annoying when page scrolls to top when menu is opened.

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.

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.

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.

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/