Skip to content

Instantly share code, notes, and snippets.

@japaz
Forked from francisco-perez-sorrosal/moving_box.html
Created September 26, 2011 20:22
Show Gist options
  • Save japaz/1243293 to your computer and use it in GitHub Desktop.
Save japaz/1243293 to your computer and use it in GitHub Desktop.
My html containing the moving box Javascript example implemented in class with Carlos Benítez (Madrid, 14/Sep/2011)
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment