Menu icon Foundation
Foundation 6 Javascript not working

Hi all,

My foundation 6 website javascript won't work no matter what i do.

I use gulp to complied everything with jquery.js first then what-input.js, motion-ui.js, foundation.js then finally app.js (where i initialisation foundation).

I believed this is not my browser and computer problem as i have also included cookie consent on my website, which is working.

Does anyone have a solution?

Foundationfoundation 6javascript

Hi all,

My foundation 6 website javascript won't work no matter what i do.

I use gulp to complied everything with jquery.js first then what-input.js, motion-ui.js, foundation.js then finally app.js (where i initialisation foundation).

I believed this is not my browser and computer problem as i have also included cookie consent on my website, which is working.

Does anyone have a solution?

Jonas Marlo Loerken over 3 years ago

Load your "not-working-website" up and post a link. At the moment we can't help you :-)

Irene Soler over 3 years ago

@Paper9oll
I'm having exactly the same issue. Not sure how you solved it though?

I have before my closing body tag:




just as downloaded from the zurb website.
Inserted an orbit slider - and although it displays it correctly, the slides don't slide.
Dropdowns not working at all.

Do you mean you ended up adding individual links to each js as per foundation5?
Please let me know, would be very helpful.

Cheers,
Irene

Irene Soler over 3 years ago

 <script src="js/vendor/jquery.min.js"></script>
    <script src="js/vendor/what-input.min.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/app.js"></script>

Code here!

Uzi Ashkenazi almost 2 years ago

There seemed to be an error in Foundation's docs basic setup example that throws a jQuery error.

<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a data-tabs-target="#panel2" href="#panel2">Tab 2</a></li>
</ul>

The above data-tabs-target="#panel12" together with href="#panel2" is the culprit. Either remove the hashtag before the id passed inside data-tabs-target or remove data-tabs-target altogether.

 

The correct setup is below.

<ul class="tabs" data-tabs id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a data-tabs-target="panel2" href="#panel2">Tab 2</a></li>
</ul>

 

What is odd is that all the other examples in the docs do not use the data-tabs-target at all. Perhaps Rafi or someone from Foundation can comment on that?

 

Paper9oll over 3 years ago

@Irene Soler what does your app.js consists of? My setup is the same as yours hence not sure why your one not working.

Irene Soler over 3 years ago

Thanks @Paper9oll
I haven't changed anything to the the files downloaded from the website.
So app.js has got this:

(
```$(document).foundation();

Irene Soler over 3 years ago

Thanks @Paper9oll
I haven't changed anything to the the files downloaded from the website.
So app.js has got this:

(
```$(document).foundation();

Jonas Marlo Loerken over 3 years ago

Please populate a link!

Paper9oll over 3 years ago

@Jonas Marlo Loerken sry, what do you mean by populate a link

Paper9oll over 3 years ago

@Jonas Marlo Loerken my website is currently not yet ready for production hence is there any other way

Rafi Benkual over 3 years ago

If you use the Foundation CLI or Yeti Launch, the project is structures with all paths correct out of the box. How did you create this install? What were your steps?

Paper9oll over 3 years ago

@Rafi Benkual I installed foundation through bower.

My Steps:

  1. open terminal
  2. cd my foundation site directory
  3. bower init and npm init
  4. bower install foundation-sites --save
  5. bower install font-awesome --save
  6. npm install gulp --save
  7. npm install gulp-sass --save
  8. npm install gulp-concat --save
  9. npm install gulp-minify-css --save
  10. npm install gulp-uglify --save
  11. npm install gulp-autoprefixer --save
  12. create gulpfile.js
  13. run gulp command through terminal
  14. everything generate into build (public folder) without errors
  15. test website
  16. javascript components such as off-canvas, callout, tabs (sometimes) not working.

Anyway this is not important anymore as its working ... I changed the way i include the javascript files by splitting up the files into individual ones like foundation.js, app.js (initialisation) and vendor.js (jquery.js and what-input.js) is a single file respectively.

Not sure why Foundation v6 won't work when i joined all the files into a single app.js through gulp ... this does not happen in Foundation v5 ... probably a bug.

Anyway ... Cheers