Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Changing Width of an Element Using a Variable

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

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    The sunny side of the Alps
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is this what you need?
    Code:
    function changeWidth(controlID,myWidth) {
    	document.getElementById(controlID).style.width = myWidth + "px";
    }

  • #3
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Location
    The sunny side of the Alps
    Posts
    230
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #5
    Senior Coder
    Join Date
    Nov 2006
    Posts
    1,000
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 &nbsp; 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
    Last edited by david_kw; 01-09-2007 at 04:27 PM. Reason: minor change

  • #6
    Regular Coder thesmart1's Avatar
    Join Date
    Dec 2005
    Posts
    369
    Thanks
    7
    Thanked 3 Times in 3 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •