Menu
I'm using foundation 5 in my rails 4 app. The topbar menu works fine when I send a request. I can hover the items and nested items no problems. Then, I click on one of the items, which has a link_to method associated to it. Sometimes it gives the proper result where my menu still works perfectly, but other times the whole thing freezes. This also makes the back button of the mobile menu disappear. Once I send a new request through the refresh or url, the menu works again.
Rails doesn't see any problem in the log file. My menu works fine outside of rails. I wonder if maybe it has to do with my link_to tag_helpers or the way I have set up foundation in my app?
Here is a quick overview on how the JS is routed for foundation. (The config they suggest on their docs) views/layouts/application.html.erb:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/modernizr" %>
</head>
<body>
<%= javascript_include_tag "application" %>
</body>
assets/application.js:
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(document).foundation();
Has anybody else encountered this problem? Any good solution other than not using foundation 5 out there?
Thanks Alex
600
The Foundation Top Bar gives you a great way to display a complex navigation bar on small, medium or large screens. The top bar is a pretty complex piece of magical UI goodness. We rely on many presentational classes to define its look and feel, and there's a lot happening in the JS.
The top bar is a complex component with a lot of different features. However, it's still fully keyboard and screen reader accessible. The main thing you need to add if upgrading from an older version of Foundation is the attribute role="navigation" to the top bar container.
You may use fixed and contain-to-grid together in the wrapping div ( div class="contain-to-grid fixed ). You may also wrap your top bar in div class="sticky" and put it anywhere within your markup.
To make the top bar stay fixed as you scroll, wrap it in div class="fixed". If you want your navigation to be set to your grid width, wrap it in div class="contain-to-grid". You may use fixed and contain-to-grid together in the wrapping div (div class="contain-to-grid fixed).
Foundation has known issues with Turbolinks, your issue may be due to that.
To troubleshoot that, you could disable Turbolinks and see if the top-bar still has issues.
Here's a simple guide: http://blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4 .
Beyond that, if you must have Turbolinks, and Turbolinks is the issue. You can try adding jquery turbolinks as seen here: https://github.com/kossnocorp/jquery.turbolinks .
If the problem continues to persist, the next step would be to check the order you're importing the javascript files (this matters with these Turbolinks / Foundation issues) and you may be satisfied that way. I do not have an exact order for you to put them in, but if you search for "Turbolinks Foundation" issues you will eventually stumble onto some solutions. This is not necessarily a certain solution, but it'll guide you in the right direction.
Update: Try this order for importing your javascript assets. And, to quote the source:
Its important to put all the Javascripts to be loaded inside the tag. The order of inclusion of jQuery is important – ensure you load jquery.turbolinks before turbolinks and after jquery. Include all your custom js between jquery-turbolinks.js and turbolinks.js in your application.js
// app/assets/javascript/application.js
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require jwplayer/jwplayer.js
//= require asset_videos
//= require turbolinks
Note: Look at Alex Aube's answer on this page for additional useful information.
194
Ok. To go along with what Ecnalyr explained. (Which he explained correctly, and I kind of misunderstood for a little bit). This worked for me:
I kept = javascript_include_tag "application" at the end of the body of application.html.erb
application.js is like this:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
//= require_tree .
$(document).foundation();
//= require turbolinks
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With