Does the order of what is called in the header of a HTML document matter?

Question

I called WOW.js and Animate.js in a document:

<head>

    <meta charset="uft-8">
    <meta name="viewport" content="width=device-width">
    <title> Portfolio </title>
    <!-- angularJS -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <!-- JQuery -->
        <script src="JS/jQuery.min.js"></script>

        <!-- Bootstrap -->


            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

            <!-- Optional theme -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

            <!-- Latest compiled and minified JavaScript -->
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

        <!-- Font Awesome CDN -->
        <script src="https://use.fontawesome.com/e42f2bbc33.js"></script>

        <!-- CSS -->
            <link rel="stylesheet" type="text/css" href="index.css">

        <script src="JS/wow.min.js"></script>

        <link rel="stylesheet" href="animate/animate.min.css">


        <!-- Raleway font -->
            <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

</head>

But when I actually use WOW.js, it doesnt work at all and instead leaves elements blank all together. I know that these files and the syntax is correct because when I tried in a seperate HTML document within the same directory (same indexes), it worked:

<head>

<script src="JS/wow.min.js"></script>

<link rel="stylesheet" href="animate/animate.min.css">

<script>
        new WOW().init();
</script>
</head>
<body>

    <div id="block" style="height: 800px; background-color: green">
    helo

    </div>

    <h1 class="wow fadeInUp"> Hello </h1>

</body>

And when I add the things from the other document such as bootstrap and jQuery, it stops working. My question is: why does it not work when more links are added and how do I fix it. I don't think a JSFiddle or live link is necessary as the problem is only in the head and I followed the rest of the syntax to the tea. But, if you really need it:

This is the working use of the plugin WOW.js and AnimateCSS: https://jsfiddle.net/xs2b49qs/

This is the non-working use of the plugin WOW.js and AnimateCSS: https://jsfiddle.net/hv4Lv4g3/

What I also noticed while making the JSFiddles is without the CSS/style component of the document, it actually works. But as soon as I added the style CSS component, it doesnt work.

Can any of you tell me why this is?

Thanks for all answers!

score 0 · Answer 1 · answered Aug 02 '16 at 21:27

Found the answer: Before I had:

html, body{
    height: 100%;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
}

And for some reason this didnt allow the WOW.js plugin to work

But then I changed it to:

html, body{
    margin: 0 auto;
    overflow-x: hidden;
}

.. and it worked!

Im not sure if this has side effects to it though. Will comment if there is!

Does the order of what is called in the header of a HTML document matter?

1 Answers1