Menu icon Foundation
Problems with Topbar and Orbit

Hi I am new to Foundation and are having some problems getting the topbar to work on smaller screens (nothing happens when I click the pancake button. And orbit is not working at all when I add class="orbit-slides-container" data-orbit to the ul.

I have been searching on forums for days now and tried various different things but I am not finding a solution. I am working on Foundation 4 as I am following a training course on Lynda.com that uses it. I have also tried Foundation 5.02 and 5.03.

Is it something to do with jQuery? Any help would be much appreciated. I am wanting to move over from Bootstrap but I'm loosing the will to live :)

http://foundation4.angelicdesign.co.uk/4-topbar.html#

http://foundation4.angelicdesign.co.uk/5b-orbit%20-%20Copy.html

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation 4</title>

  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.min.css" />
  <link rel="stylesheet" href="css/app.css" />

  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>
    <div class="row">
      <div class="large-10 large-centered columns">
        <div class="orbit-container">
          <ul class="orbit-slides-container" data-orbit>
            <li><img src="img/banners/1.jpg"></li>
            <li><img src="img/banners/2.jpg"></li>
            <li><img src="img/banners/3.jpg"></li>
            <li><img src="img/banners/4.jpg"></li>
            <li><img src="img/banners/5.jpg"></li>
          </ul>
        </div>
      </div>
  </div>
  <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>
            

         

topbarOrbitjqueryFoundation 4

Hi I am new to Foundation and are having some problems getting the topbar to work on smaller screens (nothing happens when I click the pancake button. And orbit is not working at all when I add class="orbit-slides-container" data-orbit to the ul.

I have been searching on forums for days now and tried various different things but I am not finding a solution. I am working on Foundation 4 as I am following a training course on Lynda.com that uses it. I have also tried Foundation 5.02 and 5.03.

Is it something to do with jQuery? Any help would be much appreciated. I am wanting to move over from Bootstrap but I'm loosing the will to live :)

http://foundation4.angelicdesign.co.uk/4-topbar.html#

http://foundation4.angelicdesign.co.uk/5b-orbit%20-%20Copy.html

<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Foundation 4</title>

  <link rel="stylesheet" href="css/normalize.css" />
  <link rel="stylesheet" href="css/foundation.min.css" />
  <link rel="stylesheet" href="css/app.css" />

  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>
    <div class="row">
      <div class="large-10 large-centered columns">
        <div class="orbit-container">
          <ul class="orbit-slides-container" data-orbit>
            <li><img src="img/banners/1.jpg"></li>
            <li><img src="img/banners/2.jpg"></li>
            <li><img src="img/banners/3.jpg"></li>
            <li><img src="img/banners/4.jpg"></li>
            <li><img src="img/banners/5.jpg"></li>
          </ul>
        </div>
      </div>
  </div>
  <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>
            

         
Chris Matthias almost 6 years ago

Thank you for linking to examples and providing code-- the first thing I notice at http://foundation4.angelicdesign.co.uk/4-topbar.html is there are javascript errors. I use Chrome when coding and the first thing I do when something isn't working is hit CTRL-Shift-J or Cmd-Shift-J on the Mac. That will bring up the javascript console and if I see things in red I know something's up.

If you have some errors early in your javascript it will sometimes affect other javscript functions and plugins on your site as well so always check there first.

So, it looks like we're not loading jQuery and/or Zepto is missing as well.

Zepto is a lighter equivalent of jQuery and Foundation 4 gives you the option to use Zepto and since not every JS plugin you use on a site is compatible with Zepto, it can load jQuery as a fallback. Personally-- I thought adding Zepto into Foundation 4 was a mistake and it looks like they removed it in Foundation 5 so I suggest you remove it in Foundation 4, too.

To remove Zepto and just reference jQuery instead (since we all love jQuery) replace this code:

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

With this:

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

Most of your Foundaton javascript should work after that. The reason your top bar is screwy is because some of the functionality (showing/hiding) is done with CSS and some things like being sticky are done with the JS and your JS wasn't working. Lemme know how it goes.

Chris Matthias almost 6 years ago

I should also add that you can use Zepto and I don't want the Zurbists to hate me for suggesting removing Zepto-- but that's what I've been doing with Foundation 4 and I suggest it especially to people just getting their feet wet with this framework.

Your main problem right now is that zepto.js is not being found on your server.. it should be in "js/vendor/" with your jquery.js file. You could fix your problem by just adding the zepto.js file to that directory too.

zepto.js should have come with your original download package.

Rafi Benkual almost 6 years ago

@Chris, we left it up to you to use Zepto in Foundation 4 or Jquery. We ended up using Jquery more often so we finally dropped it in Foundation 5.

Rafi Benkual almost 6 years ago

@natasha

Leave out the orbit-slides-container class for now as you do not need it. We will look into what is causing that. It is not your JS.

Here is a working example:

  <div class="row">
    <div class="large-10 large-centered columns">
      <div class="orbit-container">
      <ul class="awesome-orbit" data-orbit>
        <li><img alt="slide 1" src=
        "http://placehold.it/1000x300/A92B48/fff"></li>

        <li><img alt="slide 2" src=
        "http://placehold.it/1000x300/EE964D/fff"></li>

        <li><img alt="slide 3" src=
        "http://placehold.it/1000x300/FDC43D/fff"></li>
      </ul>
     </div>
    </div>
  </div>

Natasha Smith almost 6 years ago

Hi @Chris and @Rafi

Thank you so much for your quick reply guys. Much appreciated!

First I removed the orbit-slides-container class which unfortunately didn't help. I then removed zepto with which fixed the problem with orbit and the topbar! Thank you Chris!!!

Unfortunately it didn't solve the problem with the following three links:

http://foundation4.angelicdesign.co.uk/5-reveal.html#

http://foundation4.angelicdesign.co.uk/5-sections.html

http://foundation4.angelicdesign.co.uk/4-dropdowns.html#

Any ideas why that would be?

Rafi Benkual almost 6 years ago

On you reveal modal, you were missing data-reveal on your modal div. It is required to fire the JS.
Here is your working code http://cdpn.io/hvcjK

Here is working topbar.

         <nav class="top-bar" data-topbar="">

                  <ul class="title-area">
                      <li class="name">
                          <h1><a href="#">Something</a></h1>
                      </li>
                      <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
                  </ul>


                  <section class="top-bar-section">
                      <!-- Right Nav Section -->
                      <ul class="right">
                          <li class="active"><a href="#">Right Button Active</a></li>
                          <li class="has-dropdown not-click">
                              <a href="#">Right Button with Dropdown</a>
                              <ul class="dropdown"><li class="title back js-generated"><h5><a href="#">Back</a></h5></li>
                                  <li><a href="#">First link in dropdown</a></li>
                              </ul>
                          </li>
                      </ul>

                      <!-- Left Nav Section -->
                      <ul class="left">

                          <!-- Search | has-form wrapper -->
                          <li class="has-form">
                              <div class="row collapse">
                                  <div class="large-8 small-9 columns">
                                      <input type="text" placeholder="Find Stuff">
                                  </div>
                                  <div class="large-4 small-3 columns">
                                      <a href="#" class="alert button expand">Search</a>
                                  </div>
                              </div>
                          </li>
                          <li class="has-form">
                              <a class="button">Test</a>
                          </li>
                      </ul>
                  </section>

          </nav>

To make sure your index page is set up right, Here is my head tag in F4 project:

 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Foundation 4</title>


  <link rel="stylesheet" href="css/foundation.css">
  <link rel="stylesheet" href="css/app.css">


  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>

Closing scripts:

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

  <script src="js/foundation.min.js"></script>

Natasha Smith almost 6 years ago

Ah! Thank you for fixing the reveal one for me. That is fine now. I still can't get topbar to work. I've used your code with your header and scripts at the bottom but it is still not working for me:

http://foundation4.angelicdesign.co.uk/testTopbar.html#

my original topbar is:
http://foundation4.angelicdesign.co.uk/4-topbar.html#

The other one that still isn't working is sections:

http://foundation4.angelicdesign.co.uk/5-sections.html

I really appreciate your help. thank you!

Tash

Natasha Smith almost 6 years ago

I wonder if anyone cal help any further with this please?

Chris Matthias almost 6 years ago

Hi Natasha-- the pages you still are having issues with are the same issue as before with Zepto. If you load those pages and look in your console you'll see that your code is looking for zepto.js but it's not on your site so you can follow the same directions I made above about replacing the zepto/jquery bit with just reference to jquery or you can get zepto.js from the foundation library and make sure it's uploaded to /js/vendor/ on your site.

Eric almost 6 years ago

I believe your issue is that you're not loading jQuery.

It should be loaded before foundation I believe.

Natasha Smith almost 6 years ago

Thank you for the replies and apologies for mt late reply. I have made the changes as you suggested but it is still not working for:

http://foundation4.angelicdesign.co.uk/5-sections.html#

http://foundation4.angelicdesign.co.uk/4-dropdowns.html#

Sorry for the hassle!

Rafi Benkual almost 6 years ago

Natasha,
I see you are on Foundation 5. you need a data-topbar attribute <nav class="top-bar" data-topbar> to make it work.

Sections are not a part of Foundation 5. Instead you can use Accordions and Tabs.
http://foundation.zurb.com/docs/components/accordion.html
http://foundation.zurb.com/docs/components/tabs.html