469,626 Members | 1,062 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,626 developers. It's quick & easy.

Can't get cell to shrink to zero

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.backgro undColor =
"green";
</SCRIPT>

</body>
</html>
Jul 23 '05 #1
3 1205
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>
</html>
"Jammer" <jk***@fundy.net> wrote in message news:7d**************************@posting.google.c om...
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.backgro undColor =
"green";
</SCRIPT>

</body>
</html>

Jul 23 '05 #2
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... :)
Jul 23 '05 #3

"Jammer" <jk***@fundy.net> wrote in message news:7d**************************@posting.google.c om...
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....

increments... :)

Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

14 posts views Thread by Zenobia | last post: by
1 post views Thread by Jon S via DotNetMonster.com | last post: by
4 posts views Thread by axlq | last post: by
reply views Thread by bemanian | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.