4

Using the ample code from Zurb Foundation 5 docs:

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></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">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

I get the following error in the console: 'Uncaught TypeError: Cannot read property 'sticky_class' of undefined'

Also when I expand the drop down in the menu I get this error: 'Uncaught TypeError: Cannot read property 'dropdown_autoclose' of undefined'

I have checked the foundation.toolbar.js file and both of these seem to be set inside the 'settings':

settings : {
  index : 0,
  start_offset : 0,
  sticky_class : 'sticky',
  custom_back_text : true,
  back_text : 'Back',
  mobile_show_parent_link : true,
  is_hover : true,
  scrolltop : true, // jump to top when sticky nav menu toggle is clicked
  sticky_on : 'all',
  dropdown_autoclose: true
},

Can anybody help with this?

general03
  • 855
  • 1
  • 10
  • 33
mcneela86
  • 1,029
  • 3
  • 18
  • 35
  • Are you linking the entire `foundation.min.js` or are you linking the individual javascript components separately? – Colin Marshall Jul 06 '15 at 05:33
  • Do you initialize the library by adding this on the end `` ? – general03 Jul 06 '15 at 06:18
  • 'Colin' - I was adding foundation.js along with all the extra's (foundation.abide.js / foundation.topbar.js ...etc...) with a view to removing what I don't use later. I switched to use the foundation.js file from a CDN (http://cdn.foundation5.zurb.com/foundation.js) and it works perfectly. It works but I would still like to know what the issue is? ' general03' - your comment didn't work. – mcneela86 Jul 06 '15 at 07:48
  • You may have been using the wrong `foundation.js` file. There are two different ones. One is the entire foundation javascript, including all of the components. The other is just the foundation core, which is what you use when you add the components individually. Also, what general03 posted you _must_ have at the end of the body, after all other script tags. – Colin Marshall Jul 06 '15 at 17:32
  • Ok, this is working for me now. I am using the same foundation.js (core) file as I was before, and calling all of the separate scripts the same way. now it works! i'm confused :-( - maybe it was something to do with running the site locally?! But it works - I will post an answer showing the configuration that is currently working for me. Thanks for all the help. – mcneela86 Jul 07 '15 at 01:24

0 Answers0