PDA

View Full Version : "Please wait" message while loading page

nassau
2006-05-01, 04:50
i have a form that takes quite a while to process. there's currently not much i can do about the waiting time so i figured i could have a splash div appear while the form is processing.

i want to try to keep it as short and simple as possible codewise, and the display will preferably be a <div> that toggles from 'display: none' in CSS to 'display: block'.

i've been looking around google but all the ones i found had hiccups, so... i'm asking the good people here.

does anyone have a good solution for this? can/should it be done serverside? i'm using php...


thanks :)
Brad
2006-05-05, 21:17
You want to use the JavaScript "onload" event.

Here are a few demonstrations from Google:
http://dev.obliquid.com/manual/onload.html
http://www.porjes.com/idocs/document/_BODY_onLoad.html
http://dean.edwards.name/weblog/2005/09/busted/

So, for example, if you use:

<body onload="doSomething();">

If you have a JavaScript doSomething() method defined, it'll execute once the page has finished loading. In this case, the doSomething() method should toggle the visibility of the div.
nassau
2006-05-06, 02:19
thanks!
:)
Gargoyle
2006-05-07, 03:59
Just to be clear, you want to start with your please wait box already showing, then hide it with onload as Brad suggested.
nassau
2006-05-07, 04:10
thanks. i have it working with another method, but your ideas are well worth saving for a rainy day!

current solution:
the following, when called from an onClick in the submit, will show the "wait" screen and hide a number of other screens, among them the one containing the submit button.
// splash screen while waiting for results
function resource_WaitSplash(){
// display wait screen
document.getElementById('resource_WaitSplash').sty le.display = 'block';

// hide order screens
//document.getElementById('display_Main').style.disp lay = 'none';
document.getElementById('resource_Step').style.dis play = 'none';
document.getElementById('resource_SearchSingleItem ').style.display = 'none';
document.getElementById('resource_SearchResults'). style.display = 'none';
document.getElementById('resource_SearchCategory') .style.display = 'none';
document.getElementById('resource_OrderSummary').s tyle.display = 'none';
document.getElementById('resource_Discount').style .display = 'none';
document.getElementById('resource_CostSummary').st yle.display = 'none';

}