Ok,
I am trying to code a piece of JS so that I can move a div around on the page using the keyboards arrow keys.
So far I have the following…
<HTML>
<HEAD>
<TITLE>Cursor Mover</TITLE>
<SCRIPT>
function move(e)
{
if(window.event) // IE
{
ek = window.event.keyCode;
if (ek==37)
document.getElementById('DIV1').style.left = (document.getElementById('DIV1').style.left - 5);
if (ek==39)
document.getElementById('DIV1').style.left = (document.getElementById('DIV1').style.left + 5);
if (ek==38)
document.getElementById('DIV1').style.top = (document.getElementById('DIV1').style.left - 5);
if (ek==40)
document.getElementById('DIV1').style.top = (document.getElementById('DIV1').style.top + 5);
}
else // Other browsers
{
ek = e.which
if (ek==37)
document.getElementById('DIV1').style.left = (document.getElementById('DIV1').style.left - 5);
if (ek==39)
document.getElementById('DIV1').style.left = (document.getElementById('DIV1').style.left + 5);
if (ek==38)
document.getElementById('DIV1').style.top = (document.getElementById('DIV1').style.left - 5);
if (ek==40)
document.getElementById('DIV1').style.top = (document.getElementById('DIV1').style.top + 5);
}
}
</SCRIPT>
<STYLE TYPE="TEXT/css">
#DIV1
{
position: absolute;
background-color:#000000;
height:20;
width:20;
top:100px;
left:100px;
}
</style>
</HEAD>
<BODY onkeydown="move(event);">
<div id="DIV1" style=""></DIV>
</BODY>
</HTML>
Now the problems…
In both IE and Firefox when you press an arrow key the div suddenly jumps to the left top corner of the screen.
In IE if you try to press an arrow key again it shows an error.
In firefox if you try to press an arrow key again it does nothing.
Im obviously doing something wrong.
Any ideas?
Thanks