CODEWITHSUNDEEP
javascriptjquerycss
user3676606
user3676606

Reputation: 23

Cannot control css bottom property via javascript

Ok so I have one div and inside it a canvas. from my html file:

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

from css file:

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

What i want to do is to control the 'bottom' value of #game that is: 

($("#game").css("bottom")),

To put it in an if statement and if true, to change it automatically.

But when I try there is a problem that I cannot understand. I have a variable called s. Where s will be the amount that should be changed, it's not a fixed number.

when I tried ($("#game").css("bottom", -s)); nothing happened, so to check it I did the following:

alert( ($("#game").css("bottom", -s)) ); the reply was [object Object].

while if I just do alert( ($("#game").css("bottom")) ); the reply is correctly 0px.

What am I missing? Help would be much appreciated!

Upvotes: 0

Views: 89

Answers (2)

Zeb
Zeb

Reputation: 2777

You can change the value and set as:

$( "div" ).on( "click", function() {
    $( this ).css({
    height: function( index, value ) {
        return value * 1.2;
    }
    });
});

The 1.2 is same as r in your code, when you click on div , the 'div' height is increased automatically . It may help you out.

Upvotes: 0

Stryner
Stryner

Reputation: 7318

The .css(name, value) will set the css property of the name equal to the value. It will not alter the value like doing x += 1 would change a variable.

Therefore you should be doing something like:

var oldValue = parseInt($("#game").css("bottom"));
$("#game").css("bottom", (oldValue - s) + "px")

The parseInt is necessary, because as you said it returns 0px, which is a string.

Upvotes: 1

Related Questions