Menu icon Foundation
JS sort of working in F6

Started working with F6 on a new project and I'm having trouble with the js. I feel like I'm missing something obvious because it's sort of working, in the sense that everything is loading without error, but nothing is happening. A simple example is the mediaQuery utility. Here's some code I'm trying to use...

Notice the `current: undefined`. If I examine the mediaQuery object I can see all the functions described in the docs...so it's working...but why isn't there a value for `current`? Logging `Foundation.mediaQuery.get('medium')` returns `null` as well.

I'm using bower to install foundation, jquery, etc. and that's all working correctly. But just to remove bower as a variable, I added CDN links for both jquery and foundation js. But no dice. Does anyone have any insight?

Also, I couldn't get the sticky plugin working either. Same sort of deal where I could see the plugin adding classes and attributes to the correct element, but nothing stuck.

Thanks

foundation 6javascript

Started working with F6 on a new project and I'm having trouble with the js. I feel like I'm missing something obvious because it's sort of working, in the sense that everything is loading without error, but nothing is happening. A simple example is the mediaQuery utility. Here's some code I'm trying to use...

Notice the `current: undefined`. If I examine the mediaQuery object I can see all the functions described in the docs...so it's working...but why isn't there a value for `current`? Logging `Foundation.mediaQuery.get('medium')` returns `null` as well.

I'm using bower to install foundation, jquery, etc. and that's all working correctly. But just to remove bower as a variable, I added CDN links for both jquery and foundation js. But no dice. Does anyone have any insight?

Also, I couldn't get the sticky plugin working either. Same sort of deal where I could see the plugin adding classes and attributes to the correct element, but nothing stuck.

Thanks

Brian Tan over 3 years ago

Assuming you are using foundation-sites. Can you post a complete sample HTML including css in head section and all js includes. It could be just a simple $(document).foundation(); missing.

Don't use CDN version, and try not to use minified version for now.

Ryan over 3 years ago

Sorry, the code didn't get posted for some reason. Here's what I meant to post...

 $(function () {
   $(document).foundation();

   console.log(Foundation.MediaQuery);
   // console prints out: Object {queries: Array[1], current: undefined}
 });

Doesn't matter if I use the CDN or reference the bower install (non-minified), I still get the same results. I'm only using jquery, foundation.core.js, founcation.util.mediaQuery.js. Again, no errors and all files are loading correctly.

I'm using the foundation sass (mixins and variables) and not referencing any .css files. Would that be the issue with the media query utility specifically?

Brian Tan over 3 years ago

For foundation js, use the "complete" bower_components/foundation-sites/dist/foundation.js

For css, use the "complete" css/app.css, the one generated by sass if available, otherwise use bower_components/foundation-sites/dist/foundation.css

Try not to wrap $(document).foundation() in a function nor doc ready, and place it just before body closing.

Ryan over 3 years ago

Alright, it seems that adding the foundation.css made all the difference. The sticky plugin is even working. Thanks Brian!

My next question is, where are the css dependencies listed out for the various javascript utils/plugins? I certainly don't want to use the entire foundation.css in production. The scss files aren't really broken up into files that correspond to various js utils and plugins.

Any insight into that?

Brian Tan over 3 years ago

You can comment out unused plugins from app.scss, that should give you a more concise css.

Ryan over 3 years ago

OK, I'll try that. Thanks again.