Menu icon Foundation
Topbar JS not working

My topbar is not working properly: it changes when the screen gets small and displays the toggle icon, hiding everything inside 'top-bar-section'. But if I click the toggle nothing happens, neither do my dropdowns work.

I've tried to include the files as shown below, I've also tried to remove foundation.js and topbar.js and include the min file only. The files are loading (no 404). I initialize foundation before the .

I've read that there are some issues with topbar in older versions so I tried to update to the latest version (which I believe is 5.0.2) by running $ foundation update (I'm using bower), but then if I run $foundation v I get v.1.0.4. If I take a look at my foundation.topbar.js, it says version: '5.0.1'.

I really don't get it.

<!-- Vendor -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false&amp;language=<?=$this->lang_code?>"></script>

<!-- Foundation -->
<script src="<?=base_url()?>bower_components/foundation/js/vendor/custom.modernizr.js"></script>
<script src="<?=base_url()?>bower_components/foundation/js/vendor/jquery.js"></script>
<script src="<?=base_url()?>bower_components/foundation/js/foundation.js"></script>
<script src="<?=base_url()?>bower_components/foundation/js/foundation/foundation.topbar.js"></script>

<!-- Custom -->
<script src="<?=base_url()?>js/app.js"></script>

</head>

<body>
    <?=$CI->load_view('layouts/header_view',true)?>
    	<?=$content?>
    <?=$CI->load_view('layouts/footer_view',true)?>
    
    <script>
		$(document).foundation();
	</script>
</body>
            

         

topbarjavascriptversion

My topbar is not working properly: it changes when the screen gets small and displays the toggle icon, hiding everything inside 'top-bar-section'. But if I click the toggle nothing happens, neither do my dropdowns work.

I've tried to include the files as shown below, I've also tried to remove foundation.js and topbar.js and include the min file only. The files are loading (no 404). I initialize foundation before the .

I've read that there are some issues with topbar in older versions so I tried to update to the latest version (which I believe is 5.0.2) by running $ foundation update (I'm using bower), but then if I run $foundation v I get v.1.0.4. If I take a look at my foundation.topbar.js, it says version: '5.0.1'.

I really don't get it.

<!-- Vendor -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="//maps.googleapis.com/maps/api/js?sensor=false&amp;language=<?=$this->lang_code?>"></script>

<!-- Foundation -->
<script src="<?=base_url()?>bower_components/foundation/js/vendor/custom.modernizr.js"></script>
<script src="<?=base_url()?>bower_components/foundation/js/vendor/jquery.js"></script>
<script src="<?=base_url()?>bower_components/foundation/js/foundation.js"></script>
<script src="<?=base_url()?>bower_components/foundation/js/foundation/foundation.topbar.js"></script>

<!-- Custom -->
<script src="<?=base_url()?>js/app.js"></script>

</head>

<body>
    <?=$CI->load_view('layouts/header_view',true)?>
    	<?=$content?>
    <?=$CI->load_view('layouts/footer_view',true)?>
    
    <script>
		$(document).foundation();
	</script>
</body>
            

         

This post has been closed. No new replies can be added.

Clara over 5 years ago

I've looked into the console and I get the following JS errors:

 TypeError: Layer must be a document node

...ection.rangeCount&&!selection.isCollapsed){return true}if(!this.deviceIsIOS4){if...

foundation.js (línea 34)
 ReferenceError: Foundation is not defined

Foundation.libs.topbar = {

foundation.topbar.js (línea 4)
 TypeError: $(...).foundation is not a function

$(document).foundation();

So I guess it's not only the topbar but all the Foundation JS that is not loading...

Clara over 5 years ago

Ok, I found what's wrong, the

 <script src="<?=base_url()?>bower_components/foundation/js/foundation.js"></script>
<script src="<?=base_url()?>bower_components/foundation/js/foundation/foundation.topbar.js"></script>

must be on the body tag, just before the

 $(document).foundation();

and not on the head, because the head loads later than the body. Now everything works like a charm :)