Implementation of jQuery 'animate' with Meteor

Question

I'm currently learning to use Meteor, and am having trouble implementing the jQuery 'animate' function in one of my templates. I'm using this great boilerplate https://github.com/matteodem/meteor-boilerplate as an example, and am trying to get the following working:

home.html

<template name="home">

    <div id="front-page">
      <div class="container">
        <div class="page-bottom-nav">
           <div class="row">
              {{#each feature}}
                <div class="col-xs-6 col-md-3">
                <div class="thumbnail aligned center home-page-nav-boxes">
                    <a href="{{path}}" class="link unstyled no-underline {{color}} padding wrapper">
                        <i class="glyphicon {{glyphicon}} image-links-home-page"></i>
                      <div class="headline text-links-home-page">{{text}}</div>
                    </a>
                </div>
                </div>
            {{/each}}
           </div>
         </div>
     </div>
    </div>

  <div id="about">
    About
  </div>
  <div id="explore">
    Explore
  </div>
  <div id="blog">
    Blog
  </div>
  <div id="press-contact">
    Press/Contact
  </div>


</template>

home.js

    Template.home.helpers({
      'feature' : function () {
        return [
          { 'text' : 'About', 'glyphicon' : 'glyphicon-sunglasses', 'color' : 'hover-yellow', 'path' : '#about' },
          { 'text' : 'Explore', 'glyphicon' : 'glyphicon-road', 'color' : 'hover-red', 'path' : '#explore' },
          { 'text' : 'Blog', 'glyphicon' : 'glyphicon-pencil', 'color' : 'hover-blue', 'path' : '#blog' },
          { 'text' : 'Press/Contact', 'glyphicon' : 'glyphicon-envelope', 'color' : 'hover-green', 'path' : '#press-contact' }
        ];
      },
    });

    Template.home.events ({

    });

    Template.home.rendered = function () {

        // @see: http://stackoverflow.com/questions/5284814/jquery-scroll-to-div
        $('a[href*=#]:not([href=#])').click(function (event) {
        alert("Content has been clicked");
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          console.log(target);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            event.preventDefault();
            console.log(target.offset().top);
            $('html, body').animate({
              scrollTop: target.offset().top
            }, 1000);
          return false;
          }
        }
        return true;
    });
  };

home.less

@import 'base';


#main {
    .image-links-home-page.glyphicon {
        font-size: @font-size-giant;
    }

    .hover-yellow:hover {
        color: yellow;
    }

    .hover-green:hover {
        color: green;
    }

    .hover-red:hover {
        color: red;
    }

    .hover-blue:hover {
        color: blue;
    }

    #front-page {
        height: 100%;
        width: 100%;
        background-image: url('images/mt-cook.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        background-position: fixed;
        position: relative;
    }

    .page-bottom-nav {
        bottom: 0;
        position: absolute;
        width: 90%;
        padding-left: @padding-enormous-horizontal;
        padding-right: @padding-enormous-horizontal;
    }

    .home-page-nav-boxes {
        padding: @padding-giant-vertical;
        opacity: 0.6;
        transition: 0.7s color;
    }

    .text-links-home-page {
        font-size: @font-size-large;
        padding-top: @padding-large-vertical;
    }

    .navbar.past-front-page {
        background-color:#fff;
        color:#444;
        opacity: 0.5;
    }

    #about {
        height: 100%;
        background-color: yellow;
    }

    #explore {
        height: 100%;
        background-color: red;
    }

    #blog {
        height: 100%;
        background-color: blue;
    }

    #press-contact {
        height: 100%;
        background-color: green;
    }

}

These files are all in the client folder within my app tree. The console.log and alert debugs work as expected, but no scrolling takes place... Thanks in advance for the help, and do let me know if I'm missing something completely here!

Nice spot - it is there in my code, just missed it on transferring to SO :) — Budgie, Mar 17 '15 at 22:06

yasaricli · Answer 1 · 2015-03-17T22:45:42.063

remove rendered function and use Template.home.events;

try

home.html

<body>
    {{> home}}
</body>

<template name="home">

    <div id="front-page">
      <div class="container">
        <div class="page-bottom-nav">
           <div class="row">
              {{#each feature}}
                <div class="col-xs-6 col-md-3">
                <div class="thumbnail aligned center home-page-nav-boxes">
                    <a href="{{path}}" class="link unstyled no-underline {{color}} padding wrapper">
                        <i class="glyphicon {{glyphicon}} image-links-home-page"></i>
                      <div class="headline text-links-home-page">{{text}}</div>
                    </a>
                </div>
                </div>
            {{/each}}
           </div>
         </div>
     </div>
    </div>

  <div id="about" style="height:500px">
    About
  </div>
  <div id="explore" style="1000px">
    Explore
  </div>
  <div id="blog" style="height:750px">
    Blog
  </div>
  <div id="press-contact">
    Press/Contact
  </div>


</template>

home.js

Template.home.helpers({
      'feature' : function () {
        return [
          { 'text' : 'About', 'glyphicon' : 'glyphicon-sunglasses', 'color' : 'hover-yellow', 'path' : '#about' },
          { 'text' : 'Explore', 'glyphicon' : 'glyphicon-road', 'color' : 'hover-red', 'path' : '#explore' },
          { 'text' : 'Blog', 'glyphicon' : 'glyphicon-pencil', 'color' : 'hover-blue', 'path' : '#blog' },
          { 'text' : 'Press/Contact', 'glyphicon' : 'glyphicon-envelope', 'color' : 'hover-green', 'path' : '#press-contact' }
        ];
      },
});

Template.home.events({
  'click a[href^="#"]': function(event, template) {
    var $target = $(event.currentTarget.hash);
    $('html, body').animate({
      scrollTop: $target.offset().top
    });
    event.preventDefault();
  }
});

see demo http://questions-29109608.meteor.com

Thanks, but no joy I'm afraid...I can pick up the target variable in the console, but .animate doesn't fire — Budgie, Mar 17 '15 at 22:29
Hmmm, that works perfectly...just not in my app! I wonder if it's a conflict with one of the packages I have installed - any thoughts? — Budgie, Mar 17 '15 at 22:39

score 0 · Accepted Answer · edited May 23 '17 at 12:22

0

It turns out the issue was to do with 100% sizing of the <html> and <body> tags. With the help of this question and a good overview of these tags and their behaviour here, the scroll now works as expected. Note that calling the function in either Template.home.events or Template.home.rendered works here.

edited May 23 '17 at 12:22

Community

1
1

answered Mar 18 '15 at 07:10

Budgie

2,279
1
21
26

Implementation of jQuery 'animate' with Meteor

2 Answers2