CODEWITHSUNDEEP
htmlcsscodeigniterzurb-foundationzurb-foundation-6
Alberto Fontana
Alberto Fontana

Reputation: 948

Zurb Foundation 6 not working on Codeigniter

I am currently running Foundation 5 on Codeigniter, and it works. Now i'm trying to install Foundation 6 (the CSS version) which doesn't want to work.

I've set up a simple page called prova-foundation and here is the code (as illustrated here):

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <?php echo link_tag('css/foundation-6/foundation.css?ver=1.1'); ?>
    <?php echo link_tag('css/foundation-6/app.css?ver=1.1'); ?>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="<?php echo base_url(); ?>js/foundation-6/vendor/jquery.min.js"></script>
    <script src="<?php echo base_url(); ?>js/foundation-6/vendor/what-input.min.js"></script>
    <script src="<?php echo base_url(); ?>js/foundation-6/foundation.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

But i get the following errors in Firebug (Firefox latest version 44.0.2):

SyntaxError: class is a reserved identifier
class AccordionMenu {
foundation.js (linea 1751, col 2)

TypeError: $(...).foundation is not a function
$(document).foundation();
prova-foundation# (linea 16, col 7)

And Foundation doesn't work... All the <script> and css links are correct. If i open each one of them in the browser, the corresponding file is loaded.

What's wrong with my page? (i've set up a test page here)

Upvotes: 1

Views: 741

Answers (1)

Colin Marshall
Colin Marshall

Reputation: 2142

The problem is that the foundation.js file you have included was written in ES6. In Foundation 6.2 the JavaScript was rewritten with ES6. It needs to be transpiled to ES5 using Babel in order to work in the browser. This is not something you should have to do if you are downloading the CSS versions. That should be done before it's made available for download.

I have opened an issue on GitHub to get this resolved.

Before this is resolved, here are two options you have to get it working:

  1. Copy and paste the code from your foundation.js file here and copy paste the resulting, transpiled code back in your foundation.js file and save it.
  2. Download the Complete version from http://foundation.zurb.com/sites/download/ you can get the transpiled foundation.js and foundation.min.js files. It appears the Essential download is messed up but the Complete download is working.

Upvotes: 1

Related Questions