CODEWITHSUNDEEP
javascriptjquery
Sora
Sora

Reputation: 2551

moving a child div to right using the arrow key

the code :

Html :

<div id="Container" class="Container">
<div id="PLayer"  class="player" ></div>
</div>

css:

<style type="text/css">
 .Container
 {
  width:200px;
   height:200px;
  }
 .player
{
 width:10px;
 height:10px;
 background-color:Red;
 position: absolute;
 }   
</style>

js:

$("body").keydown(function (e) {

        var KeyID = e.KeyCode || e.which;
        if (KeyID === 39) //right 
        {
            $("#Player").animate({ 'right': '20px' });
        }
    });

but Player don't seem to move at all any suggestions ?

Upvotes: 0

Views: 180

Answers (3)

Rikky
Rikky

Reputation: 515

You should make it move right more 20px from it's current position:

$(".Player").animate({ 'right': '+=20px' });

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150030

You have to match the case on the id. You have:

id="PLayer"

and:

$("#Player")

Change the uppercase "L" in the element's id to lowercase and it will work: http://jsfiddle.net/V27DZ/1/

...assuming that you have the JavaScript code in a script block that appears after the element, or you have wrapped it in a document ready handler.

Note also that by animating the right property you are setting how far it is from the right-hand edge of the page. If you intend for it to simply move over 20px to the right of its current position, do this instead:

$("#Player").animate({ 'left': '+=20px' });

That is, add 20px to the current left position. Wouldn't hurt to give it an initial position too: http://jsfiddle.net/V27DZ/2/

Finally, note that you don't have to test e.keyCode because jQuery normalises e.which for you, but if you do test e.keyCode remember that JS is case sensitve and you need a lowercase "k".

Upvotes: 0

Jay Shukla
Jay Shukla

Reputation: 5826

It will work but use class selector.

$(".Player").animate({ 'right': '+=20px' });

If you have multiple divs which have Player as class value then all div will move.

Upvotes: 0

Related Questions