Moving image left and right with jQuery

Question

OK, here is the updated, and working code. Making the image relative did the trick. Now the only thing left is as soon as I remove my finger from the key, I want the image to stop moving. How would I properly use the keyup?

<html>
<head></head>
<body>
        <img id="pic" src="run0.png" alt="image" height="100" width="100" style="position: relative;"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script> 

$(document).keydown(function(event){
     var keycode = (event.keyCode ? event.keyCode : event.which);                
                if(keycode == '39'){
                    $("#pic").animate({
                         left: '+=10px',
                    });
                }
     });

</script>
    </body>
</html>

I would also prefer no to have to put an image on the document first with HTML, but to just append it to the document from Javascript/jQuery. And if anyone can help me do it with pure Javascript that would be appreciated.

You have syntax errors in there: `(index):27 Uncaught SyntaxError: missing ) after argument list` — toesslab, Nov 28 '15 at 08:48
After the `var keycode = ...` line you have a random ending curly brace. — Sam, Nov 28 '15 at 08:51

score 2 · Answer 1 · edited May 23 '17 at 12:06

2

Arrow keys can't be detected with keypress. Read : Detecting arrow key presses in JavaScript

Also for the left property to affect the image.. it should be absolutely placed in page. Here is a sample demo : https://jsfiddle.net/6haxsbz9/

HTML:

<img id="pic" src="https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="image" width="100" />

CSS:

img {
    position:absolute;
    left:10px;
    top:10px;
}

JS:

$(function () {

    $(document).keydown(function (event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '39') {
            $("#pic").animate({
                left: '+=5px',
            });
        }
    });

});

edited May 23 '17 at 12:06

Community

1
1

answered Nov 28 '15 at 08:59

loxxy

12,990
2
25
56

You were faster... I'll delete my answer – toesslab Nov 28 '15 at 09:01
making the position relative did the trick. From reading the stuff from the link, it seems keypress only works with some browsers while keyup/down is more universal. (See my edit) just need the animation to stop on keyup. – Jona Nov 28 '15 at 18:22

toesslab · Answer 2 · 2016-09-29T14:22:51.117

First, as said in the comments, fix syntax errors!

Then you want to animate your pic with the CSS property left which is part of CSS position. If you add that to your image it should work (I just took keycode 97 for a because I don't know what 39 is):

HTML:

<img id="pic" src="run0.png" alt="image" height="100" width="100" />

CSS:

#pic {
    position: absolute;
    left: 20px;
}

jQuery:

$(document).keypress(function (event) {
    // var keycode = (event.keyCode ? event.keyCode : event.which);

    console.log(event.keyCode);
    if (event.keyCode == '97') {
        $("#pic").animate({
            left: '+=5px',
        });
    }
});

See jsfiddle: https://jsfiddle.net/914m6ut3/

score 0 · Answer 3 · answered Nov 28 '15 at 09:01

0

Try adding a relative position to your image:

<img id="pic" src="run0.png" alt="image" height="100" width="100" style="position: relative;"  />

answered Nov 28 '15 at 09:01

Erwin O.

199
1
10

That made it work, thanks! :) I'll come back and give you a point when my rep is at 15! – Jona Nov 28 '15 at 18:19

Moving image left and right with jQuery

3 Answers3