loading page prompt before page content

**gits** · Jan 2 '08, 03:04 PM

hi ....

welcome to theScripts ...

why don't you want to use ajax? :) ... anyway ... you could make a page with two iframes ... one shows your loading-indicator the other loads the content-page. the second iframe should have style="display: none" at first ... so it is hidden. after your given time (you may use window.setTimeo ut() here) you hide the loading-indicator-frame and show the content-iframe with style="display: block" ...

kind regards

**acoder** · Jan 2 '08, 07:21 PM

You can use something like this to get you started replacing the body onload overlay call with setTimeout.

**neuraljay** · Jan 3 '08, 08:34 AM

div id

thanks for the reply however i can't seem to get it to work.. here's my code:

[HTML]<head>
<title><fmt:mes sage key="study.view DataResult"/></title>

<script type ="text/javascript">
function overlay() {
elem = document.getEml ementbyId("data ");
elem.style.visi bility="hidden" ;
elem = document.getEle mentById("load" );
elem.style.visi bility ="visible";
}
</script>

</head>

<body>
<body onload="overlay ()">
<c:set var="showTopLin ks" value="0" scope="session"/>
<c:set var="showBg" value="0" scope="session"/>
<table width="100%">

<tr>
<td>
<font class="welcomeT ext">
<fmt:message key="study.view Data.Result"/> <c:out value="${study. name}"/>
</font>
</td>
</tr>

<!-- Page Loading Image -- >

<div id ="load">
<tr>
<td align="center">
<img src="<c:url value='images/test/loading.gif'/>"/>
</tr>
</div>

<div id="data" style="visibili ty:hidden;"> Contents here are being retrieve from a database </div>[/HTML]

what happens was, when i completely change content of the div id= data to a plain txt, let say <h3>Sample</h3>, it will work but with the actual content, it wont hide it. which in fact I made sure that it is properly structure in the div id= data...

what I wanted to do is have an image show for a period of time while waiting for the content to load completely. do you have any other suggestions to what js technique can I use to get this done? on top of AJAX?

thanks so much

**acoder** · Jan 3 '08, 09:47 AM

Originally posted by neuraljay

what I wanted to do is have an image show for a period of time while waiting for the content to load completely. do you have any other suggestions to what js technique can I use to get this done? on top of AJAX?

There are some mistakes in the code, but before dealing with that, do you want this image to hide as soon as the page has loaded or after a fixed number of seconds? Does the page take a long time to load?

**neuraljay** · Jan 3 '08, 09:59 AM

Originally posted by acoder

There are some mistakes in the code, but before dealing with that, do you want this image to hide as soon as the page has loaded or after a fixed number of seconds? Does the page take a long time to load?

as soon as the page content got loaded... Please correct the mistake in the code,, Appreciate it

**acoder** · Jan 3 '08, 11:58 AM

On line 6, it should be elem = document.getEle mentById("data" ).

You have two body tags. Remove the first one.

**neuraljay** · Jan 4 '08, 08:23 AM

helo again. Thanks for the reply. I have another one inline with the loading.gif. Now that I was able to get it working, the problem now lies to when will the loading.gif go away? Basically how will I tell the loading.gif that data has been loaded and ready for display.. Data are coming from the dataserver? Any idea will be appreciated.

Thanks...

**acoder** · Jan 4 '08, 12:02 PM

The loading image should not be part of the table. You shouldn't have a div nested in a table anyway. Move the div (containing the image) outside the table. This div should cover the whole screen - it doesn't have to, but it makes sense. To do this, set the width and height to 100% and position to "absolute". This ensures that it doesn't affect the page flow, so when it's hidden, it just disappears and the rest of the page appears.

**neuraljay** · Jan 7 '08, 03:12 AM

Originally posted by acoder

The loading image should not be part of the table. You shouldn't have a div nested in a table anyway. Move the div (containing the image) outside the table. This div should cover the whole screen - it doesn't have to, but it makes sense. To do this, set the width and height to 100% and position to "absolute". This ensures that it doesn't affect the page flow, so when it's hidden, it just disappears and the rest of the page appears.

hi again. is it possible to show a div when during page load it is set to hidden? how do I go about doing that using javascript? Now since Example: div id 1 - visible then there is an if statement that- if recordcount>1 then div 2 will show and div 1 will be hidden. I am trying to do something like this but no luck..
Please help...

**acoder** · Jan 7 '08, 08:44 AM

You will have to do this via the server-side code during page load. Show div 1 to begin with, then when the record count is greater than 1, add some JavaScript to the page which hides the first div and shows the second one.

**neuraljay** · Jan 8 '08, 04:58 AM

Originally posted by acoder

You will have to do this via the server-side code during page load. Show div 1 to begin with, then when the record count is greater than 1, add some JavaScript to the page which hides the first div and shows the second one.

i'm stuck.. i can't seem to get it to work. i need to disregard body onload action.. so i am now jumping into using prototype? any suggestion to where can I get a tutorial for this? i am totally a beginner in this..

thanks

**acoder** · Jan 8 '08, 08:56 AM

Originally posted by neuraljay

hi again. is it possible to show a div when during page load it is set to hidden? how do I go about doing that using javascript? Now since Example: div id 1 - visible then there is an if statement that- if recordcount>1 then div 2 will show and div 1 will be hidden. I am trying to do something like this but no luck..
Please help...

This seems to contradict what you wanted earlier.

Can you explain exactly what you require in detail step-by-step. Thanks.

**neuraljay** · Jan 9 '08, 11:17 AM

Originally posted by acoder

This seems to contradict what you wanted earlier.

Can you explain exactly what you require in detail step-by-step. Thanks.

Sorry for the confusion. I was able to get it to work with prototype/ajax. Now the question is, how can I center the loading.gif in the page using javascript? in laymans term..

**acoder** · Jan 9 '08, 02:12 PM

Originally posted by neuraljay

Sorry for the confusion. I was able to get it to work with prototype/ajax.

Ajax it was in the end, eh? Can you post your working code for the benefit of anyone else viewing this thread? Thanks.

Originally posted by neuraljay

Now the question is, how can I center the loading.gif in the page using javascript? in laymans term..

You don't necessarily need JavaScript if you get the CSS style properties right, but if you want to use JavaScript, see if this article helps.

loading page prompt before page content

loading page prompt before page content

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment