Changing Width of an Element Using a Variable

thesmart1 · 01-08-2007, 09:14 PM

Is it possible to change the width of an element to the value of a variable using the getElementById method?

bostjank · 01-08-2007, 10:52 PM

Is this what you need?

Code:

function changeWidth(controlID,myWidth) {
	document.getElementById(controlID).style.width = myWidth + "px";
}

thesmart1 · 01-09-2007, 12:27 AM

Yes, thanks.

I'm working on a time-based progress bar. It's supposed to make the width of the inner div decrease by 10% every .5 seconds (completely after 5 seconds). But it isn't decreasing at all.

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title></title>
        <link rel="stylesheet" type="text/css" href="game.css">
        <script type="text/javascript" language="javascript" src="timebar.js">
    </head>
    <body onload="startbar()">
        <div id="outertimebar"><div id="innertimebar"></div></div>
    </body>
</html>

JavaScript:

Code:

progress=100;
function progressbar(){
    progress=progress-10;
    document.getElementById('innertimebar').style.width=progress+"px";
    startbar();
    }
function startbar(){
    t=setTimeout('progressbar()',500)
    }

And in the CSS file, the divs have different background colors. I'm almost certain the problem lies in the progressbar() function.

bostjank · 01-09-2007, 06:29 AM

I believe the problem lies in the missing SCRIPT end tag - this is how you should construct it

Code:

<script type="text/javascript" language="javascript" src="timebar.js"></script>

david_kw · 01-09-2007, 04:24 PM

A few things I had to change to get it to work

First in the head element, I moved the onload from an attribute in the body tag to

window.onload = startbar;

since I hear that is the way it should be done nowadays. Then setTimeout takes a function as the first parameter, not a string with the function name in it. Next I had to put a closing </script> tag. Last I added a check so the bar would stop updating when it was at progress zero.

In body element, I moved the divs out of each other so I could set the same coordinates for them. Also I found I had to put a   in them to get the color to show (there may be other ways). And because of this, again in the head element, I had to make the display="none" when it was down to zero width.

I think those were all the changes I made. Anyway, here is the code with changes. It seems to work in FF1.5 and IE7.

Code:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Progress Bar</title>
    <style type="text/css">
      #outertimebar  { background-color:red; position:absolute; left:40; top:100; width:100; }
      #innertimebar  { background-color:green; position:absolute; left:40; top:100; width:100; }
    </style>
    <script type="text/javascript">
      var progress=100;
      function progressbar(){
        progress=progress-10;
        if (progress == 0) {
          document.getElementById('innertimebar').style.display = "none";
        }
        document.getElementById('innertimebar').style.width=progress+"px";
        if (progress > 0) {
          startbar();
        }
      }
      function startbar(){
        t=setTimeout(progressbar,500)
      }
      window.onload = startbar;
    </script>
  </head>
  <body>
    <div id="outertimebar">&nbsp;</div>
    <div id="innertimebar">&nbsp;</div>
  </body>
</html>

Good luck.

david_kw

thesmart1 · 01-11-2007, 10:53 PM

Sorry for taking so long. I apparently forgot the end tag, but after I put it in I got it to work. Thanks for all the help.

I made some changes and because I'm using the progress bar for a health bar in a game, I added an effect similar to the death scenes in 007 movies/games to be shown when the bar reaches zero.

Here's the final code, if anyone wants to see it:

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>.:SECRET AGENT - LEVEL 2:.</title>
        <link rel="stylesheet" type="text/css" href="game.css">
        <script type="text/javascript" language="javascript" src="playerhealthbar.js"></script>
        <script type="text/javascript" language="javascript" src="enemyhealthbarspart1.js"></script>
    </head>
    <body onload="startbar()">
        <img src="part1.png" alt="BANK" class="sceneimg">
            <!-- PLAYER STATS -->
                <div id="outertimebar"><div id="innertimebar"></div></div>
                <img src="playerhealthbar_pistol.gif" alt="Agent K Stats" class="playerstatsplateimg">
            <!-- ENEMY 1 -->
                <div id="enemy1">
                    <div id="outereventbar1"><div id="innereventbar1"></div></div>
                    <img src="enemyhealthbar_pistol.gif" alt="Enemy Stats" class="enemy1statsplateimg">
                    <a href="javascript:decbar1(50)" id="eventlink1"><img src="enemyfaceright.gif" alt="Enemy" class="enemy1img"></a>
                </div>
            <!-- ENEMY 2 -->
                <div id="enemy2">
                    <div id="outereventbar2"><div id="innereventbar2"></div></div>
                    <img src="enemyhealthbar_pistol.gif" alt="Enemy Stats" class="enemy2statsplateimg">
                    <a href="javascript:decbar2(50)" id="eventlink2"><img src="enemyfaceleft.gif" alt="Enemy" class="enemy2img"></a>
                </div>
            <!-- ENEMY 3 -->
                <div id="enemy3">
                    <div id="outereventbar3"><div id="innereventbar3"></div></div>
                    <img src="enemyhealthbar_pistol.gif" alt="Enemy Stats" class="enemy3statsplateimg">
                    <a href="javascript:decbar3(50)" id="eventlink3"><img src="enemyfaceleft.gif" alt="Enemy" class="enemy3img"></a>
                </div>
            <!-- ENEMY 4 -->
                <div id="enemy4">
                    <div id="outereventbar4"><div id="innereventbar4"></div></div>
                    <img src="enemyhealthbar_pistol.gif" alt="Enemy Stats" class="enemy4statsplateimg">
                    <a href="javascript:decbar4(50)" id="eventlink4"><img src="enemyfaceleft.gif" alt="Enemy" class="enemy4img"></a>
                </div>
            <!-- DEATH -->
                <div id="red"><div id="over"><b>You have died.<br><br><a href="brief.html">Retry</a><br><a href="../missionsintro.html">Quit</a></b></div></div>
    </body>
</html>

javascript:

Code:

timeprogress=200;
increment=10;
function progressbar(){
    timeprogress=timeprogress-increment;
    document.getElementById("innertimebar").style.width=timeprogress+"px";
    if (timeprogress==0){
        startdie();
        }
    else {
        startbar();
        }
    }
function startbar(){
    t=setTimeout('progressbar()',250);
    }
bloodheight=0;
function blooddie(){
    if (bloodheight<600){
        bloodheight=bloodheight+200;
        document.getElementById("red").style.visibility="visible";
        document.getElementById("red").style.height=bloodheight+"px";
        startdie();
        }
    else {
        document.getElementById("over").style.visibility="visible";
        }
    }
function startdie(){
    u=setTimeout('blooddie()',500);
    }

CSS:

Code:

/* DOCUMENT */
    body {
        margin:0px 0px 0px 0px
        }
    .sceneimg {
        position:absolute;
        top:0px;
        left:0px;
        width:600px;
        height:600px;
        z-index:0;
        cursor:crosshair
        }

/* PLAYER */
    .playerstatsplateimg {
        position:absolute;
        top:0px;
        left:0px;
        z-index:3
        }
    #outertimebar {
        position:absolute;
        top:23px;
        left:3px;
        background-color:#ff0000;
        width:200px;
        height:20px;
        z-index:1
        }
    #innertimebar {
        background-color:#00ff00;
        height:20px;
        z-index:2
        }

/* ENEMY 1 */
    #enemy1 {
        position:absolute;
        left:36px;
        top:286px;
        width:109px;
        height:149px;
        z-index:1
        }
    .enemy1statsplateimg {
        position:absolute;
        left:0px;
        top:0px;
        z-index:4
        }
    #outereventbar1 {
        position:absolute;
        left:3px;
        top:23px;
        background-color:#ff0000;
        width:100px;
        height:10px;
        overflow:hidden;
        z-index:2
        }
    #innereventbar1 {
        background-color:#00ff00;
        height:10px;
        overflow:hidden;
        z-index:3
        }
    .enemy1img {
        position:absolute;
        left:28px;
        top:41px;
        width:81px;
        border:0px;
        z-index:2;
        cursor:crosshair
        }

/* ENEMY 2 */
    #enemy2 {
        position:absolute;
        left:135px;
        top:286px;
        width:123px;
        height:149px;
        z-index:1
        }
    .enemy2statsplateimg {
        position:absolute;
        left:17px;
        top:0px;
        z-index:4
        }
    #outereventbar2 {
        position:absolute;
        left:20px;
        top:23px;
        background-color:#ff0000;
        width:100px;
        height:10px;
        overflow:hidden;
        z-index:2
        }
    #innereventbar2 {
        background-color:#00ff00;
        height:10px;
        overflow:hidden;
        z-index:3
        }
    .enemy2img {
        position:absolute;
        left:20px;
        top:38px;
        width:66px;
        border:0px;
        z-index:2;
        cursor:crosshair
        }

/* ENEMY 3 */
    #enemy3 {
        position:absolute;
        left:354px;
        top:286px;
        width:106px;
        height:149px;
        z-index:1
        }
    .enemy3statsplateimg {
        position:absolute;
        left:0px;
        top:0px;
        z-index:4
        }
    #outereventbar3 {
        position:absolute;
        left:3px;
        top:23px;
        background-color:#ff0000;
        width:100px;
        height:10px;
        overflow:hidden;
        z-index:2
        }
    #innereventbar3 {
        background-color:#00ff00;
        height:10px;
        overflow:hidden;
        z-index:3
        }
    .enemy3img {
        position:absolute;
        left:39px;
        top:38px;
        width:66px;
        border:0px;
        z-index:2;
        cursor:crosshair
        }

/* ENEMY 4 */
    #enemy4 {
        position:absolute;
        left:470px;
        top:286px;
        width:106px;
        height:149px;
        z-index:1
        }
    .enemy4statsplateimg {
        position:absolute;
        left:0px;
        top:0px;
        z-index:4
        }
    #outereventbar4 {
        position:absolute;
        left:3px;
        top:23px;
        background-color:#ff0000;
        width:100px;
        height:10px;
        overflow:hidden;
        z-index:2
        }
    #innereventbar4 {
        background-color:#00ff00;
        height:10px;
        overflow:hidden;
        z-index:3
        }
    .enemy4img {
        position:absolute;
        left:1px;
        top:38px;
        width:66px;
        border:0px;
        z-index:2;
        cursor:crosshair
        }

/* DEATH */
    #red {
        position:absolute;
        top:0px;
        left:0px;
        background-color:#ff0000;
        width:600px;
        height:0px;
        visibility:hidden;
        z-index:3
        }
    #over {
        position:absolute;
        left:0px;
        top:300px;
        width:600px;
        text-align:center;
        visibility:hidden;
        z-index:4
        }

If you want, you can play the game demo by clicking the bold link at http://games.pehjota.com.