CODEWITHSUNDEEP
javascriptcssasp.net-corezurb-foundationzurb-foundation-6
user3807918
user3807918

Reputation: 375

Zurb Foundation JavaScript does not appear to run

I am looking at working with Foundation controls in ASP.Net Core. The controls which use JavaScript don't work - they don't produce errors but they don't do things like move or drop down. The other controls work fine.

Here is the source of one of them. I have added all the JavaScript libraries though some may be referenced by others. The control is displayed but does not move.

I don't know what is missing unless the code needs to be wrapped in other tags.

<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/Content/foundation.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
</head>
<body>
    <div class="slider" data-slider data-initial-start="50" data-end="100">
        <span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
        <span class="slider-fill" data-slider-fill></span>
        <input type="hidden">
    </div>
    <script src="/Scripts/jquery-3.4.1.js"></script>

    <script src="/Scripts/foundation.js"></script>
<script src="/Scripts/plugins/foundation.core.js"></script>
<script src="/Scripts/plugins/foundation.slider.js"></script>
<script src="/Scripts/plugins/foundation.util.motion.js"></script>
<script src="/Scripts/plugins/foundation.util.triggers.js"></script>
<script src="/Scripts/plugins/foundation.util.keyboard.js"></script>
<script src="/Scripts/plugins/foundation.util.touch.js"></script>
<script src="/Scripts/plugins/foundation.accordionMenu.js"></script>
<script src="/Scripts/plugins/foundation.util.nest.js"></script>

    <script>
        $(document).foundation();
    </script>
    
</body>
</html>

Upvotes: 0

Views: 64

Answers (1)

user3807918
user3807918

Reputation: 375

fixed. The issue was that I should have just linked to foundation.js. However, the "no-js" is not needed but you have to add the "$(document).foundation();" into your source file just before the tag as I have above.

Upvotes: 0

Related Questions