1

I'm using Meteor 0.9.1.1 and I've added the nemo64:bootstrap and mrt:bootstrap-jasny packages. I'm trying to get offcanvas nav menu to work with it, but my button seems like it's hidden or not being rendered (I'm not sure which). The Meteor bootstrap package came with a custom.json file that allows me to toggle which modules are loaded... maybe I'm missing one, but I don't know. This is the menu http://jasny.github.io/bootstrap/components/#navmenu-offcanvas and here is my code:

<template name="navmenu">
<div class="navbar navbar-default navbar-fixed-top">
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="body" data-canvas="#myNavmenuCanvas" data-placement="left">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<nav id="myNavmenu" class="navmenu navmenu-default navmenu-fixed-left" role="navigation">
    <a href="#">Celery seakale</a>
    <a href="#">Dulse daikon</a>
    <a href="#">Zucchini garlic</a>
    <a href="#">Catsear azuki bean</a>
    <a href="#">Dandelion bunya</a>
    <a href="#">Rutabaga</a>
</nav>


{"modules": {

"normalize":            true,
"print":                false,

"scaffolding":          false,
"type":                 true,
"code":                 false,
"grid":                 true,
"tables":               false,
"forms":                true,
"buttons":              true,

"glyphicons":           true,
"button-groups":        false,
"input-groups":         false,
"navs":                 true,
"navbar":               true,
"breadcrumbs":          false,
"pagination":           false,
"pager":                false,
"labels":               false,
"badges":               false,
"jumbotron":            false,
"thumbnails":           false,
"alerts":               false,
"progress-bars":        false,
"media":                false,
"list-group":           false,
"panels":               false,
"wells":                false,
"close":                false,

"component-animations": true,
"dropdowns":            true,
"modals":               false,
"tooltip":              false,
"popovers":             false,
"carousel":             false,

"affix":                true,
"alert":                false,
"button":               true,
"collapse":             true,
"scrollspy":            true,
"tab":                  false,
"transition":           true,

"utilities":            true,
"responsive-utilities": true
}}

I added this in the navmenu.js file and now the menu slides in when the page is loaded, but I still have no button and can't actually "work" the menu.

Template.navmenu.rendered = function() {
    $('.navmenu').offcanvas()
}
Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
rkstar
  • 1,178
  • 14
  • 27
  • Indent all those lines with four spaces. Also, please add your JS code for initializing the navbar, that's where the problem is usually. – Hubert OG Sep 16 '14 at 04:40

2 Answers2

1

You need to activate plugins as this with Javascript, per the documentation:

$('.navmenu').offcanvas();

Now, the common problem is where to put the above line. Scripts that do this automatically based on a css class are usually doing this after the DOM finishes rendering, assuming that's when all page elements are drawn. This is of course not true in Meteor, when templates are added dynamically via JS. Thus, in Meteor, you need to call initialization method yourself when you know the element is already rendered – and in 99.98% cases the rendered callback of the respective template is the right moment:

Template.navmenu.rendered = function() {
  $('.navmenu').offcanvas();
});
Hubert OG
  • 19,314
  • 7
  • 45
  • 73
  • I added this (commented above in original question) but it's still not working as I'd hoped. – rkstar Sep 16 '14 at 22:28
0

I found the issue!

Meteor compiles all js files before sending to the client machine. I removed the jasny meteor package, made sure i only had nemo64:bootstrap package added, then put the jasny-bootstrap js file into the /client directory.

I did not need the $('.navmenu').offcanvas() initiator after all. It all just works now.

rkstar
  • 1,178
  • 14
  • 27
  • how did you move your package to another directory. Did you just go into the ~/.meteor/packages/ and just move the jas-ny package to your /public directory? Didn't exactly follow how you accomplished that part. Thanks. – MARS Jun 28 '15 at 20:27