I do need for these status bars to work for each own. Maybe also the buttons could worked. I tried to acquire the value of “data-bar” without succeed (the script does still can process the “data-max”). And seems that the script does apply to all bars, not individually, while I need that it differs for each bar.
In html:
<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>
<br>
<!-- Trying to set attr value manually -->
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>
In script:
<script>
/* Requiring jQuery.js */
$(document).ready( function(){
/* Print the bar elements at the screen */
$(".stat-bar").html(
"<div class='stat-bar-main-shade-min'></div>" +
"<div class='stat-bar-main-shade-plus'></div>" +
"<div class='stat-bar-main'></div>" +
"<div class='stat-bar-text'></div>"
);
/* Animating a changed variable */
setInterval(function(){ // 2 second interval change
/* Get attr value from the stat bar */
var bar = $(".stat-bar");
if (bar){ // bar
var maxStat = bar.attr("data-bar-max");
/* Probably working area (remove "//" from a case and add it to all other case) */
/* Case A (testing): randomized attr value for "[data-bar]" (it works) */
// var currentStat = Math.floor((Math.random() * 100) + 50);
/* Case B (testing):: manual attr value for test (it works) */
var currentStat = 41;
/* Case C (what is demanded): getting attr value from "[data-bar]" (doesn’t works) */
// var currentStat = bar.attr("data-bar");
/* END Probably working area */
if (currentStat > maxStat){currentStat = maxStat;
} else if (currentStat < 0){currentStat = 0;
} else {currentStat = currentStat;}
} // END bar
var a = currentStat * (100 / maxStat);
$(".stat-bar-text").html("<span class='stat-bar-text-stat'>" + currentStat + "</span>" + "/" + "<span class='stat-bar-text-stat'>" + maxStat + "</span>" + " " + "<span class='stat-bar-text-stat'>" + "(" + Math.round(a) + "%" + ")" + "</span>");
setTimeout(function(){
$(".stat-bar-main-shade-min").animate({"width": a + "%"}, 800);
$(".stat-bar-main-shade-plus").animate({"width": a + "%"}, 300);
$(".stat-bar-main").animate({"width": a + "%"}, 700);
}, 400);
}, 2000); // END 2 second interval change
});
</script>
In css:
<style>
.stat-bar{
background-color: #ACB597;
height: 26px;width: 60vw;
margin: 0 auto;
overflow: hidden;
border: solid 1px #686E59;
border-radius: 4px;
box-shadow: inset 0 0 0 0.5px #888E79;
}
.stat-bar-main{
background-color: #464D51;
height: 30px;width: inherit;
bottom: 50px;
position: relative;
}
.stat-bar-main-shade-min{height: 100%;width: 100%;}
.stat-bar-main-shade-plus{
height: 100%;width: 100%;
bottom: 24px;
position: relative;
}
.stat-bar-main-shade-min, .stat-bar-main-shade-plus{
background: linear-gradient(90deg, rgba(70,77,81,1) 95%, rgba(70,77,81,0) 100%);
opacity: 0.35;
}
.stat-bar-text{
color: rgba(255,255,255,0.8);
font: 400 10px "opensans";
letter-spacing: 0.09em;
line-height: 24px;
height: 24px;
bottom: 78px;
position: relative;
box-shadow: inset 0 0 5px transparent;
}
</style>
Advertisement
Answer
You can use each loop to iterate through your divs and get required values i.e : attributes then use $(this).find("someclass") to get reference of divs where you need to change widths and texts.
Demo Code :
$(document).ready(function() {
$(".stat-bar").html(
"<div class='stat-bar-main-shade-min'></div>" +
"<div class='stat-bar-main-shade-plus'></div>" +
"<div class='stat-bar-main'></div>" +
"<div class='stat-bar-text'></div>"
);
setInterval(function() {
//loop through stat bar
$(".stat-bar").each(function() {
//get datas from divs
var maxStat = parseInt($(this).attr("data-bar-max"));
var currentStat = parseInt($(this).attr("data-bar"));
//depend on value change currentstat
currentStat > maxStat ? currentStat = maxStat : currentStat = currentStat;
var a = currentStat * (100 / maxStat);
//find statbartext inside div
$(this).find(".stat-bar-text").html("<span class='stat-bar-text-stat'>" + currentStat + "</span>" + "/" + "<span class='stat-bar-text-stat'>" + maxStat + "</span>" + " " + "<span class='stat-bar-text-stat'>" + "(" + Math.round(a) + "%" + ")" + "</span>");
///same find and apply effect there
$(this).find(".stat-bar-main-shade-min").animate({
"width": a + "%"
}, 800);
$(this).find(".stat-bar-main-shade-plus").animate({
"width": a + "%"
}, 300);
$(this).find(".stat-bar-main").animate({
"width": a + "%"
}, 700);
})
}, 2000); // END 2 second interval change
});.stat-bar {
background-color: #ACB597;
height: 26px;
width: 60vw;
margin: 0 auto;
overflow: hidden;
border: solid 1px #686E59;
border-radius: 4px;
box-shadow: inset 0 0 0 0.5px #888E79;
}
.stat-bar-main {
background-color: #464D51;
height: 30px;
width: inherit;
bottom: 50px;
position: relative;
}
.stat-bar-main-shade-min {
height: 100%;
width: 100%;
}
.stat-bar-main-shade-plus {
height: 100%;
width: 100%;
bottom: 24px;
position: relative;
}
.stat-bar-main-shade-min,
.stat-bar-main-shade-plus {
background: linear-gradient(90deg, rgba(70, 77, 81, 1) 95%, rgba(70, 77, 81, 0) 100%);
opacity: 0.35;
}
.stat-bar-text {
color: rgba(255, 255, 255, 0.8);
font: 400 10px "opensans";
letter-spacing: 0.09em;
line-height: 24px;
height: 24px;
bottom: 78px;
position: relative;
box-shadow: inset 0 0 5px transparent;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>
<br>
<!-- Trying to set attr value manually -->
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>
<br>
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>