Menu icon Foundation
Beginner issue

This is a really straight forward beginner level issue to help me on my way.

I have installed foundation 5 with everything included within the download and then copied the 'Marketing' template html from the main templates page and then pasted the html between the body tags as advised. The Javascript doesn't seem to be working on the top dropdowns (Mobile and desktop).

I have tried this with other templates and I have tried re downloading the files twice. Everything is there and I have completed all the standard steps of setup. This test was performed in Chrome.

I have uploaded the setup here...
http://colin-bailey.co.uk/foundation/#

What amazingly obvious bit of detail am I missing here?

beginnerMarketingjs not working

This is a really straight forward beginner level issue to help me on my way.

I have installed foundation 5 with everything included within the download and then copied the 'Marketing' template html from the main templates page and then pasted the html between the body tags as advised. The Javascript doesn't seem to be working on the top dropdowns (Mobile and desktop).

I have tried this with other templates and I have tried re downloading the files twice. Everything is there and I have completed all the standard steps of setup. This test was performed in Chrome.

I have uploaded the setup here...
http://colin-bailey.co.uk/foundation/#

What amazingly obvious bit of detail am I missing here?

Colin Bailey almost 5 years ago

Forgot to mention the fact that it is ALL js that isn't working on this page.

Bob Sawyer almost 5 years ago

The js error console provides these clues:

 Timestamp: 12/15/2014 9:12:19 AM
Error: ReferenceError: jQuery is not defined
Source File: http://colin-bailey.co.uk/foundation/js/foundation.min.js
Line: 690

Timestamp: 12/15/2014 9:12:19 AM
Error: ReferenceError: $ is not defined
Source File: http://colin-bailey.co.uk/foundation/
Line: 242

It looks like you have jquery and/or zepto referenced here:\

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

For what it's worth, I've never had any luck referencing a script in this manner. It really should only be used as a fallback method. You should add a direct link to jquery or zepto (but not both) in the footer above this snippet.

Add that in, and let us know if that solves the issue.

Rafi Benkual almost 5 years ago

Bob is right, you have Foundation 4 JS call on this. If you are indeed using Foundation 5, it comes with the correct template out of the box. Here is how it should be:

   <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

It's all explained here with a template: http://foundation.zurb.com/docs/css.html

Colin Bailey almost 5 years ago

Thanks Bob and Rafi, both very useful and all is now working fine.