Cannot control css bottom property via javascript

Question

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!

Have you tried parseInt() on s to ensure that it's numeric? — Maxwell Donathan
– Maxwell Donathan, Commented Aug 27, 2014 at 13:15

Stryner · Accepted Answer · 2014-08-27 13:54:01Z

1

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.

edited Aug 27, 2014 at 13:54

answered Aug 27, 2014 at 13:19

Stryner

7,3363 gold badges21 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

C3roe Over a year ago

It still needs a unit, unless the value is actually 0.

Zeb · Accepted Answer · 2014-08-27 14:08:20Z

0

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.

edited Aug 27, 2014 at 14:08

answered Aug 27, 2014 at 14:01

Zeb

2,7878 gold badges31 silver badges36 bronze badges

Collectives™ on Stack Overflow

Cannot control css bottom property via javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related