DP_PanelManager:
Useless Animation

Back to the Main Page

All of these examples assume that the library has been imported as noted in the Documentation.

Example

Code Listing

The HTML code:

<div id="AnimationPanel" style="text-align:center; height: 450px; width: 450px; position: relative"></div>

The JavaScript code:


<script language="JavaScript" type="text/javascript" src="DP_PanelManager.js"></script>
<script type="text/javascript">

init = function() {

	PanelManager = new DP_PanelManager();

	var TargetPos = PanelManager.addPanel("AnimationPanel").getPosition();

	var rPanelCnt = 10;
	var cPanelCnt = 10;
	for ( var rCnt = 1; rCnt <= rPanelCnt; rCnt++ ) {
		for ( var cCnt = 1; cCnt <= cPanelCnt; cCnt++ ) {
			var PnlId = "Pnl_" + rCnt + "_" + cCnt;
			var CurPnl = PanelManager.newPanel(PnlId, "span");
				// Style the panel
			CurPnl.style.backgroundColor = getColor();
			CurPnl.style.padding = "0px";
				// Set the size and position
			CurPnl.setSize([40,40]);
			CurPnl.setPosition([TargetPos[1]+(cCnt*40), TargetPos[0]+(rCnt*40)]);
				// Display the panel
			CurPnl.setDisplay("show");
		};
	};

		// Start the shaking
	window.setInterval(shimmyPos, 10);
	window.setInterval(shimmySize, 10);
	window.setInterval(shimmyFade, 100);
	window.setInterval(shimmyOrder, 10);

};

shimmyPos = function() {

	var CurPnlId = "Pnl_" + getRand(10, 1) + "_" + getRand(10, 1);
	var CurPnl = document.getElementById(CurPnlId);
	CurPnl.shiftPosition( [getRand(20) -10, getRand(20) -10], 0, 100 );

};

shimmySize = function() {

	var CurPnlId = "Pnl_" + getRand(10, 1) + "_" + getRand(10, 1);
	var CurPnl = document.getElementById(CurPnlId);
	CurPnl.shiftSize( [getRand(20) -10, getRand(20) -10], 0, 100 );

};

shimmyFade = function() {

	var CurPnlId = "Pnl_" + getRand(10, 1) + "_" + getRand(10, 1);
	var CurPnl = document.getElementById(CurPnlId);
	CurPnl.setOpacity( getRand(100), 0, 100 );

};

shimmyOrder = function() {

	var CurPnlId = "Pnl_" + getRand(10, 1) + "_" + getRand(10, 1);
	var CurPnl = document.getElementById(CurPnlId);
	CurPnl.setOrder("tofront");

};


function getRand(Max, Min) {
	if ( typeof Min != 'number') { Min = 0 };
	Max = Max + 1;
	return (Math.floor( Math.random() * ( Max - Min ) ) + Min);
};

getColor = function() {
		// Function to generate the color part
	var getColorPart = function() {
		var CurColor = Math.floor(255*(Math.random()%1)).toString(16).toUpperCase();
		if ( CurColor.length < 2 ) {
			CurColor = "0" + CurColor;
		};
		return CurColor;
	};
		// Generate and Return the Color
	return "#" + getColorPart() + getColorPart() + getColorPart();
};

</script>