Increase / decrease CSS circle border according to the number it contains
I'm looking for a way for something that ultimately seems simple enough ... but I haven't done it yet!
The idea I have are numbers (in span) located inside a css circle. I want the edge of my circle to resize to match the number it contains.
For example: if the number is between 0 and 10, border = 2px if the number is between 10 and 20, border = 4px so on ...
I hope your help, thanks!
PS: same idea when the span is outside my cercle PLZ :)
source to share
Here's an example that might help you:
$(".s").each(function() {
var text = parseInt($(this).text());
if ( text > 0 && text <= 10 ) {
$(this).addClass("border-2");
} else if ( text > 10 && text <= 20 ) {
$(this).addClass("border-4");
}
});
Html
<span class="s">9</span>
<span class="s">5</span>
<span class="s">15</span>
CSS
.s {
display: block;
background: red;
width: 50px;
height: 50px;
margin-bottom: 10px;
}
.border-2 {
border-radius: 2px;
}
.border-4 {
border-radius: 4px;
}
source to share
Do you only want these specific steps or were examples for general behavior? This fiddle works great for me for the last one: https://jsfiddle.net/svArtist/xn7s3700/
$(".borderbycontent").each(function(){
$(this).css("border-radius", $(this).html()/5);
});
.borderbycontent{
width:30px;
height:30px;
background-color:#ddd;
color:#000;
border:1px solid #aaa;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="borderbycontent">
5
</div><div class="borderbycontent">
10
</div><div class="borderbycontent">
20
</div><div class="borderbycontent">
30
</div><div class="borderbycontent">
60
</div>
otherwise just take the value and check for example key / flag ranges.
source to share
Select all elements, iterate over the loop and calculate a new value for the border radius:
/**
* Algorithm to calculate new radius
* Number ranges progression: 0:10 - 2, 10:20 - 4, 20:30 - 6, 30:40 - 8, etc.
* Get top boundary of the range and devide by 5.
*/
[].slice.call(document.querySelectorAll('.smart-border')).forEach(function(span) {
var number = Number(span.textContent.trim());
var newBorder = Math.ceil(number / 10) * 10 / 5;
span.style.borderRadius = newBorder + 'px';
});
.smart-border {
border: 2px #1D9B28 solid;
height: 50px;
width: 50px;
display: inline-block;
background: #CFBB92;
line-height: 3;
text-align: center;
}
<span class="smart-border">5</span>
<span class="smart-border">15</span>
<span class="smart-border">21</span>
<span class="smart-border">36</span>
source to share