Javascript: make rectangle grow upwards

1

I'm trying to create a code that has a bar rise while a certain condition is met, and if not, it falls back down. I figured the best way to do this is to increment the height and margin-top inversely so that as the margin-top decreases, the height can increase, creating the illusion that the bar was only ever rising. However, it seems that the top of the bar is stuck and changing the margin-top doesn't change anything. Here's my code:

function progresMove() {

    if (playerMargin >= marginRange[0] && playerMargin <= marginRange[1]) {

        progressHeight += .75;

        progressMargin -= .75;

        progress.style.cssText = "margin-top: " + progressMargin + "px";

        progress.style.cssText = "height: " + progressHeight + "px";

    } else {

        progressHeight -= 1.5;

        progressMargin += 1.5;

        progress.style.cssText = "margin-top: " + progressMargin + "px";

        progress.style.cssText = "height: " + progressHeight + "px";

    }

}

This function is called every .05 seconds, and acts upon already created HTML elements with some styling:

width: 24px;

    background-color: #64DD17;

    margin-left: 3px;

    display: block;

All it does at the moment is push the rectangle down.

Also, it is inside a div within a div if that makes a difference. I've tried floating them, putting them in inline-block, and having overflow be hidden, and it doesn't make a difference.

Thanks for the help!

javascript html css

share|improve this question

asked Nov 20 '18 at 8:55

Grayson McKimGrayson McKim

91

add a comment | 

1

I'm trying to create a code that has a bar rise while a certain condition is met, and if not, it falls back down. I figured the best way to do this is to increment the height and margin-top inversely so that as the margin-top decreases, the height can increase, creating the illusion that the bar was only ever rising. However, it seems that the top of the bar is stuck and changing the margin-top doesn't change anything. Here's my code:

function progresMove() {

    if (playerMargin >= marginRange[0] && playerMargin <= marginRange[1]) {

        progressHeight += .75;

        progressMargin -= .75;

        progress.style.cssText = "margin-top: " + progressMargin + "px";

        progress.style.cssText = "height: " + progressHeight + "px";

    } else {

        progressHeight -= 1.5;

        progressMargin += 1.5;

        progress.style.cssText = "margin-top: " + progressMargin + "px";

        progress.style.cssText = "height: " + progressHeight + "px";

    }

}

This function is called every .05 seconds, and acts upon already created HTML elements with some styling:

width: 24px;

    background-color: #64DD17;

    margin-left: 3px;

    display: block;

All it does at the moment is push the rectangle down.

Also, it is inside a div within a div if that makes a difference. I've tried floating them, putting them in inline-block, and having overflow be hidden, and it doesn't make a difference.

Thanks for the help!

javascript html css

share|improve this question

asked Nov 20 '18 at 8:55

Grayson McKimGrayson McKim

91

add a comment | 

1

1

1

I'm trying to create a code that has a bar rise while a certain condition is met, and if not, it falls back down. I figured the best way to do this is to increment the height and margin-top inversely so that as the margin-top decreases, the height can increase, creating the illusion that the bar was only ever rising. However, it seems that the top of the bar is stuck and changing the margin-top doesn't change anything. Here's my code:

function progresMove() {

    if (playerMargin >= marginRange[0] && playerMargin <= marginRange[1]) {

        progressHeight += .75;

        progressMargin -= .75;

        progress.style.cssText = "margin-top: " + progressMargin + "px";

        progress.style.cssText = "height: " + progressHeight + "px";

    } else {

        progressHeight -= 1.5;

        progressMargin += 1.5;

        progress.style.cssText = "margin-top: " + progressMargin + "px";

        progress.style.cssText = "height: " + progressHeight + "px";

    }

}

This function is called every .05 seconds, and acts upon already created HTML elements with some styling:

width: 24px;

    background-color: #64DD17;

    margin-left: 3px;

    display: block;

All it does at the moment is push the rectangle down.

Also, it is inside a div within a div if that makes a difference. I've tried floating them, putting them in inline-block, and having overflow be hidden, and it doesn't make a difference.

Thanks for the help!

javascript html css

share|improve this question

asked Nov 20 '18 at 8:55

Grayson McKimGrayson McKim

91

I'm trying to create a code that has a bar rise while a certain condition is met, and if not, it falls back down. I figured the best way to do this is to increment the height and margin-top inversely so that as the margin-top decreases, the height can increase, creating the illusion that the bar was only ever rising. However, it seems that the top of the bar is stuck and changing the margin-top doesn't change anything. Here's my code:

function progresMove() {

    if (playerMargin >= marginRange[0] && playerMargin <= marginRange[1]) {

        progressHeight += .75;

        progressMargin -= .75;

        progress.style.cssText = "margin-top: " + progressMargin + "px";

        progress.style.cssText = "height: " + progressHeight + "px";

    } else {

        progressHeight -= 1.5;

        progressMargin += 1.5;

        progress.style.cssText = "margin-top: " + progressMargin + "px";

        progress.style.cssText = "height: " + progressHeight + "px";

    }

}

This function is called every .05 seconds, and acts upon already created HTML elements with some styling:

width: 24px;

    background-color: #64DD17;

    margin-left: 3px;

    display: block;

All it does at the moment is push the rectangle down.

Also, it is inside a div within a div if that makes a difference. I've tried floating them, putting them in inline-block, and having overflow be hidden, and it doesn't make a difference.

Thanks for the help!

javascript html css

javascript html css

share|improve this question

asked Nov 20 '18 at 8:55

Grayson McKimGrayson McKim

91

share|improve this question

asked Nov 20 '18 at 8:55

Grayson McKimGrayson McKim

91

share|improve this question

share|improve this question

asked Nov 20 '18 at 8:55

Grayson McKimGrayson McKim

91

asked Nov 20 '18 at 8:55

Grayson McKimGrayson McKim

91

asked Nov 20 '18 at 8:55

Grayson McKimGrayson McKim

91

91

add a comment | 

add a comment | 

2 Answers
2

active

oldest

votes

1

Give the parent position: relative and the element itself position: absolute and bottom: 0. That way the element is always aligned with the bottom of the parent. But you have to specify height and width of the parent in some way, otherwise it will collapse if the children are positioned absolutely.

share|improve this answer

answered Nov 20 '18 at 8:59

MichaelMichael

269111

add a comment | 

0

Replace cssText:

progress.style.cssText = "margin-top: " + progressMargin + "px";

progress.style.cssText = "height: " + progressHeight + "px"; 

with:

progress.style.marginTop = progressMargin + "px";

progress.style.height = progressHeight + "px";

Explanation:

You're overwriting cssText value, so there's no rule for margin-top at the end of your function.

Consider following snippet:

div1.style.cssText = "color: red";

div1.style.cssText = "background-color: yellow";



div2.style.cssText = "color: yellow";

div2.style.cssText += ";background-color: red";



div3.style.color = "red";

div3.style.backgroundColor = "yellow";

<div id="div1">div 1</div>

<div id="div2">div 2</div>

<div id="div3">div 3</div>

First div's background becomes yellow, but text is still black. In second and third div both changes are applied

share|improve this answer

edited Nov 20 '18 at 10:20

answered Nov 20 '18 at 9:19

barbsanbarbsan

2,33321222

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389354%2fjavascript-make-rectangle-grow-upwards%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

active

oldest

votes

active

oldest

votes

1

Give the parent position: relative and the element itself position: absolute and bottom: 0. That way the element is always aligned with the bottom of the parent. But you have to specify height and width of the parent in some way, otherwise it will collapse if the children are positioned absolutely.

share|improve this answer

answered Nov 20 '18 at 8:59

MichaelMichael

269111

add a comment | 

1

Give the parent position: relative and the element itself position: absolute and bottom: 0. That way the element is always aligned with the bottom of the parent. But you have to specify height and width of the parent in some way, otherwise it will collapse if the children are positioned absolutely.

share|improve this answer

answered Nov 20 '18 at 8:59

MichaelMichael

269111

add a comment | 

1

1

1

Give the parent position: relative and the element itself position: absolute and bottom: 0. That way the element is always aligned with the bottom of the parent. But you have to specify height and width of the parent in some way, otherwise it will collapse if the children are positioned absolutely.

share|improve this answer

answered Nov 20 '18 at 8:59

MichaelMichael

269111

Give the parent position: relative and the element itself position: absolute and bottom: 0. That way the element is always aligned with the bottom of the parent. But you have to specify height and width of the parent in some way, otherwise it will collapse if the children are positioned absolutely.

share|improve this answer

answered Nov 20 '18 at 8:59

MichaelMichael

269111

share|improve this answer

share|improve this answer

answered Nov 20 '18 at 8:59

MichaelMichael

269111

answered Nov 20 '18 at 8:59

MichaelMichael

269111

answered Nov 20 '18 at 8:59

MichaelMichael

269111

269111

add a comment | 

add a comment | 

0

Replace cssText:

progress.style.cssText = "margin-top: " + progressMargin + "px";

progress.style.cssText = "height: " + progressHeight + "px"; 

with:

progress.style.marginTop = progressMargin + "px";

progress.style.height = progressHeight + "px";

Explanation:

You're overwriting cssText value, so there's no rule for margin-top at the end of your function.

Consider following snippet:

div1.style.cssText = "color: red";

div1.style.cssText = "background-color: yellow";



div2.style.cssText = "color: yellow";

div2.style.cssText += ";background-color: red";



div3.style.color = "red";

div3.style.backgroundColor = "yellow";

<div id="div1">div 1</div>

<div id="div2">div 2</div>

<div id="div3">div 3</div>

First div's background becomes yellow, but text is still black. In second and third div both changes are applied

share|improve this answer

edited Nov 20 '18 at 10:20

answered Nov 20 '18 at 9:19

barbsanbarbsan

2,33321222

add a comment | 

0

Replace cssText:

progress.style.cssText = "margin-top: " + progressMargin + "px";

progress.style.cssText = "height: " + progressHeight + "px"; 

with:

progress.style.marginTop = progressMargin + "px";

progress.style.height = progressHeight + "px";

Explanation:

You're overwriting cssText value, so there's no rule for margin-top at the end of your function.

Consider following snippet:

div1.style.cssText = "color: red";

div1.style.cssText = "background-color: yellow";



div2.style.cssText = "color: yellow";

div2.style.cssText += ";background-color: red";



div3.style.color = "red";

div3.style.backgroundColor = "yellow";

<div id="div1">div 1</div>

<div id="div2">div 2</div>

<div id="div3">div 3</div>

First div's background becomes yellow, but text is still black. In second and third div both changes are applied

share|improve this answer

edited Nov 20 '18 at 10:20

answered Nov 20 '18 at 9:19

barbsanbarbsan

2,33321222

add a comment | 

0

0

0

Replace cssText:

progress.style.cssText = "margin-top: " + progressMargin + "px";

progress.style.cssText = "height: " + progressHeight + "px"; 

with:

progress.style.marginTop = progressMargin + "px";

progress.style.height = progressHeight + "px";

Explanation:

You're overwriting cssText value, so there's no rule for margin-top at the end of your function.

Consider following snippet:

div1.style.cssText = "color: red";

div1.style.cssText = "background-color: yellow";



div2.style.cssText = "color: yellow";

div2.style.cssText += ";background-color: red";



div3.style.color = "red";

div3.style.backgroundColor = "yellow";

<div id="div1">div 1</div>

<div id="div2">div 2</div>

<div id="div3">div 3</div>

First div's background becomes yellow, but text is still black. In second and third div both changes are applied

share|improve this answer

edited Nov 20 '18 at 10:20

answered Nov 20 '18 at 9:19

barbsanbarbsan

2,33321222

Replace cssText:

progress.style.cssText = "margin-top: " + progressMargin + "px";

progress.style.cssText = "height: " + progressHeight + "px"; 

with:

progress.style.marginTop = progressMargin + "px";

progress.style.height = progressHeight + "px";

Explanation:

You're overwriting cssText value, so there's no rule for margin-top at the end of your function.

Consider following snippet:

div1.style.cssText = "color: red";

div1.style.cssText = "background-color: yellow";



div2.style.cssText = "color: yellow";

div2.style.cssText += ";background-color: red";



div3.style.color = "red";

div3.style.backgroundColor = "yellow";

<div id="div1">div 1</div>

<div id="div2">div 2</div>

<div id="div3">div 3</div>

First div's background becomes yellow, but text is still black. In second and third div both changes are applied

div1.style.cssText = "color: red";

div1.style.cssText = "background-color: yellow";



div2.style.cssText = "color: yellow";

div2.style.cssText += ";background-color: red";



div3.style.color = "red";

div3.style.backgroundColor = "yellow";

<div id="div1">div 1</div>

<div id="div2">div 2</div>

<div id="div3">div 3</div>

div1.style.cssText = "color: red";

div1.style.cssText = "background-color: yellow";



div2.style.cssText = "color: yellow";

div2.style.cssText += ";background-color: red";



div3.style.color = "red";

div3.style.backgroundColor = "yellow";

<div id="div1">div 1</div>

<div id="div2">div 2</div>

<div id="div3">div 3</div>

share|improve this answer

edited Nov 20 '18 at 10:20

answered Nov 20 '18 at 9:19

barbsanbarbsan

2,33321222

share|improve this answer

share|improve this answer

edited Nov 20 '18 at 10:20

edited Nov 20 '18 at 10:20

edited Nov 20 '18 at 10:20

answered Nov 20 '18 at 9:19

barbsanbarbsan

2,33321222

answered Nov 20 '18 at 9:19

barbsanbarbsan

2,33321222

answered Nov 20 '18 at 9:19

barbsanbarbsan

2,33321222

2,33321222

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53389354%2fjavascript-make-rectangle-grow-upwards%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here