Correct way to include custom javascript when using Zurb Foundation

Question

Numerous times now I've come up against problems when trying to add my own jQuery to a Foundation project.

Is this something to do with the way Foundation uses "no-conflict"? What is the correct procedure to adding ones own scripts?

I've tried including a call to a scripts.js file after the call to foundation.min.js but some very simple slideToggle calls are not running at all. Yet when I remove reference to foundation.min.js all works fine.

I've also had issues with external script files.

Any tips? Thank you.

Answer 1

I added my custom js script to the very end of the list of scripts before the closing body tag, and before the $(document).foundation();. I also stored it in the js/vendor directory. In my paste below, I've stored everything in a global directory; just look for your own js directory.

<script src="global/js/vendor/jquery.js"></script>
<script src="global/js/foundation/foundation.js"></script>

<script src="global/js/foundation/foundation.alerts.js"></script>

<script src="global/js/foundation/foundation.clearing.js"></script>

<script src="global/js/foundation/foundation.cookie.js"></script>

<script src="global/js/foundation/foundation.dropdown.js"></script>

<script src="global/js/foundation/foundation.forms.js"></script>

<script src="global/js/foundation/foundation.joyride.js"></script>

<script src="global/js/foundation/foundation.magellan.js"></script>

<script src="global/js/foundation/foundation.orbit.js"></script>

<script src="global/js/foundation/foundation.placeholder.js"></script>

<script src="global/js/foundation/foundation.reveal.js"></script>

<script src="global/js/foundation/foundation.section.js"></script>

<script src="global/js/foundation/foundation.tooltips.js"></script>

<script src="global/js/foundation/foundation.topbar.js"></script>

<!-- My Custom Script!!!! -->
<script src="global/js/vendor/custom.js"></script>

<script>
    $(document).foundation();
</script>
</body>
</html>

You didn't mention if yo'ure using Zurb Foundation 4; if you are then note that it uses Zepto (instead of jQuery) by default except for browsers that don't understand the proto call. If you're seeing jQuery functions not work, you may want to comment out the code that sets up Zepto instead of jQuery and then test. Look for the following, also near the bottom of the document:

<script>
document.write('<script src=' +
('__proto__' in {} ? 'global/js/vendor/zepto' : 'global/js/vendor/jquery') +
'.js><\/script>')
</script>

Replace that with:

<!-- <script>
document.write('<script src=' +
('__proto__' in {} ? 'global/js/vendor/zepto' : 'global/js/vendor/jquery') +
'.js><\/script>')
</script> -->

<script src="global/js/vendor/jquery.js"></script>

And then make sure to store the jquery.js in the appropriate folder. Again, I'm storing my files in a /global directory.

Hope that helps!