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:
JavaScript
x
10
10
1
<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>2
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>3
<br>4
<!-- Trying to set attr value manually -->5
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>6
<br>7
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>8
<br>9
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>10
In script:
JavaScript
1
50
50
1
<script>2
/* Requiring jQuery.js */3
$(document).ready( function(){4
5
/* Print the bar elements at the screen */6
$(".stat-bar").html(7
"<div class='stat-bar-main-shade-min'></div>" + 8
"<div class='stat-bar-main-shade-plus'></div>" + 9
"<div class='stat-bar-main'></div>" + 10
"<div class='stat-bar-text'></div>"11
);12
13
/* Animating a changed variable */14
setInterval(function(){ // 2 second interval change15
16
/* Get attr value from the stat bar */17
var bar = $(".stat-bar");18
if (bar){ // bar19
var maxStat = bar.attr("data-bar-max");20
21
/* Probably working area (remove "//" from a case and add it to all other case) */22
/* Case A (testing): randomized attr value for "[data-bar]" (it works) */23
// var currentStat = Math.floor((Math.random() * 100) + 50);24
/* Case B (testing):: manual attr value for test (it works) */25
var currentStat = 41;26
/* Case C (what is demanded): getting attr value from "[data-bar]" (doesn’t works) */27
// var currentStat = bar.attr("data-bar");28
29
/* END Probably working area */30
31
if (currentStat > maxStat){currentStat = maxStat;32
} else if (currentStat < 0){currentStat = 0;33
} else {currentStat = currentStat;}34
} // END bar35
36
var a = currentStat * (100 / maxStat);37
$(".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>");38
setTimeout(function(){39
$(".stat-bar-main-shade-min").animate({"width": a + "%"}, 800);40
$(".stat-bar-main-shade-plus").animate({"width": a + "%"}, 300);41
$(".stat-bar-main").animate({"width": a + "%"}, 700);42
}, 400);43
44
}, 2000); // END 2 second interval change45
46
47
48
});49
</script>50
In css:
JavaScript
1
40
40
1
<style>2
.stat-bar{3
background-color: #ACB597;4
height: 26px;width: 60vw;5
margin: 0 auto;6
overflow: hidden;7
border: solid 1px #686E59;8
border-radius: 4px;9
box-shadow: inset 0 0 0 0.5px #888E79;10
}11
.stat-bar-main{12
background-color: #464D51;13
height: 30px;width: inherit;14
bottom: 50px;15
position: relative;16
}17
18
.stat-bar-main-shade-min{height: 100%;width: 100%;}19
.stat-bar-main-shade-plus{20
height: 100%;width: 100%;21
bottom: 24px;22
position: relative;23
}24
.stat-bar-main-shade-min, .stat-bar-main-shade-plus{25
background: linear-gradient(90deg, rgba(70,77,81,1) 95%, rgba(70,77,81,0) 100%);26
opacity: 0.35;27
}28
29
.stat-bar-text{30
color: rgba(255,255,255,0.8);31
font: 400 10px "opensans";32
letter-spacing: 0.09em;33
line-height: 24px;34
height: 24px;35
bottom: 78px;36
position: relative;37
box-shadow: inset 0 0 5px transparent;38
}39
</style>40
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 :
JavaScript
1
36
36
1
$(document).ready(function() {2
$(".stat-bar").html(3
"<div class='stat-bar-main-shade-min'></div>" +4
"<div class='stat-bar-main-shade-plus'></div>" +5
"<div class='stat-bar-main'></div>" +6
"<div class='stat-bar-text'></div>"7
);8
9
setInterval(function() {10
//loop through stat bar11
$(".stat-bar").each(function() {12
//get datas from divs13
var maxStat = parseInt($(this).attr("data-bar-max"));14
var currentStat = parseInt($(this).attr("data-bar"));15
//depend on value change currentstat16
currentStat > maxStat ? currentStat = maxStat : currentStat = currentStat;17
var a = currentStat * (100 / maxStat);18
//find statbartext inside div19
$(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>");20
21
///same find and apply effect there22
$(this).find(".stat-bar-main-shade-min").animate({23
"width": a + "%"24
}, 800);25
$(this).find(".stat-bar-main-shade-plus").animate({26
"width": a + "%"27
}, 300);28
$(this).find(".stat-bar-main").animate({29
"width": a + "%"30
}, 700);31
})32
}, 2000); // END 2 second interval change33
34
35
36
});JavaScript
1
47
47
1
.stat-bar {2
background-color: #ACB597;3
height: 26px;4
width: 60vw;5
margin: 0 auto;6
overflow: hidden;7
border: solid 1px #686E59;8
border-radius: 4px;9
box-shadow: inset 0 0 0 0.5px #888E79;10
}11
12
.stat-bar-main {13
background-color: #464D51;14
height: 30px;15
width: inherit;16
bottom: 50px;17
position: relative;18
}19
20
.stat-bar-main-shade-min {21
height: 100%;22
width: 100%;23
}24
25
.stat-bar-main-shade-plus {26
height: 100%;27
width: 100%;28
bottom: 24px;29
position: relative;30
}31
32
.stat-bar-main-shade-min,33
.stat-bar-main-shade-plus {34
background: linear-gradient(90deg, rgba(70, 77, 81, 1) 95%, rgba(70, 77, 81, 0) 100%);35
opacity: 0.35;36
}37
38
.stat-bar-text {39
color: rgba(255, 255, 255, 0.8);40
font: 400 10px "opensans";41
letter-spacing: 0.09em;42
line-height: 24px;43
height: 24px;44
bottom: 78px;45
position: relative;46
box-shadow: inset 0 0 5px transparent;47
}JavaScript
1
10
10
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>2
<div class="stat-bar hp" data-bar="41" data-bar-max="100"></div>3
<div class="stat-bar ap" data-bar="50" data-bar-max="120"></div>4
<br>5
<!-- Trying to set attr value manually -->6
<button onclick="$('.stat-bar').attr('data-bar', '50');">Set Bar Value</button>7
<br>8
<button onclick="$('.stat-bar').attr('data-bar', '30');">Set Bar Value</button>9
<br>10
<button onclick="$('.stat-bar').attr('data-bar', '100');">Set Bar Value</button>