Home/ Questions/Q 6184689
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T01:34:48+00:00

How can I move an element horizontally by 10pixels upon an arrow keydown event

  • 0

How can I move an element horizontally by 10pixels upon an arrow keydown event in JQuery? For instance I have 

  <p class="move">This is to be moved</p>

I have tried the following code but it does not work..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery(2)</title>
<style type="text/css">
.Test1{width:100px;}
</style>
<script type="text/javascript"  src="jquery.js">  </script>
<script type="text/javascript">

$(document).ready(function() {


$('#target').keydown(function() {
  alert('Handler for .keydown() called.');
});

});
</script>

</head>

<body>


<div id="parent">
<p id="target">This is a text</p>
</div>
</body>
</html>

The above was supposed to alert me upon a keydown event but it does not..How can I fix this?In other words it does not capture my keydown event..

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    In general? You could handle the keyDown event on its parent.

    For example:

    http://jsfiddle.net/NXEU4/1/

    Difficult to provide a more detailed answer without more information.

    EDIT

    Your code does not work because your browser does not allow the <p> to receive input focus, and hence will not have the keyDown event fire.

    The example I provided is shifting an absolutely positioned element. For your example, you could simply increase the margin-left style.

    EDIT2

    Oops, might want to update the link as well.

    • 0