Menu icon Foundation
Foundation 6, Javascript in head?

I'm wondering if there's a way to get Foundation 6's javascript to work properly when placed in the head, instead of at the end of the body.

I'm using the Zurb template, which compiles everything to app.js. I've found if I load it in the head, it doesn't work; if I load it at the end of the body (like the instructions say) it works.

My company's CMS is set up to load scripts in the head. I'm sure I can work around that if need be, but if I could find a solution to get the js working from the head it would be preferable.

foundation 6javascript

I'm wondering if there's a way to get Foundation 6's javascript to work properly when placed in the head, instead of at the end of the body.

I'm using the Zurb template, which compiles everything to app.js. I've found if I load it in the head, it doesn't work; if I load it at the end of the body (like the instructions say) it works.

My company's CMS is set up to load scripts in the head. I'm sure I can work around that if need be, but if I could find a solution to get the js working from the head it would be preferable.

Brian Tan about 3 years ago

It shouldn't matter where you place the JavaScript as long as you have the initialization bit at the end.

$(document).foundation();

Neil Haskins about 3 years ago

OK, that makes sense.

That line is at the bottom of my compiled app.js. As a workaround, I edited src/assets/js/app.js as:

$(document).ready(function(){
	$(document).foundation();
});

And now everything works without any javascript at page bottom.

Thanks.

guillermo haas-thompson over 2 years ago

I would like to second the experience and workaround outlined by Neil. I still have my app loading at the very end per previous instruction. I also noted that when I upgraded to Foundation 6 recently, the default application.html.haml file generated by rails g foundation:install includes the javascript in the head (https://github.com/zurb/foundation-rails/blob/master/lib/generators/foundation/templates/application.html.haml).

Without the fix Neil included, Foundation doesn't load properly. (For example top menu bar completely fails to work properly). Side note, I am not using Turbolinks, but am thinking about turning it on as well.

I think the docs should be updated to be more clear. The docs still say put javascript in the bottom (http://foundation.zurb.com/sites/docs/javascript.html) yet the default generators are putting it at the top.

I've been perfectly happy with the javascript at the end, but am just trying to follow the most current conventions, which seem to be putting it back in the head.

RCD over 2 years ago

I agree. The documentation for the Javascript/jquery would be more helpful if it went into more depth (for non pros like me :)

I am trying to add some jquery to a page and cant get it to be even processed. I think its bc it is loading before app.js, which is at the bottom of the body, where the default.html template has it. More resources on the site would go a long way.