Menu icon Foundation

My Posts



My Comments

Elizabeth Johnson commented on Elizabeth Johnson's post over 1 year

Chrome on the left, Firefox on the right

Elizabeth Johnson commented on Elizabeth Johnson's post over 1 year

UPDATED TO ADD:
This is happening only in Firefox (tested with the latest version)
Google Chrome and IE appear to be ok. Have yet to test on ios/Safari because the development is currently on the local server.
 

Elizabeth Johnson commented on Elizabeth Johnson's post over 1 year

OK, in the interest of helping others who may come along, here's what I found with some digging.

Owl Carousel 2 appears to conflict with something in Foundation's javascript, perhaps related to the responsive navbar (speculating because loading Owl Carousel seemed to mess up the navbar).
I did get Slick Carousel working (although here are still some things I need to tweak).

This tutorial is very helpful!
https://foundation.zurb.com/learn/foundation-6-installing-js-plugins.html
I took what I learned from watching it, applied, and figured out what else I needed to do:
Basically:

install plugin as node module if possible (with --save option)
import plugin in app.js, below jquery but before Foundation (basic syntax is: import js-name from 'module-name';
in app.js, initialize the usage of the plugin after the Foundation import, but before $(document).foundatioin(); line
in app.scss, import any needed .scss files, after foundation and motion-ui, but before the @include foundation components
in config.yml, make sure the path to the Sass libraries for the plugin is indicated (see the line for foundation-sites to determine how to write this for your plugin). Also, make sure the path to the JavaScript entry point is included (also see the line for foundation-sites to determine how to write this for your plugin).
make sure your plugin has been added to dependencies in package.json. This should have happened when you installed with the --save option, but it's a good idea to confirm.
When you run npm start or npm build, you will get an error in the JavaScript or sass task if something isn't configured correctly. I tended to find that these were either missing files or misconfigured paths indicated in app.js, app.scss, or package.json.
If the start and/or build tasks work without error, but the JavaScript on the page is no longer working, it could be due to a plugin incompatibility (such as apparently with Owl Carousel 2). I suppose it also could be some custom code in app.js (or imported files) that is correct enough not to trigger an error in the build task but ends up breaking something when the page loads (to troubleshoot that possibility, comment out the custom code and keep the plugin import in app.js).

It sure would be nice if this type of information was given more prominence in the documentation for Foundation. I really was almost to the point of hunting down a minimialst responsive grid framework and dumping Foundation.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Elizabeth Johnson's post over 1 year

Chrome on the left, Firefox on the right

You commented on Elizabeth Johnson's post over 1 year

UPDATED TO ADD:
This is happening only in Firefox (tested with the latest version)
Google Chrome and IE appear to be ok. Have yet to test on ios/Safari because the development is currently on the local server.
 

You commented on Elizabeth Johnson's post over 1 year

OK, in the interest of helping others who may come along, here's what I found with some digging.

Owl Carousel 2 appears to conflict with something in Foundation's javascript, perhaps related to the responsive navbar (speculating because loading Owl Carousel seemed to mess up the navbar).
I did get Slick Carousel working (although here are still some things I need to tweak).

This tutorial is very helpful!
https://foundation.zurb.com/learn/foundation-6-installing-js-plugins.html
I took what I learned from watching it, applied, and figured out what else I needed to do:
Basically:

install plugin as node module if possible (with --save option)
import plugin in app.js, below jquery but before Foundation (basic syntax is: import js-name from 'module-name';
in app.js, initialize the usage of the plugin after the Foundation import, but before $(document).foundatioin(); line
in app.scss, import any needed .scss files, after foundation and motion-ui, but before the @include foundation components
in config.yml, make sure the path to the Sass libraries for the plugin is indicated (see the line for foundation-sites to determine how to write this for your plugin). Also, make sure the path to the JavaScript entry point is included (also see the line for foundation-sites to determine how to write this for your plugin).
make sure your plugin has been added to dependencies in package.json. This should have happened when you installed with the --save option, but it's a good idea to confirm.
When you run npm start or npm build, you will get an error in the JavaScript or sass task if something isn't configured correctly. I tended to find that these were either missing files or misconfigured paths indicated in app.js, app.scss, or package.json.
If the start and/or build tasks work without error, but the JavaScript on the page is no longer working, it could be due to a plugin incompatibility (such as apparently with Owl Carousel 2). I suppose it also could be some custom code in app.js (or imported files) that is correct enough not to trigger an error in the build task but ends up breaking something when the page loads (to troubleshoot that possibility, comment out the custom code and keep the plugin import in app.js).

It sure would be nice if this type of information was given more prominence in the documentation for Foundation. I really was almost to the point of hunting down a minimialst responsive grid framework and dumping Foundation.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content