3

Edit 2:
The following is the code i was looking for 

var curr_val_calc = curr_val * 0.03125 * 32;
var perc_of_max = (curr_val_calc / max_value * 100).toFixed(3)

Edit: The circle is a health bar indicator for a game, each time the game does a push the current health value updates.

Consider I have a circle with a percentage range of 0% (full) to -17% (empty). I would like my circle to change in 0.53125% increments which would be 32 different times in 17%.

I will have a variable for max value and current value. I want to write a function that will determine the percentage of the circle based on the current value.

I need to figure out how to calculate the 50_PERCENT_OF_MAX_VALUE, 25_PERCENT_OF_MAX_VALUE, ... and so on based on the following example. And have 32 different options for background-position-y: 0%;.

Something like:

// These variables are dynamic
var max_value = "700";
var curr_value = "659";

// if ( 659 >= 350 )
if ( curr_value >= 50_PERCENT_OF_MAX_VALUE) {
  $('#orb').css('background-position-y', '-8.5%');
}
// if ( 659 >= 175 )
if ( curr_value >= 25_PERCENT_OF_MAX_VALUE) {
  $('#orb').css('background-position-y', '-4.25%');
}
if ( curr_value >= 3.125_PERCENT_OF_MAX_VALUE) {
  $('#orb').css('background-position-y', '-0.53125%');
}

And so on....

Below is the code for my circle:

#orb {
  width: 70px;
  height: 70px;
  border-radius: 100px;
  border: 1px solid;
  cursor: pointer;
  overflow: hidden;
  background: transparent url(https://ak8.picdn.net/shutterstock/videos/9273158/thumb/1.jpg) 50% 50% no-repeat;
  color: #000;
  font-size: 12px;
  text-align: center;
}
<div id="orb" style="background-position-y: 0%;"></div>
timeba
  • 75
  • 8
  • 2
    The maths makes sense, but your description of what you're trying to do does not. Can you please edit the question to make the goal clearer. – Rory McCrossan Apr 10 '19 at 07:25
  • I hope the edit is a little bit more clear – timeba Apr 10 '19 at 07:30
  • The circle is a health bar indicator for a game, each time the game does a push the current health value updates. – timeba Apr 10 '19 at 07:37
  • Your question flows in `x-direction`, and your description flows in `negative x-direction`. Here's a mathematics solution for you. – 3rdsty4bl00d Apr 10 '19 at 07:42
  • More efficient would be background-color to not fetch image, but then you would need two elements or gradient with color stop at desired position. – Zydnar Apr 10 '19 at 07:45
  • this will probably help you : https://stackoverflow.com/a/51734530/8620333 – Temani Afif Apr 10 '19 at 07:50
  • Why are the health values not 100% for full and 0% for empty? – Eran Goldin Apr 10 '19 at 08:42
  • 1
    Isn't it just: 3.125_PERCENT_OF_MAX_VALUE = max_value * 0.03125 ? It would probably be best to store max_value as a number, not a string too. – aptriangle Apr 11 '19 at 16:00
  • @aptriangle `max_value * 0.03125 * 32` is what i was looking for thank you, make it a answer and i will mark it as correct – timeba Apr 12 '19 at 02:47

0 Answers0