Can't get cell to shrink to zero

J

Jammer

I have a simple HTML table that I want to use as a progress bar - by
changing the width of the two TD elements with javascript, you show
progress. The problem is that when I change the width to 100 and 0
resp., you still see a sliver of white for the right cell... any way
to do this, it's drivin me nuts! I tried also changing the back color
of the right cell to blue when it hits 100, but it only works in
Mozilla/Firefox, not IE. Plz help?? :)

<html>
<head></head>
<body>

<table width="250" cellpadding="0" cellspacing="0" hspace="0"
vspace="0" height=20>
<tr>
<td width=20% bgcolor=blue id="leftCell" style="border-top: 1px
solid;
border-bottom: 1px solid;border-left: 1px solid;">
&nbsp;
</td>

<td width=80% bgcolor=white id="rightCell" style="border-top: 1px
solid;
border-bottom: 1px solid;border-right: 1px solid;">
&nbsp;
</td>
</tr>
</table>

<SCRIPT>
document.getElementById("leftCell").width="100%";
document.getElementById("rightCell").width="0%";
//document.getElementById("rightCell").style.backgroundColor =
"green";
</SCRIPT>

</body>
</html>
 
M

MikeB

This is not how you are doing it, but it may give you an idea for a workaround (The Timer is merely to
demo the progress):
<html>
<HEAD>
<TITLE>This is the Application Caption</TITLE>
<HTA:APPLICATION ID="oApp"
APPLICATIONNAME="Splash Screen"
BORDER="thick"
MAXIMIZEBUTTON="yes"
MINIMIZEBUTTON="yes"
CAPTION="YES"
ICON="C:\Program Files\RBTI\RBG7\Samples\Icons\win1.ico"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="yes"
WINDOWSTATE="normal">
<SCRIPT>
var cntr = 0;
var ID = 0;
function UpdateTimer()
{
cntr = cntr - 5000;
}
function UpdateProg()
{
//debugger;
//var IDtx;
if (ID <= 9)
{
document.getElementById('C' + ID.toString()).bgColor="blue";
}
//IDtx.bgcolor=blue;
ID++;
cntr = cntr-5000;
}
function init()
{
cntr = 30000;
UpdateProg();
var UpdateTime = window.setInterval('UpdateProg()',1000);
return;
}
function Terminate()
{
window.clearTimeout();
// window.close();
}
</SCRIPT>
</HEAD>

<body onload="init(); return false;" onUnload="Terminate(); return false;">
<table width="100%" cellpadding="0" cellspacing="0" hspace="0" vspace="0" height=20>
<tr>
<td width="10%" bgcolor=white id="C0"></td>
<td width="10%" bgcolor=white id="C1"></td>
<td width="10%" bgcolor=white id="C2"></td>
<td width="10%" bgcolor=white id="C3"></td>
<td width="10%" bgcolor=white id="C4"></td>
<td width="10%" bgcolor=white id="C5"></td>
<td width="10%" bgcolor=white id="C6"></td>
<td width="10%" bgcolor=white id="C7"></td>
<td width="10%" bgcolor=white id="C8"></td>
<td width="10%" bgcolor=white id="C9"></td>
</tr>
</table>
</body>
 
J

Jammer

Hmm... cool, thanks for the response! I was really hoping to get a
version like mine working because I really like the smooth scrolling
of it if I update every percentage... I suppose I could just make 100
increments... :)
 
M

MikeB

Jammer said:
Hmm... cool, thanks for the response! I was really hoping to get a
version like mine working because I really like the smooth scrolling
of it if I update every percentage... I suppose I could just make 100

Yes. The 10 was just to demonstrate. Further, you could create them at runtime during body onload....
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top