CrossBrowdy - Basic tutorial

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 script file is inside the head section (inside the <head> tag) of the document.

Alternatively, you can also use the last CrossBrowdy version by including the CrossBrowdy main script file which is available online:


	<script src="https://crossbrowdy.com/CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->

Have in mind that including the CrossBrowdy main file which is online 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.

Go back to Guides & Tutorials