DP_PanelManager:
It's a Frog

Back to the Main Page
All of these examples assume that the library has been imported as noted in the Documentation.
Example

You can drag the little black fly around.
It's like a game!
But not.
()The number is the Bearing.)
Code Listing

The code for the above form and the related script follows:

<script type="text/javascript">

	PanelManager = new DP_PanelManager();

		// Create Panel out of the Body Element
	myBody = PanelManager.addPanel("BODY");
		// Capture mouse movements
	myBody.addEvent("mousemove",  dragger);

		// The dragger function - moves whatever element is in the "dragger.Element" container to match the mouse position
	function dragger(Event) {
		if ( dragger.Element ) {
			CurMousePos = PanelManager.getMousePosition(Event);
			dragger.Element.setPosition([CurMousePos[0] - dragger.ClickOffset[0], CurMousePos[1] - dragger.ClickOffset[1]]);
				// Test Collision Detection
			if ( dragger.Element.hasCollisionWith("Frog") ) {
				FrogMouth.setSize([15, 75]);
				dragger.Element.style.backgroundColor = "red";
			} else {
				FrogMouth.setSize([5, 75]);
				dragger.Element.style.backgroundColor = "black";
			};
				// Set Frog Eyes
			var Bearing = dragger.Element.getDistanceFrom("Frog")[2] + 22.5;
			if ( Bearing > 359 ) { Bearing = Bearing - 359 };
			Bearing = Math.floor(Bearing / 45);
			switch (Bearing) {
				case 0:
					FrogLEye.setPosition([205,705]);
					FrogREye.setPosition([205,755]);
					break;
				case 1:
					FrogLEye.setPosition([205,700]);
					FrogREye.setPosition([205,750]);
					break;
				case 2:
					FrogLEye.setPosition([200,700]);
					FrogREye.setPosition([200,750]);
					break;
				case 3:
					FrogLEye.setPosition([195,700]);
					FrogREye.setPosition([195,750]);
					break;
				case 4:
					FrogLEye.setPosition([195,705]);
					FrogREye.setPosition([195,755]);
					break;
				case 5:
					FrogLEye.setPosition([195,710]);
					FrogREye.setPosition([195,760]);
					break;
				case 6:
					FrogLEye.setPosition([200,710]);
					FrogREye.setPosition([200,760]);
					break;
				case 7:
					FrogLEye.setPosition([205,710]);
					FrogREye.setPosition([205,760]);
					break;
			};
				// Load Info
			Frog.load("<div style='text-align: center; font-weight: bold; color: white;'>" + dragger.Element.getDistanceFrom("Frog")[2] + "</div>");
		};
	};

		// Create containers for the Dragged object
	dragger.Element = null;
	dragger.ClickOffset = [0,0];

		// Create the "frog" Panels
	F = PanelManager.newPanel("Frog");
	FLRidge = PanelManager.newPanel("FrogLRidge");
	FRRidge = PanelManager.newPanel("FrogRRidge");
	FLEye = PanelManager.newPanel("FrogLEye");
	FREye = PanelManager.newPanel("FrogREye");
	FMouth = PanelManager.newPanel("FrogMouth");

		// Style the Frog
	F.style.backgroundColor = "green";
	FLRidge.style.backgroundColor = "green";
	FRRidge.style.backgroundColor = "green";
	FLEye.style.backgroundColor = "black";
	FREye.style.backgroundColor = "black";
	FMouth.style.backgroundColor = "black";
	FMouth.style.fontSize = "1px";

		// Size and position
	F.setSize([75, 125]);
	F.setPosition([220,675]);
	FLRidge.setSize([25, 25]);
	FLRidge.setPosition([195,700]);
	FRRidge.setSize([25, 25]);
	FRRidge.setPosition([195,750]);
	FLEye.setSize([15, 15]);
	FLEye.setPosition([200,705]);
	FREye.setSize([15, 15]);
	FREye.setPosition([200,755]);
	FMouth.setSize([5, 75]);
	FMouth.setPosition([270,700]);

		// Display the Frog
	F.setDisplay("show");
	FLRidge.setDisplay("show");
	FRRidge.setDisplay("show");
	FLEye.setDisplay("show");
	FREye.setDisplay("show");
	FMouth.setDisplay("show");


		// Create a draggable Panel
	Fy = PanelManager.newPanel("Fly");
		// Style the Panel
	Fy.style.backgroundColor = "black";
		// Size and position
	Fy.setPosition([210,900]);
	Fy.setSize([15, 15]);
		// Display the panel
	Fy.setDisplay("show");
		// Register Events
	Fy.addEvent("mousedown", startDrag);
	Fy.addEvent("mouseup", endDrag);

		// Start Drag Event
	function startDrag(Event) {
			// Set the Current Panel Opacity
		this.setOpacity(50, 0, 100);
			// Set the dragger
		dragger.Element = this;
			// Get the Current Mouse Position
		var CurMousePos = PanelManager.getMousePosition(Event);
			// Get the Current Panel Position
		var CurPanelPos = this.getPosition();
			// Calculate the Panel Click Position
		dragger.ClickOffset = [(CurMousePos[0] - CurPanelPos[0]), (CurMousePos[1] - CurPanelPos[1])];
	};
		// End Drag Event
	function endDrag(Event) {
			// Set the Current Panel Opacity
		this.setOpacity(100, 0, 100);
			// Reset the dragger properties (nothing is being dragged
		dragger.Element = null;
		dragger.ClickOffset = [0,0];
	};

</script>
DP_PanelManager:It's a Frog

Example

Code Listing

DP_PanelManager:
It's a Frog
