Menu icon Foundation
Including JS correctly in zurb template/gulp

I have setup a project using the zurb template, with gulpfile etc.  I am trying to include and use other javascript plugins, but am struggling to get them to work (jQuery)...

For example, using headroom.js, in the top of my app.js I have:

import $ from 'jquery';
import Headroom from 'headroom.js';

window.$ = $;

import './lib/foundation-explicit-pieces';

$(document).foundation();

So, the headroom.j code is being included and I can use javascript as follows (this works fine):

var elem = document.querySelector("#scrollNav");
var headroom = new Headroom(elem);
headroom.init();

but, if I try 

$("#header").headroom();

I get a "Uncaught TypeError: (0 , _jquery2.default)(...).headroom is not a function"

I'm new to this, so apologies if this is a complete noob question...thanks for any help....

 

 

javascriptfoundation 6

I have setup a project using the zurb template, with gulpfile etc.  I am trying to include and use other javascript plugins, but am struggling to get them to work (jQuery)...

For example, using headroom.js, in the top of my app.js I have:

import $ from 'jquery';
import Headroom from 'headroom.js';

window.$ = $;

import './lib/foundation-explicit-pieces';

$(document).foundation();

So, the headroom.j code is being included and I can use javascript as follows (this works fine):

var elem = document.querySelector("#scrollNav");
var headroom = new Headroom(elem);
headroom.init();

but, if I try 

$("#header").headroom();

I get a "Uncaught TypeError: (0 , _jquery2.default)(...).headroom is not a function"

I'm new to this, so apologies if this is a complete noob question...thanks for any help....

 

 

John Rush about 2 years ago

Hi Nick,

I think the app.js import doesn't include the jQuery.headroom.js required for jQuery support.

import Headroom from 'headroom.js'

One solution might be to initialize the JavaScript plugin within the app.js file. Open the app.js file in the assets → js folder. After Foundation is initialized, we’ll initialize the plugin:

$(document).foundation();

  $("#header").headroom({/*options here*/});

 

I use a different method to import external plug-in. I add a new path category into the config.yml file:

entriesvendor:
    - "node_modules/headroom.js/dist/headroom.min.js"

Then I add a new function into gulpfile.babel.js file:

function javascript_vendor() {
  return gulp.src(PATHS.entriesvendor)
    .pipe(named())
    .pipe($.sourcemaps.init())
    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
    .pipe(gulp.dest(PATHS.dist + '/assets/js/vendor'));
}

Finally I add the new function into the gulp 'build' task:

gulp.task('build',
 gulp.series(clean, gulp.parallel(pages, sass, javascript, javascript_vendor, images, copy), styleGuide));

Note: don't forget to import your "vendor" .js files in every page.

Now, I've tried using jQuery for headroom with this method, including headroom.js and jQuery.headroom.js and this actually doesn't work for me. However this is maybe just me. Maybe it will work for you.

 

Sources: https://zurb.com/university/lessons/adding-on-to-a-great-foundation.

Negativefix about 2 years ago

You might want to check out this https://foundation.zurb.com/forum/posts/53526-how-to-add-npm-package-js-file-to-foundation-64 It could be useful.

John Rush about 2 years ago

@Negativefix your link's actually pointing at this thread.

Negativefix about 2 years ago

@John fixed it. Thanks.