CrossBrowdy - Examples

Others

Symmetric intervals

This is an example managing symmetric intervals:

index.html:

<!DOCTYPE html>
<html>
	<head>
		<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" />
		<title>Others: Symmetric intervals - Example</title>
		<!-- Loads the needed CSS files: -->
		<link rel="stylesheet" type="text/css" href="main.css" />
		<!-- Loads CrossBrowdy.js (main file): -->
		<script src="CrossBrowdy/CrossBrowdy.js" 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>
	</head>
	<body>
		The values may vary during time. Wait as much as you want...
		<br />
		<br />
		requestAnimationFrame (could have been polyfilled automatically by CrossBrowdy):
		<br />
		<span id="raf">
			Minimum time: <span id="raf_min_time"></span><br />
			Maximum time: <span id="raf_max_time"></span><br />
		</span>
		<br />
		<br />
		CB_symmetricCall at 8 ms:
		<br />
		<span id="sym8">
			Minimum time: <span id="sym8_min_time"></span><br />
			Maximum time: <span id="sym8_max_time"></span><br />
		</span>
		<br />
		<br />
		CB_symmetricCall at 16 ms:
		<br />
		<span id="sym16">
			Minimum time: <span id="sym16_min_time"></span><br />
			Maximum time: <span id="sym16_max_time"></span><br />
		</span>
		<br />
		<br />
		CB_symmetricCall at 1000 ms:
		<br />
		<span id="sym1000">
			Minimum time: <span id="sym1000_min_time"></span><br />
			Maximum time: <span id="sym1000_max_time"></span><br />
		</span>
		<br />
		<br />
		Messages:
		<div id="messages"></div>
		<br />
		<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
		<div id="CB_console" style="visibility:hidden; overflow:scroll;">
			<span style="font-weight:bold;">Console:</span><br />
		</div>
		<div id="crossbrowdy_info"><a href="/guides#examples" target="_blank">CrossBrowdy.com</a> example</div>
	</body>
</html>

main.css:

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; }
#messages { color:#ffffff; background-color:#aa0000; font-weight:bold; width:100%; height:300px; overflow:auto; }

main.js:

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


//Stores times information:
var times =
{
	"raf": { min: 1000 / 60, max: null, timer: null, lastTimeCalled: 0 },
	"sym8": { ms: 8, min: null, max: null, timer: null, lastTimeCalled: 0 },
	"sym16": { ms: 16, min: null, max: null, timer: null, lastTimeCalled: 0 },
	"sym1000": { ms: 1000, min: null, max: null, timer: null, lastTimeCalled: 0 }
};


//Starts timers (will also be called when CrossBrowdy is ready):
function start()
{
	//Clears any previous timers and stored internal data and start timers:
	for (var id in times)
	{
		if (id === "raf") { cancelAnimationFrame(times[id].timer); }
		else
		{
			clearTimeout(times[id].timer);
			CB_symmetricCallClear(id); //Clears the stored last time used by 'CB_symmetricCall' for a given symmetric interval identifiers.
		}
		times[id].min = null;
		times[id].max = null;
		times[id].lastTimeCalled = null;
		
		CB_Elements.insertContentById(id + "_min_time", "Calculating...");
		CB_Elements.insertContentById(id + "_max_time", "Calculating...");
		
		printMessage("Starting timer for '" + id + (times[id].ms ? "' using " + times[id].ms + " milliseconds" : "'") + "...");
		loop(null, id, times[id].ms);
	}
}


//Loop function:
function loop(timeCalled, id, ms)
{
	calculateTime(id, timeCalled);
	if (id === "raf") { times[id].timer = requestAnimationFrame(function(time) { loop(time, id); }); }
	else { times[id].timer = CB_symmetricCall(function(time) { loop(time, id, ms); }, ms, id); } //Similar to 'requestAnimationFrame'.
}

//Calculates and stores times:
function calculateTime(id, timeCalled)
{
	if (typeof(timeCalled) === "undefined" || timeCalled === null) { return; }
	else if (times[id].lastTimeCalled === null) { times[id].lastTimeCalled = timeCalled; return; }
	
	//Calculate times:
	var timeDifference = timeCalled - times[id].lastTimeCalled;
	if (timeDifference < times[id].min || times[id].min === null) { times[id].min = timeDifference; printMessage("Minimum set for '" + id + "': " + timeDifference); }
	if (timeDifference > times[id].max || times[id].max === null) { times[id].max = timeDifference; printMessage("Maximum set for '" + id + "': " + timeDifference); }
	times[id].lastTimeCalled = timeCalled;
	
	//Shows the times:
	showTime(id);
}


//Shows times updated:
function showTime(id)
{
	CB_Elements.insertContentById(id + "_min_time", times[id].min);
	CB_Elements.insertContentById(id + "_max_time", times[id].max);
}


//Shows a message:
function printMessage(message)
{
	message = CB_trim(message);
	if (message === "") { CB_Elements.insertContentById("messages", ""); }
	else { CB_Elements.appendContentById("messages", message + "<br />"); }
	CB_Elements.id("messages").scrollTop = CB_Elements.id("messages").scrollHeight; //Scrolls to the bottom.
}

Try this example

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

Go back to Guides & Tutorials

« PrevReturnNext »
CrossBrowdy by Joan Alba Maldonado