francisco-perez-sorrosal/moving_box.html

## moving_box.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>

		<style type="text/css">

		body{background-color:#ccc}
		#box{
			width:100px;
			height:100px;
			background-color:red;
			position:absolute;
			left:50%;
			top:50%;
			margin-left:-50px;
			margin-top:-50px;
		}

		</style>

		<script type="application/javascript">

		console.log("Example that uses events in Javascript to move and re-arrange a box on the screen");

		function playingWithBox( window, document, undefined ) {

		    // Don't use body to add event handlers; e.g. body.addEventListener...
		    var body = document.getElementsByTagName( 'body' )[0];
		    console.log( body, typeof body, body.constructor.toString() );

		    var box = document.getElementById( 'box' );
		    console.log( box, typeof box );

			// Point in box used to perform calculations
			var boxleft = box.offsetLeft;
			var boxwidth = box.offsetWidth;

			// Box movement properties
			var step = 10;
			var angle = 0;
			var spin = false;

			var move = { // This is a JS object
				moveLeft : function() {
					// From the bottom-right pixel towards the right side
					console.log( 'Moving box left' );
					box.style.left = box.offsetLeft + ( boxwidth/2 ) - step + 'px';
				},
				moveRight : function() {
					console.log( 'Moving box right' );
					box.style.left = box.offsetLeft + ( boxwidth/2 ) + step + 'px';
				},
				moveUp : function() {
					console.log( 'Moving box up...' );
					box.style.top = box.offsetTop + ( box.offsetHeight/2 ) - step + 'px';
				},
				moveDown : function() {
					console.log( 'Moving box down...' );
					box.style.top = box.offsetTop + ( box.offsetHeight/2 ) + step + 'px';
				}
			}

			var resize = {
				resizeLeft : function() {
					box.style.width = box.offsetWidth + step + 'px';
					move.moveLeft();
				},
				resizeRight : function() {
					box.style.width = box.offsetWidth + step + 'px';
				}
			}

			// Defining events

			// Functions must be placed before the event
			var onClick = function( e ) {
				console.log( 'Click!', e );
			}

			// If the function were not assigned to a variable, it would be executed
			// when entering to the script section
			var dblClick = function( e ) {
				console.log( 'Double click!', e );
				if( !spin ) {
					spin = setInterval(function() {
						// Chrome uses WebkitTranform
						box.style.MozTransform = 'rotate(' + angle + 'deg)'
						angle = angle + 1;
					}, 5 );
				} else {
					console.log( spin );
					clearInterval( spin );
					spin = false;
				}
			}

			var keyDown = function( e ) {
				console.log('Key pressed: ', e);
				switch(e.keyCode) {
					case 13: test(); break;
					case 37: ( e.shiftKey ? resize.resizeLeft() : move.moveLeft() ); break;
					case 38: move.moveUp(); break;
					case 39: ( e.shiftKey ? resize.resizeRight() : move.moveRight() ); break;
					case 40: move.moveDown(); break;
					default: console.log( 'This key is not allowed: ', e.keyCode );//e.preventDefault();
				}
			}

			// Specific listeners for modern browsers. This function doesn't work in all browsers
			//window.addEventListener( 'click', onClick, false );
			//window.addEventListener( 'dblclick', dblClick, false );
			//window.addEventListener( 'keydown', keyDown, false );
			addEvent( window, 'click', onClick );
			addEvent( box, 'dblclick', dblClick );
			addEvent( window, 'keydown', keyDown );

			// This function is prepared to work in (almost) all browsers
			function addEvent( element, event, callback ) {
				if( element.addEventListener ) { // Firefox
					element.addEventListener( event, callback, false );
				} else if ( element.attachEvent ) {
					element.attachEvent( 'on' + event, callback );
				} else {
					element( 'on' + event ) = callback;
				}
			}
		}

		</script>

	</head>

	<body onload="playingWithBox(this, this.document)">
		<h1>Example that uses events in Javascript to move and re-arrange a box on the screen</h1>
		<div id="box"/>
	</body>

</html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>

	<head>

	<style type="text/css">

	body{background-color:#ccc}
	#box{
	width:100px;
	height:100px;
	background-color:red;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-50px;
	margin-top:-50px;
	}

	</style>

	<script type="application/javascript">

	console.log("Example that uses events in Javascript to move and re-arrange a box on the screen");

	function playingWithBox( window, document, undefined ) {

	// Don't use body to add event handlers; e.g. body.addEventListener...
	var body = document.getElementsByTagName( 'body' )[0];
	console.log( body, typeof body, body.constructor.toString() );

	var box = document.getElementById( 'box' );
	console.log( box, typeof box );

	// Point in box used to perform calculations
	var boxleft = box.offsetLeft;
	var boxwidth = box.offsetWidth;

	// Box movement properties
	var step = 10;
	var angle = 0;
	var spin = false;

	var move = { // This is a JS object
	moveLeft : function() {
	// From the bottom-right pixel towards the right side
	console.log( 'Moving box left' );
	box.style.left = box.offsetLeft + ( boxwidth/2 ) - step + 'px';
	},
	moveRight : function() {
	console.log( 'Moving box right' );
	box.style.left = box.offsetLeft + ( boxwidth/2 ) + step + 'px';
	},
	moveUp : function() {
	console.log( 'Moving box up...' );
	box.style.top = box.offsetTop + ( box.offsetHeight/2 ) - step + 'px';
	},
	moveDown : function() {
	console.log( 'Moving box down...' );
	box.style.top = box.offsetTop + ( box.offsetHeight/2 ) + step + 'px';
	}
	}

	var resize = {
	resizeLeft : function() {
	box.style.width = box.offsetWidth + step + 'px';
	move.moveLeft();
	},
	resizeRight : function() {
	box.style.width = box.offsetWidth + step + 'px';
	}
	}

	// Defining events

	// Functions must be placed before the event
	var onClick = function( e ) {
	console.log( 'Click!', e );
	}

	// If the function were not assigned to a variable, it would be executed
	// when entering to the script section
	var dblClick = function( e ) {
	console.log( 'Double click!', e );
	if( !spin ) {
	spin = setInterval(function() {
	// Chrome uses WebkitTranform
	box.style.MozTransform = 'rotate(' + angle + 'deg)'
	angle = angle + 1;
	}, 5 );
	} else {
	console.log( spin );
	clearInterval( spin );
	spin = false;
	}
	}

	var keyDown = function( e ) {
	console.log('Key pressed: ', e);
	switch(e.keyCode) {
	case 13: test(); break;
	case 37: ( e.shiftKey ? resize.resizeLeft() : move.moveLeft() ); break;
	case 38: move.moveUp(); break;
	case 39: ( e.shiftKey ? resize.resizeRight() : move.moveRight() ); break;
	case 40: move.moveDown(); break;
	default: console.log( 'This key is not allowed: ', e.keyCode );//e.preventDefault();
	}
	}

	// Specific listeners for modern browsers. This function doesn't work in all browsers
	//window.addEventListener( 'click', onClick, false );
	//window.addEventListener( 'dblclick', dblClick, false );
	//window.addEventListener( 'keydown', keyDown, false );
	addEvent( window, 'click', onClick );
	addEvent( box, 'dblclick', dblClick );
	addEvent( window, 'keydown', keyDown );

	// This function is prepared to work in (almost) all browsers
	function addEvent( element, event, callback ) {
	if( element.addEventListener ) { // Firefox
	element.addEventListener( event, callback, false );
	} else if ( element.attachEvent ) {
	element.attachEvent( 'on' + event, callback );
	} else {
	element( 'on' + event ) = callback;
	}
	}
	}

	</script>

	</head>

	<body onload="playingWithBox(this, this.document)">
	<h1>Example that uses events in Javascript to move and re-arrange a box on the screen</h1>
	<div id="box"/>
	</body>

	</html>