Question

Can anybody tell me why this is not working jsfiddle Code?

JavaScript:

$(document).ready(function() {
        $(document).live("keydown", KeyOperation);
});

function KeyOperation(e)
{
    alert("in");
    var top = $(".move").offset().top;
    var left = $(".move").offset().left;
    var IncrementBy = 10;

    if (e.which == 37) {
        $(".move").css({ left: left - 10 });
    }
    else if (e.which == 38) {
        $(".move").css({ top: top - IncrementBy });
    }
    else if (e.which == 39) {
        $(".move").css({ left: left + IncrementBy });
    }
    else if (e.which == 40) {
        $(".move").css({ top: top + IncrementBy });
    }
}​

HTML:

<div class="move"></div>​

CSS:

.move
{
    width: 100px;
    height:100px;
    border:1px solid red;
}​

Answer 1

Assuming the problem is that the element does not move (you don’t really make the problem clear in your question), the reason is that the element is not positioned correctly.

Add position: absolute or position: relative to your CSS.

Here’s an updated fiddle.