Menu icon Foundation
Conflict orbit.js and abide.js

Hi everyone,

I've attached all the js I need before closing :

<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.orbit.js"></script> 
<script src="js/foundation/foundation.reveal.js"></script> 
<script src="js/foundation/foundation.topbar.js"></script>
            

         

Every plugins work fine.

The problem is that I want to use also Abide plugin and Foundation recommends placing abide.js right after foundation.js:

<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.abide.js"></script> 
            

         

Now Abide check my form correctly but Orbit Slider doesn't work anymore. What's the right order of javascript sources in my html page?
Thanks

Orbitabide

Hi everyone,

I've attached all the js I need before closing :

<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.orbit.js"></script> 
<script src="js/foundation/foundation.reveal.js"></script> 
<script src="js/foundation/foundation.topbar.js"></script>
            

         

Every plugins work fine.

The problem is that I want to use also Abide plugin and Foundation recommends placing abide.js right after foundation.js:

<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.abide.js"></script> 
            

         

Now Abide check my form correctly but Orbit Slider doesn't work anymore. What's the right order of javascript sources in my html page?
Thanks

Rafi Benkual almost 5 years ago

If you are using multiple Foundation JS components, you should use foundation.min.js which is the entire library.

Foundation.js is only a core function file if you use plugins individually.

If you do that, the order should be

 <script src="js/vendor/jquery.js"></script> 
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.abide.js"></script> 
<script src="js/foundation/foundation.orbit.js"></script> 
<script src="js/foundation/foundation.reveal.js"></script> 
<script src="js/foundation/foundation.topbar.js"></script>