javascript - FullPage.js and Meteor -

i have created jsfiddle creating basic example.

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

it works great on jsfiddle, put in meteor app , when click link doesn't work, if scroll does.

here meteor code 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 weird, guessing iron-router?

cheers

j

you should use moveto() fullpage.js function, keep iron setting simple ... fullpage doc on here

and handle page scrolling meteor template events handler :

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 best of 2 worlds...