Menu icon Foundation
FS6 - Reveal does not work on Safari and Firefox (but does on Chrome)

Hi,

I installed Foundation for Sites 6.2.0 in my Laravel project. I am using gulp to compile the JS.

I would like to use the reveal for my login form. I am coding on Chrome and it works perfectly. But yesterday I tried on Safari and Firefox, and the reveal was not working.

I quickly checked the console but I am bad at debugging so I am not sure those errors explain why it fails.

 

Safari error from console:

Safari Error

 

Firefox error from console:

Firefox error

 

Can someone help me understand the issue? Note that it's working with cdn foundation...

Gulp code:

//Compilation JavaScript
    var JSJquery = '../../../node_modules/jquery/dist/jquery.js';
    var JSFoundation = '../../../node_modules/foundation-sites/js/';

    mix.scripts([
        JSJquery,
        JSFoundation + 'foundation.core.js',
        JSFoundation + 'foundation.util.keyboard.js',
        JSFoundation + 'foundation.util.box.js',
        JSFoundation + 'foundation.util.triggers.js',
        JSFoundation + 'foundation.util.mediaQuery.js',
        JSFoundation + 'foundation.util.motion.js',
        JSFoundation + 'foundation.reveal.js',
        JSFoundation + 'foundation.offcanvas.js',
        'main.js'
    ]);

 

foundation-6reveal

Hi,

I installed Foundation for Sites 6.2.0 in my Laravel project. I am using gulp to compile the JS.

I would like to use the reveal for my login form. I am coding on Chrome and it works perfectly. But yesterday I tried on Safari and Firefox, and the reveal was not working.

I quickly checked the console but I am bad at debugging so I am not sure those errors explain why it fails.

 

Safari error from console:

Safari Error

 

Firefox error from console:

Firefox error

 

Can someone help me understand the issue? Note that it's working with cdn foundation...

Gulp code:

//Compilation JavaScript
    var JSJquery = '../../../node_modules/jquery/dist/jquery.js';
    var JSFoundation = '../../../node_modules/foundation-sites/js/';

    mix.scripts([
        JSJquery,
        JSFoundation + 'foundation.core.js',
        JSFoundation + 'foundation.util.keyboard.js',
        JSFoundation + 'foundation.util.box.js',
        JSFoundation + 'foundation.util.triggers.js',
        JSFoundation + 'foundation.util.mediaQuery.js',
        JSFoundation + 'foundation.util.motion.js',
        JSFoundation + 'foundation.reveal.js',
        JSFoundation + 'foundation.offcanvas.js',
        'main.js'
    ]);

 

Nicolas Lemoine over 3 years ago

I fixed the issue temporarily by doing:

var JSJquery = '../../../node_modules/jquery/dist/jquery.js';
var JSFoundation = '../../../node_modules/foundation-sites/dist/foundation.min.js';

mix.scripts([
        JSJquery,
        JSFoundation,
        'main.js'
]);

But it's not really convenient, it loads everything.