Progress bar

DerekBogie · June 29, 2015

I am working on a new health system for my game on html and javascript. I am NOT using canvas on this project. My previous health bar consisted of multiple images that showed opacity at the current health. now I am attempting to change it using a progress bar and cannot figure out how to manipulate the actual progress bar to change for health. I attempted a getElementById.style.width command but it still doesnt change the bar. The only way the bar actually moves is when i manuallly set the width in the <Span> in the html. Any help would be appreciated in determining how to manipulate the red bar width using javascript in a function.. thank you.

<div class="progress-bar blue stripes">    <span style="width: 10%"></span></div>

.progress-bar {    background-color: #1a1a1a;    height: 15px;    padding: 2px;    width: 150px;    margin: 0px 0;             border-radius: 5px;    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;     position: absolute;    z-index: 125;		left: 10%;	top: 30px;}.progress-bar span {    display: inline-block;    height: 100%;    border-radius: 3px;    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;    transition: width .4s ease-in-out;    }.blue span {    background-color: red;   }

justsomeguy · June 29, 2015

Each element has a style property that you can set, so you can set style.width to change the CSS width property for it.

dsonesuk · June 29, 2015

css3 animation and js versions

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>http://w3schools.invisionzone.com/index.php?showtopic=53529#entry294658</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            .progress-bar {                background-color: #1a1a1a;                height: 15px;                padding: 2px;                width: 150px;                margin: 0px 0;                border-radius: 5px;                box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;                position: absolute;                z-index: 125;                left: 10%;                top: 30px;            }            .progress-bar span {                display: inline-block;                height: 100%;                border-radius: 3px;                box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;                transition: width .4s ease-in-out;            }            .blue span {                background-color: red;            }            /* Chrome, Safari, Opera */            @-webkit-keyframes example {                0% {width: 0;}                100% {width: 100%}            }            /* Standard syntax */            @keyframes example {                from {width: 0;}                to {width: 100%}            }            .css-anim {top: 60px;}            #progress-bar2 {                -webkit-animation-name: example; /* Chrome, Safari, Opera */                -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */                -webkit-animation-fill-mode: forwards;                -webkit-animation-timing-function: linear;                animation-name: example;                animation-duration: 4s;                animation-fill-mode: forwards;                animation-timing-function: linear;            }        </style>    </head>    <body>        <div class="progress-bar blue stripes">            <span id="progress-bar" style="width: 0"></span>        </div>        <div class="progress-bar blue stripes css-anim">            <span id="progress-bar2"></span>        </div>        <script type="text/javascript">            window.onload = function()            {                progress();            }            var increment = 3;            var r, progression = 0;            function progress()            {                progression += increment;                if (progression >= 100)                {                    progression = 100;                    clearTimeout(r)                }                else                {                    r = setTimeout(progress, 100);                }                document.getElementById('progress-bar').style.width = progression + "%";            }        </script>    </body></html>

DerekBogie · June 29, 2015

That works perfectly on the page. The only thing i need to do is change it from a progress to a health bar system. Your set up shows progression on the bar from window onload. How can i rearrange this to drop from 100% to 0% by using a variable set up such as player.health. Thank you for your detailed work on my problem,

dsonesuk · June 29, 2015

With JavaScript version the progression value sets the width of progress span, change it to progression = 0; the width will be zero, set it to 20% it will be 20% of available width, set it to 50% it will be 50% of available width and so on.

DerekBogie · June 29, 2015

I beleive there is a problem with my progress bar originally. Your script shows two progress bars both showing progression and changing the values of progression does not change or stop the bar from going to 100%.

justsomeguy · June 29, 2015

There aren't any comments or explanation in that code, do you understand how and why it works?

DerekBogie · June 29, 2015

Honestly not as much as i would like to know. I do see how it fits together and transitions but as stated I cannot figure it out enough to alter it to work for the way i am wanting to to work. MY health system is set up with localStorage.health, and localStorage.maxHealth. I will use these two variables to control the health bar percentage areas. I am attempting to take a progress bar and flip it to work as a health bar system by using CSS or any other method to alter the percentage of fullness of the progress bar depending on those two variables. The current IDs, and set up i posted is not even dire, i had used it from researching and cannot get it to work the way i wanted to. So if you can help point me in a direction of the set up im attempting that would be great. Starting from complete scratch would probably do better for me.

DerekBogie · June 29, 2015

Basically for it all to work it could be as simple as a single element. this code in the html changes the percentage of life left in the health bar.

<div class="progress-bar blue stripes">    <span id= "progressBar" style="width: 10%"></span></div>

Can we find something such as this below to simply change the width of the life bar in javascript? I can manually set up the percentage of health based on "IF" statements. I plan on using variables such as Defense and Attack along with a Math.random call to judge the amount of health to be lost. I have coded this set up below but unfortunately it does not work. This code is nestled in a function when an enemy is clicked on for attack.

document.getElementById('progressBar').style.width = "40%";

Edited June 29, 2015 by DerekBogie

justsomeguy · June 29, 2015

I assume you've already got some code to change the health value, right? If you have a function or something that sets the health value then you would add code there to adjust the width of the inner span element as a percentage. Most of the code he wrote is for animating, and you don't need animation. The last line of his progress function is what sets the actual width of the element. Other than that last line, all of the other Javascript he wrote, and some of the CSS, is only for animation.

DerekBogie · June 29, 2015

Correct i have all the functions in place.. With what i just responded with is what i cannot get to change. I have attempted to change the width percentage of that span with javascript with the getElementById but it simply does it change anything. The only thing it will do is freeze the rest of function from being completed after the attempted inline style width change. I simply just need a way to maniuplate the span width percentage with javascript

Edited June 29, 2015 by DerekBogie

Ingolme · June 29, 2015

What code are you using to change the width? I suspect you may be missing units.

DerekBogie · June 29, 2015

Default width set up with the HTMl

<div id='progressBar' class="progress-bar blue stripes">    <span style="width: 10%"></span></div>

Using a function that is already made to attack. When that function is activated in javascript I would like to manipulate the inline CSS on the Span in HTML. I attempted to make the id="progressBar" on both the div and the span and neither works. I do not understand what im missing as i have used this method a lot to change css within the game.

document.getElementById('progressBar').style.width = "40%";

Unfortunately for some reason this will not work at all and does not change the width of the span progress bar.

Here is the CSS for reference. The picture shows the health bar in the top left corner.. On the map you see a little jelly with a number 10. When you click that jelly monster it randomizes damage to both you and the jelly which i need to reflect back to the players health.

.progress-bar {    background-color: #1a1a1a;    height: 15px;    padding: 2px;    width: 150px;    margin: 0px 0;             border-radius: 5px;    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;     position: absolute;    z-index: 125;		left: 10%;	top: 30px;}.progress-bar span {    display: inline-block;    height: 100%;    border-radius: 3px;    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;    transition: width .4s ease-in-out;    }.blue span {    background-color: red;   }

Edited June 29, 2015 by DerekBogie

justsomeguy · June 29, 2015

The only thing it will do is freeze the rest of function from being completed after the attempted inline style width change.

Sounds like there is a fatal error that is stopping the code, make sure to keep an eye on your developer console for error messages.

Ingolme · June 29, 2015

Are you specifically setting the width to exactly "40%"?

If you're not, then I need to see exactly the line of code you are using.

DerekBogie · June 29, 2015

In the HTML i will set it to default 100% health. I will use a timed loop function to test player health from the variable localStorage.health and compare it to localStorage.MaxHealth. I havent rewritten the code to test for player health yet, right now im putting in default values and see if the health bar actually moves and slides the way its suppose to by changing the width value on a click function of the enemy. If i can just get the javascript to be able to manipulate the default width value in the HTML span then i will be set. So currently what i previously listed it all the coding i have so far for this health bar and functions.

Ingolme · June 30, 2015

I see where the problem is. You're not setting the width of the span, you're setting the width of the entire bar.

Here's what your code should look like:

document.getElementById('progressBar').getElementsByTagName("span")[0].style.width = "40%";

DerekBogie · June 30, 2015

This doesn't seem to work. I think the html portion isnt matching up with the new code. Should the html look like this?

<div class="progress-bar blue stripes">    <span id="progressBar" style="width: 10%"></span></div>

or like this

<div id="progressBar" class="progress-bar blue stripes">    <span  style="width: 10%"></span></div>

I have tried both ways for the html portion. and placed your code in my javascript function with no luck in changing the width of the bar. Like i said the default width of the html is irrelevant because i will code it to be different based on the players current health on a timed loop update function.

document.getElementById('progressBar').getElementsByTagName("span")[0].style.width = "40%";

Ingolme · June 30, 2015

Do you understand what my line of code is doing?

DerekBogie · June 30, 2015

I beleive i understand the concept. Am lost on the [0], Ingolme. I have never seen .getElementsByTagName but i assume its calling the indvidual span elements correct?

Edited June 30, 2015 by DerekBogie

dsonesuk · June 30, 2015

The id reference should be unique within a page, using multiple id will result in only the last identical id being targeted.

To change the health bar you need an event, i used window.onload event, you need to use an onclick event (which you have apparently already set up) to trigger the change.

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />        <title>http://w3schools.invisionzone.com/index.php?showtopic=53529#entry294658</title>        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>        <script type="text/javascript">        </script>        <style type="text/css">            .progress-bar {                background-color: #1a1a1a;                height: 15px;                padding: 2px;                width: 150px;                margin: 0px 0;                border-radius: 5px;                box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;                position: absolute;                z-index: 125;                left: 10%;                top: 30px;            }            .progress-bar span {                display: inline-block;                height: 100%;                border-radius: 3px;                box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;                transition: width .4s ease-in-out;            }            .blue span {                background-color: red;            }        </style>    </head>    <body>        <div id="progressBar" class="progress-bar blue stripes">            <span id="progress-bar" style="width: 0"></span>        </div>        <span  id="justclickme">clickme</span>        <script type="text/javascript">            // window.onload = function()  use only if code placed in <head>...</head>            //  {  use only if code placed in <head>...</head>            document.getElementById('justclickme').onclick = function() {                document.getElementById('progressBar').getElementsByTagName("span")[0].style.width = "40%";            }            //  }  use only if code placed in <head>...</head>        </script>    </body></html>

justsomeguy · June 30, 2015

Why would you use a timed loop to update the health bar? Do you have everything directly setting the value of the health instead of calling a single function that changes the health? You should have a function to change the health that would update the values in localstorage, change the health bar, check for death, etc. That code only needs to be in one place.

DerekBogie · June 30, 2015

Since i couldnt figure out that last code, Sorry I attempted to simplify the entire set up in a way. Maybe this will be better to understand. I use CSS to change the width of the health bar but cannot get javascript to take control of the css property of the width and alter it with a function. I dont know why it wont work I have used this method for numerous other functions in my game.

Ive taken the default inline css style out of the html.

html

<div class="progress-bar blue stripes">    <div id="healthSystem"></div></div>

The value of 100% is not a set value. I simply used the 100% value for testing purposes in attempt to manipulate the health bar.

Javascript

document.getElementById('healthSystem').style.width = "100%";

Again the values set in the CSS and Javascript are not a have to have set value. They can be any value im just attempting to try to get the value to change with javascript

CSS

#healthSystem {width: 80%;}.progress-bar {    background-color: #1a1a1a;    height: 15px;    padding: 2px;    width: 150px;    margin: 0px 0;             border-radius: 5px;    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;     position: absolute;    z-index: 125;		left: 10%;	top: 30px;}.progress-bar div {    display: inline-block;    height: 100%;    border-radius: 3px;    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;    transition: width .4s ease-in-out;    }.blue div {    background-color: red;   }

This entire set up can be changed to whatever will work honestly. Nothing in this code has to be named or coded a certain way, i just need it to actually work and have a red health bar that i can manipulate by changing the width value within a javascript function. Like i said i have used this method numerous times, i have a feeling that the rest of the CSS for the health bar are preventing the change with javascript for some reason.

justsomeguy · June 30, 2015

i have a feeling that the rest of the CSS for the health bar are preventing the change with javascript for some reason.

Styles set directly on the element using inline styles or Javascript will take precedence over styles set elsewhere. I still think you're getting fatal Javascript errors that are stopping the code from running. You're pasting individual lines of code without context that don't have problems, I bet when it's all put together in context there are other problems that we aren't seeing here, and you need to watch your developer console for error messages. You didn't respond to me when I suggested that earlier.

DerekBogie · June 30, 2015

Im sorry i checked the console and didnt see any other errors other than a few that were already in place before hand. One was for the custom cursor. Every other function is working properly but here is the entire html script for that page. i attached a picture of my console.. the gam1090 is a custom cursor error ive had since the beginning.. I am no longer using a timed loop for this current set up. the timed loop was something i used when i updated the game with actual pictures of a health bar. i deleted the entire system for this current one.

<html><head><meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /><meta charset="utf-8" />    <title>The Legend of the Seven dragon</title>    <link rel="stylesheet" type="text/css" media="screen" href="CSS/mainsheet.css" />    <link rel="shortcut icon" href="favicon.ico" /></head><body onload="gameupdate ()" oncontextmenu="return false"><audio id="soundEfx" src="music/fall.mp3"></audio><audio id="soundCompletion" src="music/completion.mp3"></audio><audio id="soundReset" src="music/resetButton.mp3"></audio><audio id="soundBuzzer" src="music/buzzer.mp3"></audio><audio id="soundHeal" src="music/heal.mp3"></audio><audio id="soundScroll" src="music/scroll.mp3"></audio><div id="gameArea"><div class="progress-bar blue stripes">    <div id="healthSystem"></div></div><img id="menuLayout" style="width: 85%; height: 26px;" src="images/menuTop.png"><img id="menuLayout" style="width: 24%; height: 64px;left: 87.23%;" src="images/menuTopRight.png"><img src="images/menuLeftTop.png" id="menuLayout" style="width: 40; top: 100px; height: 150;"><img src="images/menuLeft.png" id="menuLayout" style="width: 16; top: 21px; height: 670;"><img src="images/menuBottom.png" id="menuLayout" style="width: 79.5%; top: 93%; height: 41px;left: 31.9%;"><img src="images/menuBottomLeft.png" id="menuLayout" style="width: 28.7%; top: 90%; height: 64px;"><img src="images/menuRight.png" id="menuLayout" style="width: 16px; left: 110%; top: 64px; height: 650px;"><iframe src="reload.html" border="0" scrolling="yes" overflow="scroll" style="border: 0px; border-image: none; left: 4%;  height: 95%;  float: left;position: absolute;width: 106%;" seamless="seamless"></iframe><h1 id="gametime" style="opacity: 0; width: 0px; height: 0px; left: 0px; top: 0px;"></h1><h1 id="dragonCoins" style=" z-index: 10; left: 10.5%; top: 88%;"></h1><h1 id="playerGold" style="left: 90.8%; top: 3%; width: 155px; text-align: center; color: rgb(255, 255, 102); font-size: 20px; font-style: oblique; position: absolute;z-index: 10;"></h1><img onclick="inventory ()" border="0" src="images/spikes.jpg" id="killzone" style=" position: absolute; opacity: 0; top: 94%; width: 250px; height: 40px; left: 955px; z-index: 10;"><img style="left: 4%; top: 13%; width: 30; height: 150; z-index: 80; position: absolute; opacity: 0;" onclick="showWeaponSlider ()" src="images/spikes.jpg" border="0" "=""><div id="weaponSlider"><img src="images/weaponsSlider.jpg" style="width: 600px; left: 4%; top: 12%; height: 500px; z-index: 9;position: absolute;"><h1 id="timesFallenStats" style="left: 82%; top: 25.6%; width: 90px; text-align: center; color: tan; font-size: 20px; position: absolute; z-index: 90;">0</h1><h1 id="strength" style="left: 30%; top: 95%; width: 90px; text-align: center; color: rgb(8, 77, 8); font-size: 30px; position: absolute; z-index: 90;">0</h1><h1 id="defense" style="left: 79%; top: 95%; width: 90px; text-align: center; color: maroon; font-size: 30px; position: absolute; z-index: 90;">0</h1><h1 id="enemiesSlain" style="left: 82%; top: 40.8%; width: 90px; text-align: center; color: tan; font-size: 20px; position: absolute; z-index: 90;">0</h1><h1 id="damageTaken" style="left: 82%; top: 56.5%; width: 90px; text-align: center; color: tan; font-size: 20px; position: absolute; z-index: 90;">0</h1><h1 id="experience" style="left: 82%; top: 71.6%; width: 90px; text-align: center; color: tan; font-size: 20px; position: absolute; z-index: 90;">0</h1><img id="helmetOne"  border="0" style="width: 37px; height: 50px; z-index: 100;left: 17%;position: absolute;top: 20%; opacity: 0;" src="images/helmetOne.jpg" "><img id="helmetTwo"  border="0" style="width: 34px; height: 48px; z-index: 100;left: 17%;position: absolute;top: 20%; opacity: 0;" src="images/helmetTwo.jpg" "><img id="helmetThree"  border="0" style="width: 28px; height: 47px; z-index: 100;left: 18%;position: absolute;top: 20%; opacity: 0;" src="images/helmetThree.jpg" "><img id="helmetFour"  border="0" style="width: 37px; height: 47px; z-index: 100;left: 17%;position: absolute;top: 20%; opacity: 0;" src="images/helmetFour.jpg" "><img id="armourOne"  border="0" style="width: 40px; height: 45px; z-index: 100;left: 36%;position: absolute;top: 32%; opacity: 0;" src="images/armourOne.jpg" "><img id="armourTwo"  border="0" style="width: 45px; height: 44px; z-index: 100;left: 36%;position: absolute;top: 32%; opacity: 0;" src="images/armourTwo.jpg" "><img id="armourThree"  border="0" style="width: 48px; height: 46px; z-index: 100;left: 35.5%;position: absolute;top: 32%; opacity: 0;" src="images/armourThree.jpg" "><img id="armourFour"  border="0" style="width: 46px; height: 48px; z-index: 100;left: 36%;position: absolute;top: 31.5%; opacity: 0;" src="images/armourFour.jpg" "><img id="swordOne"  border="0" style="width: 43px; height: 40px; z-index: 100;left: 8%;position: absolute;top: 62%; opacity: 0;" src="images/swordOne.jpg" "><img id="swordTwo"  border="0" style="width: 43px; height: 44px; z-index: 100;left: 7.5%;position: absolute;top: 63%; opacity: 0;" src="images/swordTwo.jpg" "><img id="swordThree"  border="0" style="width: 43px; height: 44px; z-index: 100;left: 7.5%;position: absolute;top: 62.5%; opacity: 0;" src="images/swordThree.jpg" "><img id="swordFour"  border="0" style="width: 46px; height: 50px; z-index: 100;left: 7.5%;position: absolute;top: 62%; opacity: 0;" src="images/swordFour.jpg" "><img id="shieldOne"  border="0" style="width: 38px; height: 46px; z-index: 100;left: 39%;position: absolute;top: 61.5%; opacity: 0;" src="images/shieldOne.jpg" "><img id="shieldTwo"  border="0" style="width: 38px; height: 46px; z-index: 100;left: 39%;position: absolute;top: 61.5%; opacity: 0;" src="images/shieldTwo.jpg" "><img id="shieldThree"  border="0" style="width: 40px; height: 52px; z-index: 100;left: 39%;position: absolute;top: 61%; opacity: 0;" src="images/shieldThree.jpg" "><img id="shieldFour"  border="0" style="width: 42px; height: 51px; z-index: 100;left: 39%;position: absolute;top: 61%; opacity: 0;" src="images/shieldFour.jpg" "><img id="bootsOne"  border="0" style="width: 43px; height: 48px; z-index: 100;left: 36%;position: absolute;top: 82%; opacity: 0;" src="images/bootsOne.jpg" "><img id="bootsTwo"  border="0" style="width: 40px; height: 47px; z-index: 100;left: 36.5%;position: absolute;top: 82%; opacity: 0;" src="images/bootsTwo.jpg" "><img id="bootsThree"  border="0" style="width: 34px; height: 44px; z-index: 100;left: 37%;position: absolute;top: 82.5%; opacity: 0;" src="images/bootsThree.jpg" "><img id="bootsFour"  border="0" style="width: 38px; height: 42px; z-index: 100;left: 37%;position: absolute;top: 82.5%; opacity: 0;" src="images/bootsFour.jpg" "></div><img style="left: 48%; top: 93%; width: 145; height: 30; z-index: 80; position: absolute; opacity: 0;" onclick="showItemSlider()" src="images/spikes.jpg" border="0" "=""><div id="itemSlider"><img src="images/itemSlider.jpg" style="width: 750px; left: 17.3%; top: 83.4%; height: 100px; z-index: 9;position: absolute;"><h1 id="playerLockPicks" style="position: absolute; top: 139%; left: 108.38%; font-size: 13; color: white; width: 30px; text-align: center;z-index: 10;"></h1><h1 id="playerPotions" style="position: absolute; top: 140%; left: 29.2%; font-size: 13; color: white; width: 30px; text-align: center;z-index: 10;"></h1><h1 id="playerScrolls" style="position: absolute; top: 139%; left: 49.1%; font-size: 13px; color: white; width: 30px; text-align: center;z-index: 10;"></h1><h1 id="playerKeys" style="position: absolute; top: 139%; left: 68.75%; font-size: 13px; color: white; width: 30px; text-align: center;z-index: 10;"></h1><h1 id="playerEggs" style="position: absolute; top: 139%; left: 88.49%; font-size: 13px; color: white; width: 30px; text-align: center;z-index: 10;"></h1><img id="killzone" style="left: 22%; top: 150%; width: 75px; height: 25px; position: absolute; opacity: 0; z-index: 105;" onclick="usePotion ()" src="images/spikes.jpg" border="0" "=""><img id="killzone" style="left: 42%; top: 150%; width: 75px; height: 25px; position: absolute; opacity: 0; z-index: 105;" onclick="useScroll ()" src="images/spikes.jpg" border="0" "=""></div></div><script src="scripts/BasicFunctions.js"></script></body>    </html>

Edited June 30, 2015 by DerekBogie

Progress bar

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in