...

View Full Version : Creating a page loading progress indicator



Gary Williams
10-16-2007, 05:39 PM
Hi All,

In one of my applications, the user completes a search form and posts it to a database. Because of the amount of data returned, it can take upto 15 seconds to load the results page. How do I create a simple progress timer/rotating image that will disappear when the results page is ready to display?

I've searched the forum and found one other thread but couldn't work out what to do.

Regards

Gary

shyam
10-16-2007, 05:47 PM
<html>
<head>
<title>loading...</title>
<script type="text/javascript">
function showContent() {
document.getElementById('loading').style.display = 'none';
document.getElementById('content').style.display = 'display';
}
window.onload = showContent;
</script>
</head>
<body>
<div id="loading"><!-- loading img here --></div>
<div id="content"><!-- main content here --></div>
</body>
</html>

angst
10-16-2007, 07:59 PM
you can grab images from: http://www.ajaxload.info/

also, this isn't an asp question, you should go to the javascript forum for more help.

Gary Williams
10-17-2007, 11:49 AM
Hi Shyam & Angst,

Sorry, forgot to mention that my application is written in asp hence posting it here. Didn't realise the solution maybe javascript.

The solution worked a treat and does it's job but conflicts with another javascript function and displays a javascript error message. The other function hides the div "hiddendiv" when the page loads.

I guess the two scripts need combining?

Also, as I have posted to the wrong forum, how do I transfer this thread?

Regards

Gary

---------------------------------------

<script language="JavaScript">
function showHideContent(id, show)
{
var elem = document.getElementById(id);
if (elem)
{
if (show)
{
elem.style.display = 'block';
elem.style.visibility = 'visible';
}
else
{
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}

function showContent() {
document.getElementById('loading').style.display = 'none';
document.getElementById('contents').style.display = 'display';
}
</script>


<BODY onload="showContent();showHideContent('hiddendiv', false);">



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum