Adding headroom package

1

Hi,

I’m trying to add headroom.js package to my project. I’m using angular-meteor and I installed headroom via meteor npm.Now I’m trying to add it as a module to angular:

import angular from 'angular'; import angularMeteor from 'angular-meteor'; import uiRouter from 'angular-ui-router'; import headRoom from "headroom.js";

angular.module('CP', [ angularMeteor, uiRouter, headRoom, ]).config(['$stateProvider', '$urlRouterProvider', '$locationProvider', config]);

This doesn’t work, I get the error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module capitals-prototype due to: Error: [$injector:modulerr] Failed to instantiate module function Headroom(elem, options) due to: Error: [$injector:unpr] Unknown provider: elem

Does anybody know what I can do to fix this?

Thanks.

2

Did you ever find a solution to this issue?

3

When using the headroom.js npm package with Angular, you have to make sure the angular.headroom.js script is included as well. It’s bundled with the headroom.js package, but needs to be imported/required separately. So something like:

import headroom from 'headroom.js';
import 'headroom.js/dist/angular.headroom';
4

That wouldn’t seem to be my issue as I had exactly that already,

import headroom from 'headroom.js';
import 'headroom.js/dist/angular.headroom';
5

I abandoned the project (since I am done with it, it was a school gruduate project), but I looked it up and it works. My guess is that it didn’t work because the DOM was not loaded properly while initializing headroom in angular. I created a directive for this:

import headRoom from 'headroom.js';

(function(){



  angular.module('capitals-prototype')
  .directive('headroom', function(){
      return {
          restrict: 'A',
          link: function(scope, elements) {
            // grab an element
            var myElement = document.querySelector(".main-header");
            // construct an instance of Headroom, passing the element
            var headroom  = new headRoom(myElement, {
                  "offset": 205,
                  "tolerance": 5,
                  "classes": {
                    "initial": "animated",
                    "pinned": "slideDown",
                    "unpinned": "slideUp"
                  },
                  onNotTop: function() {
                      $(myElement).find($('.meta-data')).addClass('col-xs-offset-1 col-xs-10 col-xs-offset-1');
                      // $(myElement).find($('.language-container')).addClass('col-xs-offset-1 col-xs-10 col-xs-offset-1');
                  },

                  onTop:function() {
                      $(myElement).find($('.meta-data')).removeClass('col-xs-offset-1 col-xs-10 col-xs-offset-1');
                      // $(myElement).find($('.language-container')).removeClass('col-xs-offset-1 col-xs-10 col-xs-offset-1');

                  }

                });

            // initialise
            headroom.init();


          }

      }

  });

})();

Good luck!

6

Hi, folks. I’m on Meteor 1.4 and I’ve been strugling for a couple of nights now to get headroom.js (the pure javascript version) running in my meteor app.

I keep getting:
Uncaught ReferenceError: Headroom is not defined

I’m trying with this code:

import ‘/imports/js/headroom.js’;
var myElement = document.querySelector(“header”);
var headroom = new Headroom(myElement);
headroom.init();