0

Ok so i have one div and inside it a canvas: my html file:

<div id="container">
        <canvas id="game" width="600px" height="2000px">
</div>

my css file:

#game{
background: -moz-linear-gradient(top, #00b7ea0%, #008793 14%, #04b9b 43%, #1f00ea 74%, #008793 89%, #009ec3 100%);
bottom: 0px;
position: absolute;    
}
#container{
position: relative;
width:600px;
height:500px;    
}

And here is my question: What code should be used in a javascript file, if i want to control the bottom property of #game?

What i mean i that i want the user to press a botton, e.g. W(=87), and the bottom property to change negative or possitive direction is irrelevant, the need is to make a code that when a key is pressed the magnitude of the bottom property will change.

I hope that i described the probel well, if more info is needed please ask... Looking forward for a reply :-)

Anamed
  • 109
  • 1
  • 1
  • 8
  • 1
    Man... a simple googling would be enough! – LcSalazar Aug 26 '14 at 19:09
  • 2
    possible duplicate of [Set CSS attribute in Javascript?](http://stackoverflow.com/questions/5195303/set-css-attribute-in-javascript) – LcSalazar Aug 26 '14 at 19:10
  • I haven't really used `canvas`'s but I would assume it's the same as any other tag. You can refer to the style property: `document.getElementById('game').style.bottom = "20px";`. There is a little more to it. You would need to get the existing value. You can parse it with `parseInt()`, then increment or decrement as needed, then set the value. – jwatts1980 Aug 26 '14 at 19:11
  • @Derek that is a jQuery solution. The OP didn't tag jQuery in the question. – jwatts1980 Aug 26 '14 at 19:12
  • Also, you may need to look into the keyboard events like `onkeyup`, `onkeypress`, and `onkeydown`. They each have slightly different uses and event return values. – jwatts1980 Aug 26 '14 at 19:15

2 Answers2

1

Using jQuery you could add the following code to your key press handler:

var newBottomValue = 13;
$("#game").css("bottom", newBottomValue);

If you are not using jQuery I would do something like:

var newBottomValue = 13;
document.getElementById("game").style.bottom = newBottomValue + "px";
Steve
  • 86
  • 4
  • As a general rule of thumb, don't include answers using frameworks that the OP has not tagged or referenced in the question. In this case, the OP did not tag or reference the jQuery framework. – jwatts1980 Aug 26 '14 at 19:24
1

If you want to set the bottom property dynamically you can do this as follows-

function setHeight (bottomValue) {
    if (typeof bottomValue === "number") {
        bottomValue = bottomValue + "px";
    }

    var gameElement = document.getElementById("game");

    if (gameElement) {
        gameElement.style.bottom = bottomValue;
    }
}

See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

Alternatively using jQuery-

$('#game').css('bottom', bottomValue);

See http://api.jquery.com/css/

pwdst
  • 13,909
  • 3
  • 34
  • 50
  • out of curiosity: shouldn't the 'css' in $('#game').css('css', bottomValue); be 'bottom'??? Also using JQuery how bottomValue would be modified? – Anamed Aug 26 '14 at 20:20
  • Thanks @Anamed - I was typing this answer using the StackExchange app on my tablet which I don't think I'll do again. Laptop is much better both in terms of console access to test and in terms of formatting/typing. To answer your question about modifying the value in the case of jQuery - you don't have to. The method accepts a number value - see the documentation. I've created a fiddle at http://jsfiddle.net/pwdst/bs4xknvk/ to show changing the bottom property with just a number value. – pwdst Aug 26 '14 at 20:42