ArtGiven
5/28/2019 - 11:59 AM

HEAD.JS Docs

HEAD.JS Docs
content_copyfile_download
LOADING
//////////////////////////////////////////////////////////////////////////////////
// queue scripts and fire a callback when loading is finished
head.load("file1.js", "file2.js", function() {
    // do something
});

// same as above, but pass files in as an Array
head.load(["file1.js", "file2.js"], function() {
    // do something
});
                                                         
// you can also give scripts a name (label)
head.load({ label1: "file1.js" }, { label2: "file2.js" }, function() {
    // do something
});

// same as above, but pass files in as an Array
head.load([{ label1: "file1.js" }, { label2: "file2.js" }], function() {
    // do something
});                   

// Labels are usually used in conjuntion with: head.ready()
head.ready("label1", function() {
    // do something
});

// Actually if no label is supplied, internally the filename is used for the label
head.ready("file1.js", function() {
    // do something
});
//////////////////////////////////////////////////////////////////////////////////


READY STATES
//////////////////////////////////////////////////////////////////////////////////
head.ready() takes the following arguments
// Attention: subtility here
head.ready(function() {
    // push a function to the end of the page for later execution
    // runs once all files have finished loading
    
    // WARNING: if no files are cued for loading this will NOT trigger !
});

head.ready(document, function() {
    // push a function to the end of the page for later execution
    // runs as soon as the document is ready
});

head.ready("file1.js", function() {
    // execute this function, only when file1.js has finished loading
    // used in conjunction with head.load("file1.js");
});

head.ready(["file1.js", "file2.js"], function() {
    // execute this function, only when file1.js AND file2.js has finished loading
    // used in conjunction with head.load("file1.js", "file2.js");
});

head.ready("label1", function() {
    // execute this function, only when label1 has finished loading
    // used in conjunction with head.load({ label1: "file1.js" });
});

head.ready(["label1", "label2"], function() {
    // execute this function, only when label1 AND label2 has finished loading
    // used in conjunction with head.load([{ label1: "file1.js" }, { label2: "file2.js" }]);
});
//////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////
READ BROWSER:
head.browser.name (string)
head.browser.version (float)
head.browser.ie (bool)
head.browser.ff (bool)
head.browser.chrome (bool)
head.browser.ios (bool)
head.browser.android (bool)
head.browser.webkit (bool)
head.browser.opera (bool)
if (head.browser.ie && head.browser.version < 9) {
    /* code specific to IE but only if IE < 9 */
}
//////////////////////////////////////////////////////////////////////////////////

//////////////////////////////////////////////////////////////////////////////////
CONFIG OPTIONAL:
<html>
    <head>
        <script src="head.min.js" data-headjs-load="init.js"></script>
    </head>
    <body>
        <!-- my content-->

        <script>
            head.ready(function () {
                // some callback stuff
            });
        </script>
    </body>
</html>

conf  = {
    screens   : [240, 320, 480, 640, 768, 800, 1024, 1280, 1440, 1680, 1920],
    screensCss: { "gt": true, "gte": false, "lt": true, "lte": false, "eq": false },
    browsers  : [
                    { ie: { min: 6, max: 11 } }
                    //,{ chrome : { min: 8, max: 31 } }
                    //,{ ff     : { min: 3, max: 26 } }
                    //,{ ios    : { min: 3, max:  7 } }
                    //,{ android: { min: 2, max:  4 } }
                    //,{ webkit : { min: 9, max: 12 } }
                    //,{ opera  : { min: 9, max: 12 } }
    ],
    browserCss: { "gt": true, "gte": false, "lt": true, "lte": false, "eq": true },
    html5     : true,
    page      : "-page",
    section   : "-section",
    head      : "head"
};
If you wanted to change what screen breakpoints HeadJS uses, then you would do something like this

<html>
    <head>
        <script>
            var head_conf = {
                screens: [1024, 1280, 1440, 1680, 1920]
            };
        </script>
        <script src="head.min.js"></script>
    </head>
    <body>
        <!-- my content-->
    </body>
</html>
//////////////////////////////////////////////////////////////////////////////////