brooke_theperson Posted May 2, 2015 Share Posted May 2, 2015 Basically, I want my character to move to the left when I press the left arrow button, but nothing happens. Why won't my code work? <!DOCTYPE html><html><head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src='script.js'></script></head><style>html{ background-color: lightblue;}.character{ height: 150px; width: 70px; margin-top: 300px; margin-left: 300px}</style><script>$(document).ready(function(){ $(document).keydown(function(e){ if (e.keyCode == 37){ $('.character').animate({left:'-=30px'}, 200); } });});</script><body> <img class = "character" src = "https://lh3.googleusercontent.com/-i1FpxHN6IGs/VUQpAAWIp0I/AAAAAAAAADo/lEkxwoauAyc/w346-h780/stickfigure.png"></img></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted May 2, 2015 Share Posted May 2, 2015 (edited) moving using left property wont work unless position: absolute, relative or fixed are used. Edited May 2, 2015 by dsonesuk Link to comment Share on other sites More sharing options...
brooke_theperson Posted May 2, 2015 Author Share Posted May 2, 2015 I tried fixing that and it still doesn't work. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 2, 2015 Share Posted May 2, 2015 It should work, validate html, the img tag is self closing, remove spaces between class = "character" should be class="character" Link to comment Share on other sites More sharing options...
dsonesuk Posted May 3, 2015 Share Posted May 3, 2015 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <style> html{ background-color: lightblue; } .character{ height: 150px; width: 70px; margin-top: 300px; margin-left: 300px; position: absolute; } </style> <script> $(document).ready(function() { $(document).keydown(function(e) { if (e.keyCode == 37) { $('.character').animate({left: '-=30px'}, 200); } }); }); </script> <body> <img class="character" src = "https://lh3.googleusercontent.com/-i1FpxHN6IGs/VUQpAAWIp0I/AAAAAAAAADo/lEkxwoauAyc/w346-h780/stickfigure.png"> </body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now