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,84553761
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,84553761
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,84553761
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,84553761
asked Nov 10 at 18:10
Brisingle
61
edited Nov 10 at 19:43
Emil Stenström
6,84553761
asked Nov 10 at 18:10
Brisingle
61
edited Nov 10 at 19:43
Emil Stenström
6,84553761
edited Nov 10 at 19:43
Emil Stenström
6,84553761
edited Nov 10 at 19:43
Emil Stenström
6,84553761
6,84553761
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,37311527
I tried your code but it didn't work...
– Brisingle
Nov 10 at 18:59
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',
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
);
);
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
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,37311527
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,37311527
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,37311527
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,37311527
answered Nov 10 at 18:38
Pablo Darde
1,37311527
answered Nov 10 at 18:38
Pablo Darde
1,37311527
answered Nov 10 at 18:38
Pablo Darde
1,37311527
1,37311527
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
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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
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