javascript div movement not working
Posted
by William
on Stack Overflow
See other posts from Stack Overflow
or by William
Published on 2010-06-13T21:07:47Z
Indexed on
2010/06/13
21:12 UTC
Read the original article
Hit count: 199
For some reason I can't move this div at all. Can anyone help me out with why this won't work?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Move Div Test</title>
<meta charset="utf-8" />
<link href="/bms/style.css" rel="stylesheet" />
<style>
body { text-align: center; background-color: #ffffff;}
#box { position: absolute; left: 610px; top: 80px; height: 50px; width: 50px; background-color: #ff0000;}
</style>
<script type="text/javascript">
document.onkeydown=function(event){keyDown(event)};
document.onkeyup=function(event){keyUp(event)};
var box = document.getElementById('box');
var speed = 5;
var keys = new Array(256);
var i = 0;
for (i = 0;i <= 256; i++){
keys[i] = false;
}
function keyDown(event){
if(!event){
//for IE
event = window.event;
}
keys[event.keyCode] = true;
}
function keyUp(event){
if(!event){
//for IE
event = window.event;
}
keys[event.keyCode] = false;
}
function update(){
if(keys[37]) box.style.left = parseInt(box.style.left) - speed + "px";
if(keys[39]) box.style.left = parseInt(box.style.left) + speed + "px";
if(keys[38]) box.style.top = parseInt(box.style.top) - speed + "px";
if(keys[40]) box.style.top = parseInt(box.style.top) + speed + "px";
}
setInterval('update();', 1000/60);
</script>
</head>
<body>
<div id="box">blah</div>
</body>
</html>
© Stack Overflow or respective owner
