I have just started a new site created with meteor and using foundation for sites and sass.
I want to create a dropdown menu, but I can't make it work.
I followed this link
dropdown menu and copied html, but it's not been showed as a dropdown menu.
I think my problem is because maybe I haven't initializated the javascript of the dopdown menu.
Can someone show me how to do it. In Zurbs site there are several examples, but loading the script in the head. But I want to know how to do it with meteor.
I might be completelly lost, so any help is really welcome.
This are the packages I have added to my meteor
zurb:foundation-sites
seba:minifiers-autoprefixer
fourseven:scss
To initialize the Foundation plugins you have to run the init code $(document).foundation();, make sure it is added after the foundation js file are included.
Also make sure that $(document).foundation(); is added after DOM has been rendered (at the bottom of html) or in window.onload event.
Took some hours once to find this out :P
Related
I inherited a codebase that was using a 2.x version of Bootstrap. Recently I tried upgrading to Bootstrap 3 to fix a bug. It fixed the bug, but now my site is a disaster. Heading tags are bigger but not bold. My drop-downs don't look drop-downs, and my buttons don't look like buttons. And so on.
It seems to me that I have two options:
revert to Bootstrap 2, save my site, and find another way to fix my original problem (but then I'm stuck with 2 forever)
bite the bullet, spend hours comparing old site vs. new site and copying over all the styles from the old bootstrap in to a new bootstrap-fixes.css.
But, given that Bootstrap 3 has been out for awhile, I'm thinking maybe this is a solved problem (with a better solution than either of the above). One idea I had was to use the bootstrap customizer, which let's you override the base bootstrap styles. The only thing is, coming up with all of the customization options to customize Bootstrap 3 properly (ie. to look like Bootstrap 2) is about as much work as creating a bootstrap-fixes.css.
However, the customizer also takes a config.json file, which made me wonder:
Is there any publicly avaiable config.json for generating Bootstrap 3 styles that preserve the relevant Bootstrap 2 styles?
If not, is there any other way to get Bootstrap 3 JS, and some sort of matching CSS file (customized Bootstrap 3 CSS? upgraded Bootstrap 2 CSS? some sort of frankenstein's monster?) that will work with the JS, but not destory my site?
Thanks in advance for any help.
Bootstrap 2 is desktop first (graceful degradation). Bootstrap 3 was written from the ground up as mobile first (progressive enhancement). They are two completely different beasts. You need to re-design your site afresh mobile first with Bootstrap 3.
Here's an official list of what's changed:
Migrating to v3.x
You could try using some kind of automated tool but personally I just wouldn't trust these to get it right.
I am trying to get Foundation 5 javascript components (any of them) to work in a Rails 4.2.0 app, but nothing I have tried seems to work. I am using the foundation-rails gem, and have followed the documented steps to install it.
To test that Foundation JS works, I've inserted the basic HTML for a tooltip, explained here, to show a tooltip link:
<span data-tooltip aria-haspopup="true" class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
On the page, the tooltip link is styled correctly, however, the tooltip function itself does not work and falls back to the system alt text, as shown below:
My first guess was that there is something wrong with the way I included the Foundation JS files, However, I have double-checked the source for pages in my app, and they all seem to be there:
I have also verified that $(document).foundation() is being included in the Rails app's application.js:
The JS components of Foundation still don't function, even if I place $(function(){ $(document).foundation(); }); in a script tag right before the element that it affects.
How can I debug this? Is there something I can run in the JS console to figure out what is going on?
It turns out I was able to fix this right after I applied the bounty! It seems the issue was somehow related to how Rails caches assets in development environments (this article says a little bit about it).
Basically, I had recently upgraded Foundation 4 to Foundation 5, and I didn't realize it but the SCSS assets being served were still Foundation 4's assets, not those of Foundation 5. I accidentally figured this out when I restarted my computer and all of a sudden tooltips worked.
If anyone else has this issue, I would try wiping rails cache by running the command rake tmp:clear and seeing if that fixes it.
Yeah, you can add
config.serve_static_files = true
in your development.rb config file and make sure you don't precompile, this makes rails load the assets from the original location every time, which reflects changes that are made instantly.
I am creating a WordPress theme. I have finished the design using Zurb's Foundation as my framework. Everything was going swimmingly until I hit a snag with what I think is Javascript.
Please take a look here:
http://dev.andrewtanner.me/wordpress/
Two problems:
The masthead image (specifically the word 'Napier') is not rendering beneath the fixed navigation top bar.
When scaling down to smaller devices, I expect that clicking the hamburger would call the menu but this isn't happening.
You can check out the design here (just the framework, nothing else):
http://dev.napiercountryfestival.co.nz/ - No problems at all here so the JS etc is all good.
I do believe this problem resides with JS as when I use Dev Tools I am met with two errors:
Uncaught TypeError: undefined is not a function
Uncaught ReferenceError: foundation is not defined
I know Foundation relies upon JS for elements within the navigation bar, particularly if it is fixed like mine is.
I would like to know how to best approach this with WordPress. I have checked out the Codex and tried their solution concerning calling the JS located here but to no avail http://codex.wordpress.org/Using_Javascript
I have also tried calling WordPress' jQuery using <?php wp_enqueue_script("jquery"); ?> instead of Foundation's but no luck either - it makes no difference. Could it be than I'm not calling things in the right order in the DOM?
I do have a couple of smaller JS scripts, one for running the marquee and another for the countdown located beneath the masthead and I'm not experiencing any problems with these (unless I kill the dependency to Foundation's jQuery by messing around trying to get things working).
Any help you can offer would be much appreciated - thanks!
Fixing Foundation to be a function is easy. Open your app.js file and re-write it to look like this:
jQuery(document).ready(function ($) {
$(document).foundation();
});
You have two jquery files in your head tag. Remove one of them it will fix your hamburger menu issue
your masthead goes below the nav bar because you have a class fixed which has a property of position:fixed.
in the other link you have provided you have a class .f-topbar-fixed on body tag which provides padding-top:99px; which pushes your page down resulting in the visibility of your masthead. Add the class as well as the styles defined it will fix the masthead
So dropdowns aren't working when using foundation (not even the code copy-pasted from the foundation docs).
This Html is generated using Play! Framework, and I am viewing it using chrome. This code is running on Localhost, not a foreign server. (Maybe chrome is blocking js on localhost or something?)
The following is the code I'm using. Any help would be appreciated.
JSFiddle: http://jsfiddle.net/U7CZq/
code
There are a couple things that I see here that could be causing problems.
The first major issue is you are not including foundation.topbar.js file, which is needed to implement the dropdowns.
The other issue is you should call $(document).foundation() at the bottom of the page to allow foundations javascript components to manipulate the DOM of the topbar to add the proper elements and classes need for the topbar dropdowns.
I recently added Metafizzy's Isotope to my wordpress page, but I had some trouble linking it to my posts. As a solution I removed the code I had put in manually, and installed this Isotope for Wordpress plugin.
Has anyone used this and customized it using Isotope's different methods and layout modes? I'm having some trouble locating those key pieces of code (that are so easy to edit when you add isotope manually). This plugin seems to make editing them a bit trickier. If anyone could point me in the right direction I'd really appreciate it.
Thanks!
The isotope is function is called in the includes>js folder in the file called load_isotope.js
You can see the layout mode on line 6. Probably adding that functionality to the plugin would be a good idea.