Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ian Hart
Ian Hart
4,724 Points

Three problems with Foundation/Zepto/Javascript

I have three problems which are possibly related and no amount of playing or web searches has helped. I am trying to produce a Foundation-based site based on the prototype in Frameworks. In Google Chrome's dev tools I am getting the following three errors. 1) Uncaught ReferenceError: jQuery is not defined - relating to foundation.min.js: 8 2) Uncaught ReferenceError: $ is not defined - relating to line 77 in my code below

      $(document).foundation();

3) GET file:///C:/Coding/BBD%202%20Foundation/js/vendor/zepto.js - relating to line 71

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

The frustrating thing is that this is causing the dropdown and orbit not to work in Chrome, but the dropdown is working in Internet Explorer and the orbit does if you stop IE from blocking what it thinks is nasties (the dropdown seems to break when the orbit is there in IE, but that might be something else).

Anyway, if anyone can help point me in the right direction to unpick my mess, it'd be appreciated.

Full code below:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blooming Big Data</title>
    <link href="css/normalize.css" rel="stylesheet" media="screen"/>
    <link href="css/foundation.css" rel="stylesheet" media="screen"/>
    <link href="css/my-styles.css" rel="stylesheet" type="text/css" media="screen"/>
    <script src="js/modernizr.js"></script>
  </head>
  <body>
<!--- Top Bar -->

<div class="contain-to-grid fixed">
  <nav class="top-bar">
    <ul class="title-area">
      <li class="name">
        <h1>
          <a href="#">Blooming Big Data</a>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
      </li>
    </ul>
  <section class="top-bar-section"> 
    <ul class="right">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li class="has-dropdown">
        <a href="#">Tools</a>
        <ul class="dropdown">
          <li><a href="#">ScraperWiki</a></li>
          <li><a href="#">Tableau</a></li>
          <li><a href="#">Google Charts</a></li>
        </ul>               
      </li>
    </ul>
  </section>
  </nav>
</div>
<!--- End Top Bar -->


<!--- Headline content -->
<div class="row">
  <div class="large-12 columns" data-orbit>
      <div>
        <h1>This site is dedicated to you.</h1>
        <p class="lead">Yes, you, who loves wrangling with ever-increasing amounts of data but who just every so often feels the need to scream about it.</p>
        <p>
        <p><em><strong>DOWN IN THE DATA DUMPS WEEKLY EMAIL</strong></em></p>
          <a class="button radius" href="#">Sign Up</a> 
        </p>
      </div>
      <div>
        <h1>Get Yourself Tooled Up</h1>
        <p class="lead">We take a look at the best ways to scrape data... if you're skint and not got a brain the size of a planet.</p>
      </div>
      <div>
        <h1>Let's all go Experi-Mental</h1>
        <p class="lead">Learn from other people's mistakes. But have a good old rant about them first.</p>
      </div>
  </div>

</div>
<!--- End Headline content -->


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


  </body>
</html>

1 Answer

Charles Massry
Charles Massry
12,253 Points
Charles Massry
Charles Massry
12,253 Points

It doesn't look like you have jQuery linked to on your page make sure jQuery is linked to on your page before the foundation.js