Menu icon Foundation
jQuery must load in footer?

I've got a question,

Is there a solution to make Foundation work while loading jQuery in the head section of the document and the Foundation.js in the footer ?

I'm working on this WordPress / BuddyPress project and jQuery has to be included in the head section for all BuddyPress features to work.

Any idea how I could solve this, I really like Foundation's Grid system for starters but I would also like to use a few other features like the Tabs and Dropdowns that require JS to work.

Thanks,

jquerywordpressjs

I've got a question,

Is there a solution to make Foundation work while loading jQuery in the head section of the document and the Foundation.js in the footer ?

I'm working on this WordPress / BuddyPress project and jQuery has to be included in the head section for all BuddyPress features to work.

Any idea how I could solve this, I really like Foundation's Grid system for starters but I would also like to use a few other features like the Tabs and Dropdowns that require JS to work.

Thanks,

Jordan Humphreys almost 6 years ago

One thing to keep in mind with a Wordpress application is that many of the wordpress layouts include jQuery out of the box. Just make sure you are not including it twice. It should work with jQuery being loaded in the head. Make sure that the version of jQuery that you are using is 1.8+.

Also, if that does not work, you can try initializing foundation on Document Ready:

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

Stef Serafin almost 6 years ago

And make sure you change the $ to jQuery. I don't think it'll work with the $.

Shmoo almost 6 years ago

Sorry for the late reaction but I keep getting this error in the console.

" ReferenceError: Can't find variable: Foundation " - at line 5 of foundation.tab.js

Line 5 of that file looks like this:

   Foundation.libs.tab = {

This is what I did.

<head>
.... modernizr.js
.... Google's jQuery.2.0.3.min.js 
</head>

....

.... foundation.tab.js
<script>
(function ($) {
  $(document).foundation();
});
</script>
</body>
</html>

Changing the $ to jQuery doesn't help.

I don't like to load all JS functions-/features together in the footer because I only need the tabs feature on a single page and I can easily include the foundation.tab.js when this page is viewed.

Jordan Gonzales almost 6 years ago

I see modernizr, jQuery and foundation.tab loaded. But where and when do you actually load the real foundation file?

In order to use the tabs you also have to include foundation...

<head>
.... modernizr.js
.... Google's jQuery.2.0.3.min.js 
</head>

....

.... foundation.js
<script>
(function ($) {
  $(document).foundation();
});
</script>
</body>
</html>

Shmoo almost 6 years ago

The Docs says you don't have to, it's foundation.min.js to load all Javascript plugins or load only them individually.
I like the individually option because most JS isn't needed at all pages and foundation core is packed with a lots of stuff I don't need, like the media queries meta tags in the head section.

"Then either load each plugin individually, or include foundation.min.js, which automatically loads the Foundation Core and all JavaScript plugins."

http://foundation.zurb.com/docs/javascript.html

If i'm not mistaken jQuery 2.0.3 is also included inside foundation.min.js

Jordan Gonzales almost 6 years ago

Its my understanding that you still need to load the core files for the plug-ins to work. However, I have not tried to load plug-ins without the core script.

Shmoo almost 6 years ago

Yeah I guess that's the reason why this isn't working..

I've just downloaded a custom version of Foundation 5 without all the Javascript plugins en while looking inside the foundation.js Core file I see lots of Javascript that I really don't like to include in my website but for some reason I simply have to eat it to make all other features work.

Something like:

Bummer, I really hoped Foundation was for me but it's not!

Thanks everybody for trying to help me.