fleimisch/HEAD.JS Docs

## HEAD.JS Docs
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>
//////////////////////////////////////////////////////////////////////////////////
	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>
	//////////////////////////////////////////////////////////////////////////////////