I have noticed that on some websites they have a page display that says, "please wait while page loads" and then it shows the complete page when loaded loaded. This makes the images apear at once, and the user knows that the page is loading. I was wondering how you could program this in javascript so that when all of my scripts and graphics are done, it displays the rest of the page page??? I don't want to target another page, I want this all to be done on the same html page. I was thinking of maybe showing a div with the page loading and then hiding it and displaying the rest of the page when it has finished processing, do you have any ideas for a function?? or do you know of any pages with this so that i can check out how they do it????
Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Page Caching/Loading 1
- Thread starter StylnR6
- Start date
-
1
- #2
I've tried this using NN4 and IE5 and it seems to work (although it will only be apparent on pages which are slow to load). The DLOAD layer appears initially, but is replaced with the DMAIN layer (containing your page) once everything has been loaded :-
Insert this in the <HEAD> section:-
<SCRIPT language="Javascript">
<!--
function swapDivs () {
if (document.layers) {
document.DLOAD.visibility = 'hide';
document.DMAIN.visibility = 'show';
}
if (document.all) {
document.all.DLOAD.style.visibility = 'hidden';
document.all.DMAIN.style.visibility = 'visible';
}
}
//-->
</SCRIPT>
Then add the onLoad event to the <BODY> tag:-
<BODY onLoad='swapDivs();'.............>
Then within the <BODY> section :-
<DIV id='DLOAD' style="position:absolute; left:10; top:110; width:100%; height:100; visibility:visible;">
<CENTER>
<h1>Please wait - Page Loading</h1>
</CENTER>
</DIV>
<DIV id='DMAIN' style="position:absolute; left:10; top:10; visibility:hidden;">
Your HTML here.................
</DIV>
</BODY>
</HTML>
Enjoy
Insert this in the <HEAD> section:-
<SCRIPT language="Javascript">
<!--
function swapDivs () {
if (document.layers) {
document.DLOAD.visibility = 'hide';
document.DMAIN.visibility = 'show';
}
if (document.all) {
document.all.DLOAD.style.visibility = 'hidden';
document.all.DMAIN.style.visibility = 'visible';
}
}
//-->
</SCRIPT>
Then add the onLoad event to the <BODY> tag:-
<BODY onLoad='swapDivs();'.............>
Then within the <BODY> section :-
<DIV id='DLOAD' style="position:absolute; left:10; top:110; width:100%; height:100; visibility:visible;">
<CENTER>
<h1>Please wait - Page Loading</h1>
</CENTER>
</DIV>
<DIV id='DMAIN' style="position:absolute; left:10; top:10; visibility:hidden;">
Your HTML here.................
</DIV>
</BODY>
</HTML>
Enjoy
Thanks fatbloke for the fine tip.
I'd suggest a slight improvement (tested on IE4+, doesn't seem to work on my NN4, somebody knows why ?) :
SCRIPT language="Javascript">
<!--
function swapDivs () {
if (document.layers) {
document.body.visibility = 'show';
document.DLOAD.visibility = 'hide';
} ;
if (document.all) {
document.body.style.visibility = 'visible';
document.all.DLOAD.style.visibility = 'hidden';
} ;
}
//-->
</SCRIPT>
(note the impoortance of the body line before the DLOAD line)
...and :
<body onLoad="swapDivs();" style="visibility:hidden;">
instead of :
---quote start---
<DIV id='DMAIN' style="position:absolute; left:10; top:10; visibility:hidden;">
Your HTML here.................
</DIV>
---quote end---
This way, you don't have to define a DMAIN span (useful for me on FrontPage98 with top borders).
I'd suggest a slight improvement (tested on IE4+, doesn't seem to work on my NN4, somebody knows why ?) :
SCRIPT language="Javascript">
<!--
function swapDivs () {
if (document.layers) {
document.body.visibility = 'show';
document.DLOAD.visibility = 'hide';
} ;
if (document.all) {
document.body.style.visibility = 'visible';
document.all.DLOAD.style.visibility = 'hidden';
} ;
}
//-->
</SCRIPT>
(note the impoortance of the body line before the DLOAD line)
...and :
<body onLoad="swapDivs();" style="visibility:hidden;">
instead of :
---quote start---
<DIV id='DMAIN' style="position:absolute; left:10; top:10; visibility:hidden;">
Your HTML here.................
</DIV>
---quote end---
This way, you don't have to define a DMAIN span (useful for me on FrontPage98 with top borders).
Sure, what you point doesn't work (the body is always visible).
But I meant that somewhere in
---begin quote---
if (document.layers) {
document.body.visibility = 'show';
document.DLOAD.visibility = 'hide';
} ;
---end quote---
there's something wrong for NN, because the DLOAD DIV doesn't hide.
But I meant that somewhere in
---begin quote---
if (document.layers) {
document.body.visibility = 'show';
document.DLOAD.visibility = 'hide';
} ;
---end quote---
there's something wrong for NN, because the DLOAD DIV doesn't hide.
yes, in devedge it appears that "window" is the object created with the <BODY> tag
therefore i guess the syntax to refer to the "document.body" is actually "window"
and yes, as soon as there is an error in the script, whatever the browser, it stops !
therefore i guess the syntax to refer to the "document.body" is actually "window"
and yes, as soon as there is an error in the script, whatever the browser, it stops !
I doubt NS4 treats the window, the document, or the body like a layer as IE does. So, I would create an artificial body layer if that is what you wanted to do.
But, why not just define it like this:
<BODY onLoad='swapDivs()'>
<DIV id='DLOAD' style="position:absolute; left:0; top:0; width:100%; height:100%; visibility:visible; z-index:1000;">
<table width="100%" height="100%" align="center" valign="center"><tr><td align="center" valign="center">
<h1>Please wait - Page Loading</h1>
</td></tr></table>
</DIV>
<SCRIPT language="Javascript">
<!--
function swapDivs () {
if (document.layers) {
document.layers.DLOAD.zIndex = 0;
(or visibility='hide')
}
if (document.all) {
document.all.DLOAD.style.zIndex = 0;
(or visibility='hidden')
}
}
//-->
</SCRIPT>
The point is -- why bother with two layers. Just put your loading layer on top of the rest of the page.
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
But, why not just define it like this:
<BODY onLoad='swapDivs()'>
<DIV id='DLOAD' style="position:absolute; left:0; top:0; width:100%; height:100%; visibility:visible; z-index:1000;">
<table width="100%" height="100%" align="center" valign="center"><tr><td align="center" valign="center">
<h1>Please wait - Page Loading</h1>
</td></tr></table>
</DIV>
<SCRIPT language="Javascript">
<!--
function swapDivs () {
if (document.layers) {
document.layers.DLOAD.zIndex = 0;
(or visibility='hide')
}
if (document.all) {
document.all.DLOAD.style.zIndex = 0;
(or visibility='hidden')
}
}
//-->
</SCRIPT>
The point is -- why bother with two layers. Just put your loading layer on top of the rest of the page.
Sincerely,
Tom Anderson
CEO, Order amid Chaos, Inc.
This does work (thanks all !) :
<script language="Javascript">
<!--
function swapDivs () {
if (document.layers) {
window.visibility = 'show';
document.layers["DLOAD"].visibility = 'hide';
} ;
if (document.all) {
document.body.style.visibility = 'visible';
document.all.DLOAD.style.visibility = 'hidden';
} ;
}
//-->
At least, when I say it works, I mean that :
a. it produces no error, even in NN, so the DLOAD layer does get hidden ;
b. but the body is *always* visible in NN4, for it doesn't implement the hidden in <body onLoad="swapDivs();" style="visibility:hidden;">
Maybe <body onLoad="swapDivs();" style="visibility:hide;"> would do ? But how about IE then ?
<script language="Javascript">
<!--
function swapDivs () {
if (document.layers) {
window.visibility = 'show';
document.layers["DLOAD"].visibility = 'hide';
} ;
if (document.all) {
document.body.style.visibility = 'visible';
document.all.DLOAD.style.visibility = 'hidden';
} ;
}
//-->
At least, when I say it works, I mean that :
a. it produces no error, even in NN, so the DLOAD layer does get hidden ;
b. but the body is *always* visible in NN4, for it doesn't implement the hidden in <body onLoad="swapDivs();" style="visibility:hidden;">
Maybe <body onLoad="swapDivs();" style="visibility:hide;"> would do ? But how about IE then ?
Hi, got a problem where I must jump from an input page to an output page (jsps). Problem is that input has a hidden field and some cookie code, along with a Submit button. I cannot change this logic! Told that there is a way of automtically jumping from page to page.
Input page code is below:
<HTML>
<%@ content_type="text/html;charset=ISO-8859-1" %>
<BODY>
<FORM METHOD="POST" ACTION="<%= response.encodeUrl("Output.jsp" %>">
<%
//String id = request.getHeader("Cookie"
String Cookie_Name;
String Cookie_Value;
String id = "";
Cookie[] cookies = request.getCookies();
if (null != cookies){
for (int i=0; i < cookies.length;i++){
Cookie_Name = cookies.getName();
Cookie_Value = cookies.getValue();
if (Cookie_Name.indexOf("userid" != -1){
id = Cookie_Value;
}
}
}
%>
<P><INPUT TYPE ="hidden" NAME="id" SIZE="6" VALUE="'<%=id %>'">
<P><INPUT TYPE="submit" VALUE="Submit">
</FORM>
</BODY>
<% out.close(); %>
</HTML>
any ideas. Thanks
Input page code is below:
<HTML>
<%@ content_type="text/html;charset=ISO-8859-1" %>
<BODY>
<FORM METHOD="POST" ACTION="<%= response.encodeUrl("Output.jsp"
%>"><%
//String id = request.getHeader("Cookie"
;String Cookie_Name;
String Cookie_Value;
String id = "";
Cookie[] cookies = request.getCookies();
if (null != cookies){
for (int i=0; i < cookies.length;i++){
Cookie_Name = cookies.getName();
Cookie_Value = cookies.getValue();
if (Cookie_Name.indexOf("userid"
!= -1){id = Cookie_Value;
}
}
}
%>
<P><INPUT TYPE ="hidden" NAME="id" SIZE="6" VALUE="'<%=id %>'">
<P><INPUT TYPE="submit" VALUE="Submit">
</FORM>
</BODY>
<% out.close(); %>
</HTML>
any ideas. Thanks
hi iza....problem is client doesn't want this page to appear. its redundant on the front end but must be processed on the back end (its a host integration piece). back end app has a screen with 1 field on it (a dealer code) which, when keyed, leads to a detail screen. at the front end they've used the cookie code to obtain the dealer code (crazy init?). they've mapped the back end process and have to mirror it in order to run the front end! its one-step ahead of "screen-scraping"....
lividpixel
Programmer
I have a situation where this solution wouldn't work since I have to wait for the file to be returned by the server performing a search. In my case it doesn't take a long time for the page to display rather a long time for the search to complete. Is there anyway to bump the user to a seperate page that says "Loading" and then when the server completes the search, bring the user to the search results. I think expedia.com does something like this. I just can't figure out how.
- Status