How to change border size dynamically of a circle using css and JS?
up vote
1
down vote
favorite
I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function yesno() {
navigator.vibrate(500);
for (var i = 0; i < 40; i++) {
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";
}
if (Math.random() < 0.5) {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";
}
} else {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";
}
}
}
</script>
<style type="text/css">
#yesno {
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);
}
#ynbtn {
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>
javascript html css dom
edited Nov 10 at 19:43
Emil Stenström
6,78053761
asked Nov 10 at 18:10
Brisingle
61
add a comment |
up vote
1
down vote
favorite
I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function yesno() {
navigator.vibrate(500);
for (var i = 0; i < 40; i++) {
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";
}
if (Math.random() < 0.5) {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";
}
} else {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";
}
}
}
</script>
<style type="text/css">
#yesno {
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);
}
#ynbtn {
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>
javascript html css dom
edited Nov 10 at 19:43
Emil Stenström
6,78053761
asked Nov 10 at 18:10
Brisingle
61
I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevantforloop - which is 40px wide, of whichever colour was randomly decided.
– Robin Zigmond
Nov 10 at 18:19
What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
– Brisingle
Nov 10 at 18:41
So the probleme is that the code execute all for loop at a time and not one by one i would like.
– Brisingle
Nov 10 at 18:49
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function yesno() {
navigator.vibrate(500);
for (var i = 0; i < 40; i++) {
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";
}
if (Math.random() < 0.5) {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";
}
} else {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";
}
}
}
</script>
<style type="text/css">
#yesno {
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);
}
#ynbtn {
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>
javascript html css dom
edited Nov 10 at 19:43
Emil Stenström
6,78053761
asked Nov 10 at 18:10
Brisingle
61
I want to make a circle which have border, and border get smaller. Then when it have 0 border, want to change the color and finally circle's border grows up. To do that , I used this code but the circle doesn't get smaller and then grows up , it only change color.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function yesno() {
navigator.vibrate(500);
for (var i = 0; i < 40; i++) {
var px = 39 - i;
document.getElementById("yesno").style.border = px + "px solid";
}
if (Math.random() < 0.5) {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(0,1000,0,1)";
}
} else {
for (var i = 0; i < 40; i++) {
var px = 1 + i;
document.getElementById("yesno").style.border = px + "px solid rgba(1000,0,0,1)";
}
}
}
</script>
<style type="text/css">
#yesno {
position: absolute;
border-radius: 50%;
transition: all 1000ms linear;
margin-left: 400px;
margin-top: 60px;
width: 120px;
height: 120px;
border: 40px solid rgba(1000,0,0,1);
}
#ynbtn {
position: absolute;
border: 40px solid rgba(0,0,0,1);
margin-left: 440px;
margin-top: 100px;
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="ploufisme">
<div class="yesno" onclick="yesno()">
<div id="yesno"></div>
<div id="ynbtn"></div>
</div>
</div>
</body>
</html>
javascript html css dom
javascript html css dom
edited Nov 10 at 19:43
Emil Stenström
6,78053761
asked Nov 10 at 18:10
Brisingle
61
edited Nov 10 at 19:43
Emil Stenström
6,78053761
asked Nov 10 at 18:10
Brisingle
61
edited Nov 10 at 19:43
Emil Stenström
6,78053761
edited Nov 10 at 19:43
Emil Stenström
6,78053761
edited Nov 10 at 19:43
Emil Stenström
6,78053761
6,78053761
asked Nov 10 at 18:10
Brisingle
61
asked Nov 10 at 18:10
Brisingle
61
asked Nov 10 at 18:10
Brisingle
61
61
I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevantforloop - which is 40px wide, of whichever colour was randomly decided.
– Robin Zigmond
Nov 10 at 18:19
What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
– Brisingle
Nov 10 at 18:41
So the probleme is that the code execute all for loop at a time and not one by one i would like.
– Brisingle
Nov 10 at 18:49
add a comment |
I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevantforloop - which is 40px wide, of whichever colour was randomly decided.
– Robin Zigmond
Nov 10 at 18:19
What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
– Brisingle
Nov 10 at 18:41
So the probleme is that the code execute all for loop at a time and not one by one i would like.
– Brisingle
Nov 10 at 18:49
I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevant
for loop - which is 40px wide, of whichever colour was randomly decided.– Robin Zigmond
Nov 10 at 18:19
I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevant
for loop - which is 40px wide, of whichever colour was randomly decided.– Robin Zigmond
Nov 10 at 18:19
What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
– Brisingle
Nov 10 at 18:41
What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
– Brisingle
Nov 10 at 18:41
So the probleme is that the code execute all for loop at a time and not one by one i would like.
– Brisingle
Nov 10 at 18:49
So the probleme is that the code execute all for loop at a time and not one by one i would like.
– Brisingle
Nov 10 at 18:49
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.
var circle = document.querySelector('.circle');
function decreaseBorder() {
circle.classList.add('thin');
setTimeout(function() {
circle.classList.remove('thin');
circle.classList.add('bold');
}, 1000);
}
window.onload = function() { decreaseBorder(); }.circle {
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);
}
.thin {
border-width: 0;
}
.bold {
border-width: 40px;
border-color: rgba(0,0,0,1);
}<div class="circle"></div>answered Nov 10 at 18:38
Pablo Darde
1,37311427
I tried your code but it didn't work...
– Brisingle
Nov 10 at 18:59
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.
var circle = document.querySelector('.circle');
function decreaseBorder() {
circle.classList.add('thin');
setTimeout(function() {
circle.classList.remove('thin');
circle.classList.add('bold');
}, 1000);
}
window.onload = function() { decreaseBorder(); }.circle {
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);
}
.thin {
border-width: 0;
}
.bold {
border-width: 40px;
border-color: rgba(0,0,0,1);
}<div class="circle"></div>answered Nov 10 at 18:38
Pablo Darde
1,37311427
I tried your code but it didn't work...
– Brisingle
Nov 10 at 18:59
add a comment |
up vote
0
down vote
Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.
var circle = document.querySelector('.circle');
function decreaseBorder() {
circle.classList.add('thin');
setTimeout(function() {
circle.classList.remove('thin');
circle.classList.add('bold');
}, 1000);
}
window.onload = function() { decreaseBorder(); }.circle {
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);
}
.thin {
border-width: 0;
}
.bold {
border-width: 40px;
border-color: rgba(0,0,0,1);
}<div class="circle"></div>answered Nov 10 at 18:38
Pablo Darde
1,37311427
I tried your code but it didn't work...
– Brisingle
Nov 10 at 18:59
add a comment |
up vote
0
down vote
up vote
0
down vote
Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.
var circle = document.querySelector('.circle');
function decreaseBorder() {
circle.classList.add('thin');
setTimeout(function() {
circle.classList.remove('thin');
circle.classList.add('bold');
}, 1000);
}
window.onload = function() { decreaseBorder(); }.circle {
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);
}
.thin {
border-width: 0;
}
.bold {
border-width: 40px;
border-color: rgba(0,0,0,1);
}<div class="circle"></div>answered Nov 10 at 18:38
Pablo Darde
1,37311427
Well, there as many ways to do this. This is a simple way. Note that I separated the border properties in order to transition only affect the border-width property. I think this is what you are trying to do.
var circle = document.querySelector('.circle');
function decreaseBorder() {
circle.classList.add('thin');
setTimeout(function() {
circle.classList.remove('thin');
circle.classList.add('bold');
}, 1000);
}
window.onload = function() { decreaseBorder(); }.circle {
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);
}
.thin {
border-width: 0;
}
.bold {
border-width: 40px;
border-color: rgba(0,0,0,1);
}<div class="circle"></div>var circle = document.querySelector('.circle');
function decreaseBorder() {
circle.classList.add('thin');
setTimeout(function() {
circle.classList.remove('thin');
circle.classList.add('bold');
}, 1000);
}
window.onload = function() { decreaseBorder(); }.circle {
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);
}
.thin {
border-width: 0;
}
.bold {
border-width: 40px;
border-color: rgba(0,0,0,1);
}<div class="circle"></div>var circle = document.querySelector('.circle');
function decreaseBorder() {
circle.classList.add('thin');
setTimeout(function() {
circle.classList.remove('thin');
circle.classList.add('bold');
}, 1000);
}
window.onload = function() { decreaseBorder(); }.circle {
border-radius: 50%;
transition: border-width 1s linear;
width: 120px;
height: 120px;
border-width: 40px;
border-style: solid;
border-color: rgba(1000,0,0,1);
}
.thin {
border-width: 0;
}
.bold {
border-width: 40px;
border-color: rgba(0,0,0,1);
}<div class="circle"></div>answered Nov 10 at 18:38
Pablo Darde
1,37311427
answered Nov 10 at 18:38
Pablo Darde
1,37311427
answered Nov 10 at 18:38
Pablo Darde
1,37311427
answered Nov 10 at 18:38
Pablo Darde
1,37311427
1,37311427
I tried your code but it didn't work...
– Brisingle
Nov 10 at 18:59
add a comment |
I tried your code but it didn't work...
– Brisingle
Nov 10 at 18:59
I tried your code but it didn't work...
– Brisingle
Nov 10 at 18:59
I tried your code but it didn't work...
– Brisingle
Nov 10 at 18:59
add a comment |
draft saved
draft discarded
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53241960%2fhow-to-change-border-size-dynamically-of-a-circle-using-css-and-js%23new-answer', 'question_page');
}
);
Post as a guest
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
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
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
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I'm not sure what your code is supposed to be doing. But the border style will always end up as it is specified in the last iteration of the relevant
forloop - which is 40px wide, of whichever colour was randomly decided.– Robin Zigmond
Nov 10 at 18:19
What I'd like that the code do is : big circle -> no border -> change color -> big circle but in fact it only change color progressively
– Brisingle
Nov 10 at 18:41
So the probleme is that the code execute all for loop at a time and not one by one i would like.
– Brisingle
Nov 10 at 18:49