General
Getting started
After downloading CrossBrowdy and placing it in your working folder (for this example, inside a subfolder called "CrossBrowdy"), create an HTML file with the following content:
<script src="CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
The recommended place to include this main JavaScript file, which is called CrossBrowdy.js, is inside the head section (inside the <head> tag) of the document.
Alternatively, instead of downloading CrossBrowdy, you can hotlink it by directly pointing to a version available online. For instance this way you will be pointing to the last version:
<script src="https://crossbrowdy.com/CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
You can find a list of some CDN providers in the Download section. Thanks to them, you will be able to always use the last up-to-date version or even to point to a specific version you may prefer.
Have in mind that including the CrossBrowdy main file from a CDN provider should never be done for production. This hotlinking method can be useful just for testing purposes. Some features might not work properly using this way and availability cannot be always guaranteed.
After that, then just start the CrossBrowdy framework using JavaScript language, inside the same file:
<script type="text/javascript" language="javascript">
<!--
CB_init(main); //It will start CrossBrowdy and it will call the "main" function when ready.
//This function will be called when CrossBrowdy is ready:
function main()
{
//Now, you can start using CrossBrowdy here...
CB_console("CrossBrowdy started!");
}
// -->
</script>
If desired, the CB_init function can accept more parameters:
//It will start CrossBrowdy and it will call the "main" function when ready:
CB_init
(
//Callback for when CrossBrowdy is loaded successfully:
main, //mainFunction. Optional but recommended.
//Path where the main script is located. If not provided (it is undefined or null), it will try to calculate it calling the 'CB_scriptPathCalculate' function internally:
null, //scriptPath. Optional. Default: CB_scriptPathCalculate().
//Function to call when any of the required files fails to load (because of an error or because its timeout was fired):
//Note: it could be called more than once, for each file which failed loading.
function (filepath, callbackOk, callbackError, timeoutMs, asynchronously, CB_filesRequested, CB_filesLoaded) //onErrorLoadingFile. Optional.
{
CB_console(filepath); //The 'filepath' parameter when 'CB_includeJSFile' was called internally (if any).
CB_console(callbackOk); //The 'callbackOk' parameter when 'CB_includeJSFile' was called internally (if any).
CB_console(callbackError); //The 'callbackError' parameter when 'CB_includeJSFile' was called internally (if any).
CB_console(timeoutMs); //The 'timeoutMs' parameter when 'CB_includeJSFile' was called internally (if any).
CB_console(asynchronously); //The 'asynchronously' parameter when 'CB_includeJSFile' was called (if any).
CB_console(CB_filesRequested); //Object whose indexes are all the filepaths of the script files requested so far and the value is true when the file is still loading (or to be loaded in the future), false if it was loaded successfully (the most likely) or null if it failed to load.
CB_console(CB_filesLoaded); //Numeric array whose values are the filepaths of the script files loaded successfully so far.
},
//Defines whether to show the splash screen or not:
true //showSplashScreen. Optional. Default: CB_Configuration.CrossBrowdy.SHOW_SPLASH_SCREEN_DEFAULT.
);
Finally and optionally, you can create a DOM element with "CB_console" ID which CrossBrowdy will use in the case that the client does not support console:
<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
<div id="CB_console" style="display:none; visibility:hidden; overflow:scroll;">
<span style="font-weight:bold;">Console:</span><br />
</div>
Note that CrossBrowdy will modify the CSS "style" attribute of this DOM element if needed, setting the "display" property to "block" if it is "none" and its "visibility" property to "visible" regardless its previous value.
Here you have a complete example to start with:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My first CrossBrowdy project!</title>
<script src="CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
<script type="text/javascript" language="javascript">
<!--
CB_init(main); //It will call the "main" function when ready.
//This function will be called when CrossBrowdy is ready:
function main()
{
//Now, you can start using CrossBrowdy here...
CB_console("CrossBrowdy started!");
}
// -->
</script>
</head>
<body>
<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
<div id="CB_console" style="display:none; visibility:hidden; overflow:scroll;">
<span style="font-weight:bold;">Console:</span><br />
</div>
</body>
</html>
Check the API documentation to read more about the CB_init and CB_console functions.
