Error Trying to Use Slideout Meteor package

[nicholasalanbrown]

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!

[pazguille]

Could you check your panel and menu options? Make sure you are using the attribute id from your DOM elements.

[nicholasalanbrown]

I tried to recreate your demo example exactly. Here's my code:

//client/slideout.js
Meteor.startup(function () {
  var slideout = new Slideout({
    'panel': document.getElementById('panel'),
    'menu': document.getElementById('menu'),
    'padding': 256,
    'tolerance': 70
  });
});

//client/home.html
<template name="home">
<nav id="menu" class="menu slideout-menu">
      <a href="https://github.com/mango/slideout" target="_blank">
        <header class="menu-header">
          <span class="menu-header-title">View on Github</span>
        </header>
      </a>

      <section class="menu-section">
        <h3 class="menu-section-title">Docs</h3>
        <ul class="menu-section-list">
          <li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
          <li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
          <li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
          <li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
        </ul>
      </section>

      <section class="menu-section">
        <h3 class="menu-section-title">Slideout</h3>
        <ul class="menu-section-list">
          <li><a href="https://github.com/mango/slideout" target="_blank">Fork it</a></li>
          <li><a href="https://github.com/mango/slideout/issues/new" target="_blank">Create an issue</a></li>
          <li><a href="https://github.com/mango/slideout/releases/">Download</a></li>
        </ul>
      </section>

      <section class="menu-section">
        <h3 class="menu-section-title">Mango</h3>
        <ul class="menu-section-list">
          <li><a href="https://getmango.com" target="_blank">About Mango</a></li>
          <li><a href="https://twitter.com/getmango" target="_blank">Follow Us</a></li>
        </ul>
      </section>
    </nav>

    <main id="panel">
      <header>
        <button>☰</button>
        <h2>Panel</h2>
      </header>
    </main>
</template>

[pazguille]

It's weird. Maybe @chriswessels can help you.

[impronunciable]

@nicholasalanbrown Is by any chance the Slideout instance being created before the html is inserted into the DOM?

[nicholasalanbrown]

Possibly. I was specifically following the instructions on Atmosphere which
stressed that the instance should be created as a "startup" function:
https://atmospherejs.com/chriswessels/slideout

On Wed, Mar 11, 2015 at 4:33 PM Dan Zajdband notifications@github.com
wrote:

@nicholasalanbrown https://github.com/nicholasalanbrown Is by any
chance the Slideout instance being created before the html is inserted
into the DOM?

—
Reply to this email directly or view it on GitHub
#31 (comment).

[chriswessels]

Thanks for looping me in @pazguille. I think you're spot on @danzajdband.

The example in the chriswessels:slideout docs works for very simple setups, but in a real world app things are likely to be a bit different (my bad, I'll update the docs!) due to routes rendering that may pause for subscriptions, etc.

@nicholasalanbrown Try moving the Slideout initialisation script into the rendered hook in the template JS for the template that contains your menu DOM elements.

Something like this:

Template.mySlideoutMenu.rendered = function () {
  var template = this;
  var slideout = new Slideout({
    'panel': template.$('.panel').get(0),
    'menu': template.$('.menu').get(0),
    'padding': 256,
    'tolerance': 70
  });
}

Please let me know if this works for you!

[nicholasalanbrown]

Thanks for getting back to me!

No, I didn't have any luck with this. It gets rid of the error in the console, the "Menu" header is hidden, but clicking the button does nothing:

//appLayout.js

Template.appLayout.rendered = function () {
  var template = this;
  var slideout = new Slideout({
    'panel': template.$('.panel').get(0),
    'menu': template.$('.menu').get(0),
    'padding': 256,
    'tolerance': 70
  });
}

//appLayout.html

<template name="appLayout">

<nav id="menu" class="menu">
  <header>
    <h2>Menu</h2>
  </header>
</nav>

  <div class="container panel" id="panel">

        <header>
        <button>☰</button>
        <h2>Panel</h2>
      </header>
    {{> yield}}
  </div>

  {{> _footer}}
</template>

//appLayout.import.less

body {
  width: 100%;
  height: 100%;
}

.slideout-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 256px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none;
}

.slideout-panel {
  position:relative;
  z-index: 1;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}

.slideout-open .slideout-menu {
  display: block;
}

And a screenshot: