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?

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:

<!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:

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

<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.

<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"> </div>
<div id="innertimebar"> </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:
<!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">

<div id="outertimebar"><div id="innertimebar"></div></div>
<img src="playerhealthbar_pistol.gif" alt="Agent K Stats" class="playerstatsplateimg">

<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>

<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>

<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>

<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>

<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:
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:
/* 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.