jquery - Adding image by javascript changes position -
i beginner in web development, trying learn, doing little game in html without using canvas. game consists of table of boxes , user can navigate through them using arrow keys , can add together image current box pressing enter.
when press enter, position of box on page changes, goes little original position. can't post image new site, link image instead.
https://www.dropbox.com/s/er6e0ez6w0fd149/screenshot_1.png?dl=0
class="snippet-code-js lang-js prettyprint-override"> //loading constant.js $.getscript("constants.js", function(){ // loaded }); /*var stage = document.getelementbyid("gamecanvas"); stage.width = stage_width; stage.height = stage_height; var ctx = stage.getcontext("2d"); ctx.fillstyle = "black"; ctx.font = game_fonts; */ var gameloop = setinterval(update, time_per_frame); var counter = 0; var current_x = starting_x + 1; var current_y = starting_y; var element = current_y.tostring() + current_x.tostring();; var element; // updating selected box. function positionupdate() { element = current_y.tostring() + current_x.tostring(); document.getelementbyid(element).focus(); //------------- //disabling tabs //------------- $.prototype.disabletab = function() { this.each(function() { $(this).attr('tabindex', '-1'); }); }; $('button').disabletab(); } //------------ //game loop //------------ function update() { counter++; //clear canvas //ctx.fillstyle = "#aaa"; //ctx.fillrect(0, 0, stage.width, stage.height); //draw timer //ctx.fillstyle = "white"; //ctx.filltext("time is: "+counter, counter_x, counter_y); } //------------ //key handlers //------------ function keyuphandler(event) { var keypressed = event.which || event.keycode; if (keypressed == 38) //up key { if(current_y>0) { current_y--; } else { current_y = 9; } changefocus(); } else if (keypressed == 40) //down key { if(current_y<9) { current_y++; } else { current_y = 0; } changefocus(); } else if (keypressed == 39) //right key { if(current_x<9) { current_x++; } else { current_x = 0; } changefocus(); } else if (keypressed == 37) //left key { if(current_x>0) { current_x--; } else { current_x = 9; } changefocus(); } else if (keypressed == 13) // come in key { var selection = document.activeelement if(document.activeelement.haschildnodes()) { } else { document.activeelement.innerhtml = "<img src='canal control.png' width='50'>"; } } else { // nil other keys. } } //------------- //changing location on key press //------------- function changefocus() { positionupdate(); } class="snippet-code-css lang-css prettyprint-override">body { margin: 0; padding: 0; } #main{ cursor: none; width: 600px; height: 600px; background-color: #53b1f5; text-align: center; margin-left: auto; margin-right: auto; } button { cursor: none; /*disabling cursors*/ pointer-events: none; /*disabling mouse clicks*/ width: 50px; padding: 0px; height: 50px; border: 2px solid; border-color: white; border-style: outset; background: -webkit-linear-gradient(left top, #0e23a0 , #77b5fe , white); /* safari 5.1 6.0 */ background: -o-linear-gradient(bottom right, #0e23a0 , #77b5fe , white); /* opera 11.1 12.0 */ background: -moz-linear-gradient(bottom right, #0e23a0 , #77b5fe , white); /* firefox 3.6 15 */ background: linear-gradient(to bottom right, #0e23a0 , #77b5fe , white); /* standard syntax */ } button:focus { border: 5px; border-color: #1aaad9; border-style: outset; } class="snippet-code-html lang-html prettyprint-override"> <!doctype html> <html> <head> <title>canal command plus</title> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <script src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="constants.js"></script> <script type="text/javascript" src="game.js"></script> <script>$(document).ready(positionupdate); </script> </head> <body onkeypress="keyuphandler(event)"> <div id="main"> <button type="button" id="00"></img></button ><button type="button" id="01"></button ><button type="button" id="02"></button ><button type="button" id="03"></button ><button type="button" id="04"></button ><button type="button" id="05"></button ><button type="button" id="06"></button ><button type="button" id="07"></button ><button type="button" id="08"></button ><button type="button" id="09"></button> <br> <button type="button" id="10"></button ><button type="button" id="11"></button ><button type="button" id="12"></button ><button type="button" id="13"></button ><button type="button" id="14"></button ><button type="button" id="15"></button ><button type="button" id="16"></button ><button type="button" id="17"></button ><button type="button" id="18"></button ><button type="button" id="19"></button> <br> <button type="button" id="20"></button ><button type="button" id="21"></button ><button type="button" id="22"></button ><button type="button" id="23"></button ><button type="button" id="24"></button ><button type="button" id="25"></button ><button type="button" id="26"></button ><button type="button" id="27"></button ><button type="button" id="28"></button ><button type="button" id="29"></button> <br> <button type="button" id="30"></button ><button type="button" id="31"></button ><button type="button" id="32"></button ><button type="button" id="33"></button ><button type="button" id="34"></button ><button type="button" id="35"></button ><button type="button" id="36"></button ><button type="button" id="37"></button ><button type="button" id="38"></button ><button type="button" id="39"></button> <br> <button type="button" id="40"></button ><button type="button" id="41"></button ><button type="button" id="42"></button ><button type="button" id="43"></button ><button type="button" id="44"></button ><button type="button" id="45"></button ><button type="button" id="46"></button ><button type="button" id="47"></button ><button type="button" id="48"></button ><button type="button" id="49"></button> <br> <button type="button" id="50"></button ><button type="button" id="51"></button ><button type="button" id="52"></button ><button type="button" id="53"></button ><button type="button" id="54"></button ><button type="button" id="55"></button ><button type="button" id="56"></button ><button type="button" id="57"></button ><button type="button" id="58"></button ><button type="button" id="59"></button> <br> <button type="button" id="60"></button ><button type="button" id="61"></button ><button type="button" id="62"></button ><button type="button" id="63"></button ><button type="button" id="64"></button ><button type="button" id="65"></button ><button type="button" id="66"></button ><button type="button" id="67"></button ><button type="button" id="68"></button ><button type="button" id="69"></button> <br> <button type="button" id="70"></button ><button type="button" id="71"></button ><button type="button" id="72"></button ><button type="button" id="73"></button ><button type="button" id="74"></button ><button type="button" id="75"></button ><button type="button" id="76"></button ><button type="button" id="77"></button ><button type="button" id="78"></button ><button type="button" id="79"></button> <br> <button type="button" id="80"></button ><button type="button" id="81"></button ><button type="button" id="82"></button ><button type="button" id="83"></button ><button type="button" id="84"></button ><button type="button" id="85"></button ><button type="button" id="86"></button ><button type="button" id="87"></button ><button type="button" id="88"></button ><button type="button" id="89"></button> <br> <button type="button" id="90"></button ><button type="button" id="91"></button ><button type="button" id="92"></button ><button type="button" id="93"></button ><button type="button" id="94"></button ><button type="button" id="95"></button ><button type="button" id="96"></button ><button type="button" id="97"></button ><button type="button" id="98"></button ><button type="button" id="99"></button> <br> </div> </body> </html>
p.s. there way acheive div instead of buttons? give thanks you!
figured out, added float:left css of buttons , worked out.
javascript jquery html css
No comments:
Post a Comment