...

View Full Version : Changing Width of an Element Using a Variable



thesmart1
01-08-2007, 09:15 PM
Is it possible to change the width of an element to the value of a variable using the getElementById method? If so, how?

david_kw
01-09-2007, 02:25 AM
You mean a CSS width? Like

<div id="adiv" style="position:absolute; width:400;">Hi</div>

then

var newWidth = 200;
document.getElementById("adiv").style.width = newWidth + "px";

david_kw

thesmart1
01-09-2007, 02:51 AM
Whoa, what happened to bostjank's reply and then my reply after that? Well, anyway, yeah I got that, thanks, but I'm trying to make a decreasing progress bar but it's not working. And I found the page with the previous posts in my closed tabs list (in FF), so here it is (including the description of what I need now and what is happening):



Is this what you need?


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



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.

david_kw
01-09-2007, 03:02 AM
Looks like you have two threads going

104578

thesmart1
01-09-2007, 03:15 AM
Huh... Oops. Well, I guess we'll move to the other thread, and if no one else replies to this one, or if a moderator deletes it, it'll disappear from the first page or the entire forum. So here again is the link to the other thread:

http://www.codingforums.com/showthread.php?t=104578



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum