Sticky not working together with lazy loading

hi everyone,
i made my sidebar “sticky” and i realized that my lazy loading for images (using the jQuery plugin “unveil”) is not working anymore. i think it has something to do with the scroll event that is beeing confused by the foundation sticky script…
can anyone tell me how to deal with this?
Thanks in advance!

You may have to reinitialize the sticky component. See also https://get.foundation/sites/docs/javascript.html#adding-content-to-plugins

Also please provide more information like the exact Foundation Sites version that you use.

the sticky is working, but it seems to interfer with the lazy loading plugin…
Version is 6.4.3

6.4.3 is quite old, please try it with 6.6.3, we fixed many related bugs.

i would like to but couldn find any tutorial on how to do this.
im am not very familiar with the foundation cli and dont want to break anything.
Do you might have a link for me?

If your setup uses node and npm: run npm i foundation-sites@6.6.3 and then recompile everything. The CLI is mainly meant to install new projects.

i am getting a lot of errors and a logfile with 294 lines… :expressionless:

this is what i did:
i changed to the directory where my project is located at.
started npm i foundation-sites@6.6.3
…and then many errors appeared…
i did a backup before :sweat:

Please provide details about the errors that you get. Also ensure to use Node 10 as newer versions may not work.

I can not guess or see what errors you get.

version of node is 9.9.0

First error message is:
82 verbose stack Error: node-sass@3.13.1 postinstall: `node scripts/build.js

I guess it has something to do with python…
gyp verb check python checking for Python executable “python2” in the PATH
gyp verb which failed Error: not found: python2

If you are on Windows please install this by running npm i -g windows-build-tools.

thank you, Daniel, it seems to work now.

I started two years ago with the CLI but i am not very familiar with it.
Therefore, when i started i just downloaded the foundation.min.js file to my server (js/foundation.min.js) from a non CLI project.

I think this is now a problem because when i replace the old version with the node_modules/dist/js/foundation.min.js i get an error
DevTools failed to load SourceMap: Could not load content for https://www.vegpool.de/js/foundation.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
and some of my own developed scripts stopped working.

therefore i think i have to render the whole javascript section with the new files again and then edit my old scripts… could somebody please tell me how to do this?

Running npm i -g windows-build-tools should normally add it to your path - you may have to open a new terminal / cmd or it is the wrong shell (Git bash vs cmd).

Thank you, Daniel! It seems to work now.

In order to update the javascript files i did a foundation build on my project… but (as far as i see) nothing has changed…

if i just copy the dist/js/foundation.min.js file to my server i am getting an error
DevTools failed to load SourceMap: Could not load content for xxx

Could somebody please tell me how to also update the javascript files?
What is the propper way to edit and parse javascript files in combination with the CLI?

You can ignore the source map error, this is not relevant.

Please check if there is a gulpfile and a start script in package.json and run npm start in the project.

okay, that works. The sticky is also working.
Many thanks for your help, Daniel!!!

A few questions that still remain:
The request of the source map seems to me an additional HTTP request that is not needed… how can i remove this?

Source map files are only loaded when the developer tools of the browser are opened / active. If you close them they are not loaded.

You can ignore this message or remove the sourcemap reference comment.

Or you download and provide the source map file too for easier debugging of Foundation Sites.