I’m relatively inexperienced with JavaScript and jQuery, but I’ve figured out how to cause a response to an arrow button press. However, I would like a nested element to change its position in response to the arrow button press. I’ve tried using
document.getElementById("item").style.left = 10px;
- That causes the parent element to change its position to 10px left of the window. I’m using IE as the test browser.
Eventually, the item will only go to the width of the parent tag. I know how to calculate that, but I first need to get the nested element to move, say 10px to the right whenever the right arrow key is pressed. Any help would be greatly appreciated.
Here is my complete code:
<!DOCTYPE HTML>
<html>
<head>
<title>Practice</title>
<style type="text/css">
.holder
{
position: relative;
top:100px;
left:100px;
border:2px solid;
border-color:blue;
width:200px;
height:200px;
z-index:1;
}
.base
{
position: relative;
top:190px;
left:0px;
background-color: black;
width:50px;
height:10px;
z-index:2;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function goRight() {
var lzrItem = document.getElementById("base");
lzrItem.style.left = "10px";
}
</script>
<script>
$(document).keydown(function(event) {
switch (event.keyCode) {
case 37:
alert('left');
break;
case 38:
alert('up');
break;
case 39:
x = $(".base").position();
alert(x.top);
alert(x.left);
alert('You pressed the right arrow');
goRight();
break;
case 40:
alert('down');
break;
}
});
</script>
</head>
<body>
<div class="holder" id="holder" >
<div class="base" id="base">
</div>
</div>
</body>
</html>
Thanks,
Mike
