Help: Hiding and showing table on page load

pharma

06-12-2004, 12:03 PM

Ok lets start.

Im working on a page that has this "loading effect." As the page loads, the content of the page is hidden and there is this text/image that is visible to say to the viewer that the page is still loading. The image/text will disappear as page completely loads everything, and the content will be visible.

This effect is easy to code but my problem is... I can only add javascripts and css to the template. I could not insert any layer ID or even modify any tag within the template. So, I need to work on the Javascript and CSS to be inserted so that I could modify the looks and effects of the page.

Here is what I did...

Since the entire page is inside one table... this is what I did.
<STYLE type=text/css>
table, td {
background-color: transparent;
display: none
}
</STYLE>
Nevermind the background-color... lets concentrate on the topic. I made the table unseen by default so that as the visitor enters the page... he/she could see nothing.

Then I added this script for the loading effect...

<script language="JavaScript">
function load(){
hide('ld')
}

function show(name){
document.all[name].style.visibility='visible'}
function hide(name){
document.all[name].style.visibility='hidden'}

window.onload = load;
</script>

<div id="ld" style="visibility: visible">LOADING.. please wait.</div>

So, my problem is... how to make the table to show again as the page loads? Since I made the table property into hidden using CSS.... how could I make it visible again using JS so that I could include it with the load function?

Thank you in advance! :thumbsup:

Willy Duitt

06-12-2004, 04:47 PM

Try using: <body onload="show(name)"....

pharma

06-12-2004, 05:58 PM

No, you're not getting me.

Ive got no problem with the onload thing. If you will take a look with my codes, what I am asking is how to make the table visible again using JS. I made the table hidden using CSS and now, I want to make it appear using JS without using any ID.

Another thing. I could not change the tags/codes in the page. All I can do is add more.... so changing the BODY tag is impossible.

Willy Duitt

06-12-2004, 06:59 PM

No, I would say that you are not getting me. You are hiding the table on window onload and you need to fire your show function after your page has loaded. The easiest way to do that is with body.onload....

If you can not change any of the page codes, I would say you have other problems, like the page you are waiting to load doesn't belong to you. Either way, you havent provided enough code to adequately describe your problem.

Besides, your use of document.all is IE proprietary and therefore not cross-browser compatable.

pharma

06-13-2004, 06:06 AM

What Im hiding on the window onload is the "loading... please wait" text. As I hide that text.. I want the entire content in the hidden table to show up.

So... It should be something like this...

function load(){
hide('ld')
show('table ID here')
}

But then, the table im referring to does not have any ID. So Im only just relying on the CSS for the table property.

What should I do about that cross-browser thing?

Anyway, does the body.onload works? Hehe.. coz I learned from a tutorial that I should use the window.onload

Willy Duitt

06-13-2004, 08:37 AM

You can get to the table thru the DOM without using an ID but you still have not provided your codes which include the table so someone can see what you are doing. And quite frankly, so far it doesn't make sense to me. However, here is an example of using the DOM to get to the table.

<BASE HREF="http://strangebutuntrue.tripod.com/images/">

<style type="text/css">

</style>

<script type="text/javascript">

</script>
</head>

<body>
<table><tr><td>
<img src="monkey.gif" onload="show()">
</td></tr></table>

Good Luck....

pharma

06-13-2004, 04:24 PM

Ok... let me clear everything out..

Here is the complete code...

<script language="JavaScript">
function load(){
hide('ld')
}

function show(name){
document.all[name].style.visibility='visible'}
function hide(name){
document.all[name].style.visibility='hidden'}

window.onload = load;
</script>

<div id="ld" style="visibility: visible">LOADING.. please wait.</div>

<STYLE type=text/css>
table, td {
background-color: transparent;
display: none
}
</STYLE>

<body>
<table>
<tr><td>Hello! I am pharma, a codingforum poster.</td></tr>
</table>

So, as you could see.. the content of the table is not really relevant in my question.

But then, I think this is the code I'm looking for...

<script type="text/javascript">

</script>

Ill go try it out. Thanks!

Willy Duitt

06-13-2004, 10:19 PM

So, my problem is... how to make the table to show again as the page loads? Since I made the table property into hidden using CSS.... how could I make it visible again using JS so that I could include it with the load function?

So, as you could see.. the content of the table is not really relevant in my question.

Ok, if you say so. But if I had to bet the farm, I would bet you are trying to load someone elses page into your document and trying to hide everything but a certain table. Which of course is moraly wrong.