Help with style.display [Archive]

Whoever

02-12-2003, 04:01 PM

Is it possible to on the fly hide and show tables?

Here is what I am trying to do:
I have a php script building a web page from a database. This can take a while to happen depending on the user's request.

So, I have 2 tables. 1 looks like this:

<TABLE ID="tblPleaseWait" width=100%>
<tr>
<td align=center>
<img border=0 src='images/pleasewait.gif'></img>
</td>
</tr>
</TABLE>

That is the one that is displayed as the web page appears initially. It's an animated gif.

Then I have the main table which has the main body of it built via the script. Starts off looking like this:

<TABLE ID="tblMain" WIDTH=100% STYLE="DISPLAY:NONE">
<TR VALIGN=TOP>
<TD ALIGN=CENTER>
.
.
.

The <Body> tag has an onload running a Javascript function that looks like this:

<SCRIPT LANGUAGE="JavaScript">
function AllLoaded()
{
tblPleaseWait.Style.Display='NONE';
tblMain.Style.Display='';
}
</SCRIPT>

Ok, so I have tried doing this function all ways I can think of to hide the tblPleaseWait, and show the tblMain. What am I doing wrong here? I want to keep the html looking like it does. I don't want to do a bunch of CSS coding block or anything if I can avoid it. I seem to be missing something in the function that tells JavaScript what the object is. Thanks for any help...

gil davis

02-12-2003, 04:23 PM

Originally posted by Whoever
<SCRIPT LANGUAGE="JavaScript">
function AllLoaded()
{
tblPleaseWait.Style.Display='NONE';
tblMain.Style.Display='';
}
</SCRIPT>Try this:

<SCRIPT>
function AllLoaded() {
document.getElementById("tblPleaseWait").style.display="none";
document.getElementById("tblMain").style.display="block";
}
</SCRIPT>

Especially notice the case of the styles. If "block" doesn't work, try "inline".