Search code examples
html5boilerplate

Location of jQuery script in HTML5 Boilerplate file?


Does H5BP assume that you will write your JavaScript and jQuery code so that it only executes when the window has fully loaded (using the onload listener)? The reason I ask is that H5BP locates the jQuery inclusion script tag at the bottom of the body tag as shown below. However, the script in which a cookie is being set will not work unless I move the jquery.min.js script element to the head element which precedes the body (and thus the execution of the cookie script). Thanks.

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <p>This is HTML5 Boilerplate.</p>

        <!-- Cookie isn't set when jquery.min.js follows this element block  -->
        <script>
            var test_profile = { browserWidth: $(window).width() };
            document.cookie = "test_profile=" + JSON.stringify(test_profile);
        </script>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    </body>
</html>

Solution

  • That first <script> block depends on jQuery ($(window).width()), so it cannot be used before jQuery has been loaded.

    Just move that cookie script after the other two <script> blocks:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    
    <script>
        var test_profile = { browserWidth: $(window).width() };
        document.cookie = "test_profile=" + JSON.stringify(test_profile);
    </script>