CrossBrowdy - Examples


Vibration and others

This is an example managing vibration and others:


<!DOCTYPE html>
		<!-- This file belongs to a example, made by Joan Alba Maldonado. -->
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="canonical" href="" />
		<title>Device: Vibration and others - Example</title>
		<!-- Loads the needed CSS files: -->
		<link rel="stylesheet" type="text/css" href="main.css" />
		<!-- Loads CrossBrowdy.js (main file): -->
		<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
		<script src="" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
		<!-- Loads the other needed script files: -->
		<script src="main.js" type="text/javascript" language="javascript"></script>
		Vibration API support: <span id="vibration_api"></span><br />
		<br />
		<div id="vibration_controls">
			<button onClick="vibrateOnce();">Vibrate once</button>
			<button onClick="vibrateMoreTimes();">Vibrate more times</button>
			<button onClick="vibrateStop();">Stop vibration</button>
			<br />
			<br />
		Timestamp: <span id="timestamp"></span>
		<br />
		Timing: <span id="timing"></span>
		<br />
		<!-- 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 id="crossbrowdy_info"><a href="" target="_blank"> example</a></div>


/* This file belongs to a example, made by Joan Alba Maldonado. */

body { background-color:#aaddee; word-wrap:break-word; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
span { color:#aa0000; }
button { color:#006600; }
button:hover { color:#660000; cursor:pointer; cursor:hand; }
#vibration_controls { display:none; visibility:hidden; }


/* This file belongs to a example, made by Joan Alba Maldonado. */

CB_init(main); //It will call the "main" function when ready.

//This function will be called when CrossBrowdy is ready:
function main()
	//Shows the current time:

	//Device vibration management:
	if (CB_Device.Vibration.isSupported())
		CB_console("The device vibration is supported (through the Vibration API or compatible ones as Apache Cordova's Vibration plugin).");
		CB_Elements.insertContentById("vibration_api", "Yes");
		CB_console("The device vibration is not supported.");
		CB_Elements.insertContentById("vibration_api", "No");

//Shows the current time:
function showCurrentTime()
	//Gets a timestamp in milliseconds (elapsed since 1st of January 1970 00:00:00 UTC) representing the current time:
	var currentTimestamp = CB_Device.getTime(); //If possible and the CB_Configuration.CrossBase.CB_Device_getTime_HIGH_PRECISION option is enabled, it will use high resolution time which is more precise.
	CB_Elements.insertContentById("timestamp", currentTimestamp);

	//Gets the time elapsed since the "time origin" (
	var currentTiming = CB_Device.getTiming(); //If possible, it will use high resolution time which is more precise.
	CB_Elements.insertContentById("timing", currentTiming);
	//Calls itself again:
	setTimeout(showCurrentTime, 1);

//Vibrates once:
function vibrateOnce()
	CB_Device.Vibration.start(1000); //Vibrates 1 second.

//Vibrates more times:
function vibrateMoreTimes()
	CB_Device.Vibration.start(1000); //Vibrates 1 second.
	CB_Device.Vibration.start([2000, 1000, 3000, 1000, 5000]); //Vibrates 2 seconds, waits 1 second, vibrates 3 seconds, waits 1 second and vibrates 5 seconds.

//Stops vibration:
function vibrateStop()
	//Stops vibrating:
	CB_Device.Vibration.stop(); //The same as calling 'CB_Device.Vibration.start(0)'.

Try this example

You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.

All the examples together can be downloaded here.

Go back to Guides & Tutorials

Try this example