My img doesnt move .-. 11/12


#1

$(document).ready(function() {
$(document).keydown(function(key) {
switch(parseInt(key.which , 10)) {
// Left arrow key pressed
case 37:
$('img').animate({left: "-=10px"}, 'fast');
break;
// Up Arrow Pressed
case 38:
// Put our code here
$('img').animate({top: "-=10px"},'fast');
break;
// Right Arrow Pressed
case 39:
// Put our code here
$('img').animate({left: "+=10px"}, 'fast');
break;
// Down Arrow Pressed
case 40:
// Put our code here
$('img').animate({top: "+=10px"}, 'fast');
break;
};
});
});


#2
$(document).ready(function() {
   $(document).keydown(function(key) {
      switch(parseInt(key.which , 10)) {
	   // Left arrow key pressed
	       case 37:
	          $('img').animate({left: "-=10px"}, 'fast');
  	          break;
	 // Up Arrow Pressed
	      case 38:
 	          // Put our code here
	          $('img').animate({top: "-=10px"},'fast');
	          break;
	// Right Arrow Pressed
	      case 39:
	          // Put our code here
	          $('img').animate({left: "+=10px"}, 'fast');
	          break;
	// Down Arrow Pressed
	      case 40:
	         // Put our code here
	         $('img').animate({top: "+=10px"}, 'fast');
	         break;
	};
	});
});

#3

I tried your code in a windows 8.1 IE11 environment and was able to move the img around....

Before using the Arrow-keys, you will have to =click= once, in the preView-screen to put it onFocus

or
Maybe
++++ reset of session *****************
under certain circumstances you can shoot your Browser in an
inconsistent state.

Therefor it is of an advantage to know that you have 2 reset facilities:

One is the use of the F5-key which does a refresh Browser

and

Two, select&copy your code
Then use the Reset Code button of the course-window,
then paste your code back in.

Addendum from Tony de araujo
General Notes:
Always refresh the browser after making corrections:
CTRL f5 ( if on Windows or Linux)
CMD r ( if on a MAC).


#4

I tried this and, like the code I wrote out, your code works just fine in the preview window but, when I enter Full Screen or try to Save & Submit Code, the 'img' is no longer able to move around.

has anyone else had this issue?


#5

Please display the code you are using...


#6

$(document).ready(function() {
$(document).keydown(function(key) {
switch(parseInt(key.which , 10)) {
// Left arrow key pressed
case 37:
$('img').animate({left: "-=10px"}, 'fast');
break;
// Up Arrow Pressed
case 38:
// Put our code here
$('img').animate({top: "-=10px"},'fast');
break;
// Right Arrow Pressed
case 39:
// Put our code here
$('img').animate({left: "+=10px"}, 'fast');
break;
// Down Arrow Pressed
case 40:
// Put our code here
$('img').animate({top: "+=10px"}, 'fast');
break;
};
});
});

same thing, works in the preview window but not when I enlarge it nor after I hit "save an submit code"


#7

I'm experiencing exactly the same issue. It's not the code problem here (duh, you should be mastering forever to make any mistakes in just one line of the code). Could it be the Mac OS issue? I mean, the codes for arrow keys could be different or anything.


#8

@steveaddeo, @designplayer60157,

put this in as script and look at decimal return code's
compare with decimal-column
http://msdn.microsoft.com/en-us/library/60ecse8t(v=vs.80).aspx

$(document).ready(function() {
    var stext = "Key's pressed: "
    $('<p>').text(stext).appendTo('#posi');
    $(document).keydown(function(key) {
        var kd = parseInt(key.which,10)
        stext += kd + " ";
        $('p').text(stext);
        switch(kd) {
			// Left arrow key pressed
			case 37:
				$('img').animate({left: "-=10px"}, 'fast');
				break;
			// Up Arrow Pressed
			case 38:
				$('img').animate({top: "-=10px"},'fast');
				break;
			// Right Arrow Pressed
			case 39:
				$('img').animate({left: "+=10px"},'fast');
				break;
			// Down Arrow Pressed
			case 40:
				$('img').animate({top: "+=10px"},'fast');
				break;
		}
	});
});

#9

I apologize for my ignorance, I'm not exactly sure how to execute this.


#10

In your script.js
use the Multi-line-comment-syntax /* */
to comment out the code you have now

/*
all of the code you had upontill now

*/

paste in my provided code,
=click= in the Pre-view screen
and start using the =Arrow=-keys....


#11

Thank you for clarifying but I'm still having the same problem. I find it odd that even the left arrow doesn't work either because that's the one that's given in the lesson, that's the one that should at least work.


#12

In your browser what was displayed on the line
Key's pressed:
as you pressed the left-arrow-key....??


#13

Sorry again, total newb. Where would "Keys Pressed" be displayed?


#14

oh, was your code supposed to display something? because that's not showing up either.


#15

I'm on this exercise now. Sometimes it doesn't move unless you use the mouse to click on the screen (or the image) a few times before you can move it. Seem to have trouble trying to get mario to move right or down but I'm sure I will figure it out


#17

Too bad I can't check it right now, I passed this section somehow later. If I got it right, the parseInt function gets the ASCII decimal value and returns the name of the key pressed, right?


#18

Can I use right or down instead of "-" and "+"?


#19

@codecoder40788,
Well you could...
using the Table
= http://msdn.microsoft.com/en-us/library/60ecse8t(v=vs.80).aspx
we see in the Dec column
"+" ==> 43
"-" ==> 45

You then have to update the switch with a so-called fall-through-option
like

$(document).ready(function() {
    var stext = "Key's pressed: "
    $(document).keydown(function(key) {
        var kd = parseInt(key.which,10)
        stext += kd + " ";
        $('p').text(stext);
    $('<p>').text(stext).appendTo('#posi');
        switch(kd) {
			// Left arrow key pressed ot "-"
                    case 45:
			case 37:
				$('img').animate({left: "-=10px"}, 'fast');
				break;
			// Up Arrow Pressed
			case 38:
				$('img').animate({top: "-=10px"},'fast');
				break;
			// Right Arrow Pressed /OR "+"
                    case43:
			case 39:
				$('img').animate({left: "+=10px"},'fast');
				break;
			// Down Arrow Pressed
			case 40:
				$('img').animate({top: "+=10px"},'fast');
				break;
		}
	});
});

#20

That's really help! Thank you..


#21

Thank you. Only my left key was working but this code you provided now makes all arrow keys work. I'm using a Mac Book Pro. Why wasn't the code working without your extra code?