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

CSS

Problem with foundation classes

The problem I'm having is with this video:

http://teamtreehouse.com/library/framework-basics/prototyping-with-foundation/building-a-javascript-dropdown-menu-and-orbit-slider

here is the code section I am talking about:

<!DOCTYPE html>
<html>
  <head>
    <title>Ribbit - A Treehouse Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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" media="screen">
  </head>
  <body>

    <!-- Navigation -->
    <div class='contain-to-grid fixed'>
      <nav class='top-bar'>
        <ul class='title-area'>
          <li class='name'>
            <h1>
              <a href="#" class='name'>Ribbit</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 Ribbit</a></li>
            <li class='has-dropdown'>
              <a href="#">Treehouse</a>
              <ul class='dropdown'>
                <li><a href='#'>ABOUT</a></li>
                <li><a href='#'>VIDEOS</a></li>
                <li><a href='#'>TOPICS</a></li>
              </ul>
            </li>
          </ul>
        </section>
      </nav>
    </div>
    <!-- End Navigation -->

    <!-- headling content -->
    <div class='row panel'>
      <div class='large-12 columns'>
        <div>
          <h1>Self-destructing message app</h1>
          <p class='lead'>Learn how to build this fun little app by signing up for a
          Treehouse account today.</p>
          <p class='button-group'>
            <a href='#' class='button default'>Download the app</a>
            <a href='#' class='button success hide-for-small-only'>Text me the link</a>
          </p>
        </div>
        <div>
          <h1>Learn how to build it for iOS</h1>
          <p class='lead'>We'll teach you how to build it from scratch!</p>
          <p><a class='medium button radius' href='#'>Get started today!</a></p>
        </div>
        <div>
          <h1>Learn how to build it in Android</h1>
          <p class='lead'>We'll teach you how to build it from scratch!</p>
          <p><a class='medium button radius' href='#'>Get started today!</a></p>
        </div>
      </div>
    </div>
    <!-- end headline content -->

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

my problem is that the 'dropdown' class does not create the desired hover effect. Everything else in the video up to this point works for me except this. Instead of creating a hover dropdown, the about, videos and topics links are nowhere to be seen and during hover, nothing happens.

Guil Hernandez can you please look at my most recent reply to Giovanni?

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hey Wendell Pulsipher,

It could also be because the video uses Foundation 4. I noticed you're using Foundation 5. We're releasing a new stage next week on Foundation 5, which covers all the latest features and how to update the JS from 4 to 5.

6 Answers

Hi Wendell Pulsipher (waow, so many kind of names I never heard of on Treehouse ^^, where are you from?),

Your script has some spell errors. pronto -> proto, and missed a closing > after '.js.

 <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>

Should work correctly now :). Hope it helped!

yes! It worked! Thank you very much... rookie mistake. I'm from the States originally. My last name comes from Ireland though as far back as I have been able to trace (early 1600s)

okay having another problem now...

<div class='row'>
      <div class='large-12 columns' data-orbit>
        <div>
          <h1>Self-destructing message app</h1>
          <p class='lead'>Learn how to build this fun little app by signing up for a
          Treehouse account today.</p>
          <p class='button-group'>
            <a href='#' class='button default'>Download the app</a>
            <a href='#' class='button success hide-for-small-only'>Text me the link</a>
          </p>
        </div>
        <div>
          <h1>Learn how to build it for iOS</h1>
          <p class='lead'>We'll teach you how to build it from scratch!</p>
          <p><a class='medium button radius' href='#'>Get started today!</a></p>
        </div>
        <div>
          <h1>Learn how to build it in Android</h1>
          <p class='lead'>We'll teach you how to build it from scratch!</p>
          <p><a class='medium button radius' href='#'>Get started today!</a></p>
        </div>
      </div>
    </div>

after adding data-orbit class where indicated in the orbit slider video (foundation framework) the slider doesn't work or look like it's supposed to in the video.. Slider

I tried your code, and it works perfectly here (testing with the code challenge app). What I would suggest if you want to debug your code, be methodic (and patient).

  1. Get a "good code" (which you know is working perfectly), the best is something similar (I used the code challenge code for your code). Apply it to verify the result.
  2. When done, you replace the portion of the code you need to test. See the result. If it doesn't work, you know it is your code which have a problem.
  3. If not, then it's something else in your code.

I used the same process with your first question. I tested a code which I know would work well, then I replaced portions of the code with yours. When I saw that the html body was fine, I knew it was from either the head or the script. Tried to replace the head, worked fine. Tested the script: Bummer! It's quite simple, first you need to isolate the code which pose a problem, then you can fix it by comparing/testing.

Then for the last question. I checked your code with the code of the code challenge (which displayed the slider correctly), replace the slider part with your code, and it worked fine. It might come from somewhere else. Try to figure out by yourself, and if you still can't get a good result, come back here and paste your entire code ^^.

Good luck, my friend.

Hmmm... well I went and compared my code and isolated certain parts of it with no success, so I tried just overwriting the contents of the css, js and img folders in my directory with the included project files and that resolved the issue. Only problem is I don't know what the issues actually was and which files I may or may not have had or called properly (or not) in the HTML. Well.. at least the problem is solved. Looks like I'll need to do some very in depth reading on the Foundation website.

As long as it worked, you respected your contract to the client :), that's it (simulation of a professionnal project). But for you, you would want to know why it didn't work, and be able to master your code. For that, I recommend that you make a copy of your bugged version, then when you have a fixed version, you can compare them (same process as before). Well, that's for the future projects ^^, don't sweat it, it is always a good experience (now you'll know what not to do).

What you did is that you isolated, in a certain way, the problem, you know by now that it was not your assumption that it was this snippet which was wrong. It came from the other files. It is a good practice, I think, to not overwrite everything when you have a problem (it is the same thing as formating and reinstalling your computer when it doesn't work properly, it work again, but you don't know what was the problem).