FANDOM


Make sure to enable test mode

All you need is:

  • any number of groups marked with a dynamic-stats class,
  • element with dynamic-stats-switch class where the dropdown will be (any number),
  • and then each stat as a single element with dynamic-stat class + data-base and data-level attributes (you guessed it! only 2).
Example Code

Health

Alistar: 613.36 (+106)
Kalista: 517.76 (+83)

Mana

Zoe: 340 (+50)
Syndra: 384 (+60)

Attack speed

TF: 0.651 (+0 (+3.22)%)
MF: 0.656 (+0 (+3)%)

You can have as many as you want (for some reason)

<div class="dynamic-stats"  >
<div class="dynamic-stats-switch" data-prefix="Level:"></div>
 
Health
:Alistar: <span class="dynamic-stat" data-base="613.36" data-level="106">613.36 (+106)</span>
:Kalista: <span class="dynamic-stat" data-base="517.76" data-level="83">517.76 (+83)</span>
Mana
:Zoe:     <span class="dynamic-stat" data-base="340" data-level="50">340 (+50)</span>
:Syndra:  <span class="dynamic-stat" data-base="384" data-level="60">384 (+60)</span>
Attack speed
:TF: 0.651 (+<span class="dynamic-stat" data-base="0" data-level="3.22">0 (+3.22)</span>%)
:MF: 0.656 (+<span class="dynamic-stat" data-base="0" data-level="3">0 (+3)</span>%)
 
You <span class="dynamic-stats-switch"></span>
can <span class="dynamic-stats-switch"></span>
have <span class="dynamic-stats-switch"></span>
as <span class="dynamic-stats-switch"></span>
many <span class="dynamic-stats-switch"></span>
as <span class="dynamic-stats-switch"></span>
you <span class="dynamic-stats-switch"></span>
want <span class="dynamic-stats-switch"></span>
(for some reason)
 
</div>
Default to 18th level and enable <small> around decimals.

Health

Alistar: 613.36 (+106)
Kalista: 517.76 (+83)

Mana

Zoe: 340 (+50)
Syndra: 384 (+60)

Attack speed

TF: 0.651 (+0 (+3.22)%)
MF: 0.656 (+0 (+3)%)

You can have as many as you want (for some reason)

<div class="dynamic-stats" data-accented="true" data-default="18">
<div class="dynamic-stats-switch" data-prefix="Level:"></div>
 
Health
:Alistar: <span class="dynamic-stat" data-base="613.36" data-level="106">613.36 (+106)</span>
:Kalista: <span class="dynamic-stat" data-base="517.76" data-level="83">517.76 (+83)</span>
Mana
:Zoe:     <span class="dynamic-stat" data-base="340" data-level="50">340 (+50)</span>
:Syndra:  <span class="dynamic-stat" data-base="384" data-level="60">384 (+60)</span>
Attack speed
:TF: 0<small>.651</small> (+<span class="dynamic-stat" data-base="0" data-level="3.22">0 (+3.22)</span>%)
:MF: 0<small>.656</small> (+<span class="dynamic-stat" data-base="0" data-level="3">0 (+3)</span>%)
 
You <span class="dynamic-stats-switch"></span>
can <span class="dynamic-stats-switch"></span>
have <span class="dynamic-stats-switch"></span>
as <span class="dynamic-stats-switch"></span>
many <span class="dynamic-stats-switch"></span>
as <span class="dynamic-stats-switch"></span>
you <span class="dynamic-stats-switch"></span>
want <span class="dynamic-stats-switch"></span>
(for some reason)
 
</div>
30th level!1!

Health

Alistar: 613.36 (+106)
Kalista: 517.76 (+83)

Mana

Zoe: 340 (+50)
Syndra: 384 (+60)

Attack speed

TF: 0.651 (+0 (+3.22)%)
MF: 0.656 (+0 (+3)%)

You can have as many as you want (for some reason)

<div class="dynamic-stats"  data-default="30">
<div class="dynamic-stats-switch" data-prefix="Level:"></div>
 
Health
:Alistar: <span class="dynamic-stat" data-base="613.36" data-level="106">613.36 (+106)</span>
:Kalista: <span class="dynamic-stat" data-base="517.76" data-level="83">517.76 (+83)</span>
Mana
:Zoe:     <span class="dynamic-stat" data-base="340" data-level="50">340 (+50)</span>
:Syndra:  <span class="dynamic-stat" data-base="384" data-level="60">384 (+60)</span>
Attack speed
:TF: 0.651 (+<span class="dynamic-stat" data-base="0" data-level="3.22">0 (+3.22)</span>%)
:MF: 0.656 (+<span class="dynamic-stat" data-base="0" data-level="3">0 (+3)</span>%)
 
You <span class="dynamic-stats-switch"></span>
can <span class="dynamic-stats-switch"></span>
have <span class="dynamic-stats-switch"></span>
as <span class="dynamic-stats-switch"></span>
many <span class="dynamic-stats-switch"></span>
as <span class="dynamic-stats-switch"></span>
you <span class="dynamic-stats-switch"></span>
want <span class="dynamic-stats-switch"></span>
(for some reason)
 
</div>

Nested Edit

Health

Alistar: 613.36 (+106)
Kalista: 517.76 (+83)

Mana

Zoe: 340 (+50)
Syndra: 384 (+60)

Attack speed

TF: 0.651 (+0 (+3.22)%)
MF: 0.656 (+0 (+3)%)

You can have as many as you want (for some reason)


Health

Alistar: 613.36 (+106)
Kalista: 517.76 (+83)

Mana

Zoe: 340 (+50)
Syndra: 384 (+60)

Attack speed

TF: 0.651 (+0 (+3.22)%)
MF: 0.656 (+0 (+3)%)

You can have as many as you want (for some reason)


Health

Alistar: 613.36 (+106)
Kalista: 517.76 (+83)

Mana

Zoe: 340 (+50)
Syndra: 384 (+60)

Attack speed

TF: 0.651 (+0 (+3.22)%)
MF: 0.656 (+0 (+3)%)

You can have as many as you want (for some reason)

TabView Edit