FullPage.js and Meteor

Question

I have created a jsFiddle creating a basic example.

http://jsfiddle.net/7PwsS/532/

It works great on jsFiddle, put it in my Meteor app and when I click the link it doesn't work, if I scroll it does.

Here is my meteor code for layout.html:

<template name="layout">
  {{> yield}}   
</template>


<template name="index">
<div id="fullpage">
 <div id="section0" class="section" data-anchor="firstPage">
    <div class="col-sm-12 text-center">
      <h1>fullPage.js</h1>
      <ul id="menu">
        <li data-menuanchor="firstPage">
          <a href="#secondPage">First slide</a>
        </li>
      </ul>
    </div>
    </div>
      <div id="section1" class="section" data-anchor="secondPage">
        <div class="col-sm-12 text-center">
          <h1>fullPage.js</h1>
            <ul id="menu">
              <li data-menuanchor="firstPage">
                <a href="#firstPage">First slide</a>
              </li>
            </ul>
        </div>
      </div>
    </div>
</template>

Routes.js file in Lib folder

Router.configure({
  layoutTemplate: 'layout'
});

Router.map(function () {
  this.route('index', {
    path: '/'
  });
});

Script.js file in Server Folder

Template.index.rendered = function () {
    $('#fullpage').fullpage({
        anchors: ['firstPage', 'secondPage'],
        menu: '#menu'
    });
};

It is weird, I am guessing something to do with iron-router?

Cheers

J

Answer 1

you should use the moveTo() fullPage.Js function, to keep your iron setting simple ... FullPage doc over here

and handle the page scrolling with a Meteor Template events handler like this :

 Template._header.events({ "click .scroll-link": function(evt, tpl){ var sNum = $(evt.currentTarget).data().section; //console.log('section number is: '+ sNum); evt.preventDefault(); $.fn.fullpage.moveTo(sNum, 0); } }); 

 <template name="_header"> <div class="navbar-fixed"> <nav> <div class="nav-wrapper"> <div class="container"> <a class="brand-logo " href="{{pathFor home}}">HOME</a> <ul id="menu" class="right"> <li> <a class="scroll-link" data-section="1">first</a></li> <li> <a class="scroll-link" data-section="2">second</a></li> <li> <a class="scroll-link" data-section="3">third</a></li> </ul> </div> </div> </nav> </div> </template> 

This way you will get the best of the two worlds...

Answer 2

You can decide which links should be captured by iron-router by providing a custom linkSelector like this:

Router.configure({
   linkSelector: /* selector for iron-router-links */
});