Member Avatar for dangari

Hi all.I have been using a certain javascript code to display a "Please wait..." message on screen but it seems to work in some instances and not in others.Please assist me with javascript code that works in all instances Below is the code I currently use.
In the head tags I have:

<script type="text/javascript">

<!-- Begin
function hideLoading() {
	document.getElementById('pageIsLoading').style.display = 'none'; // DOM3 (IE5, NS6) only
}
//  End -->
</script>

Right after the <body> tag I have:

<div id="pageIsLoading" style="position: absolute; display: block; padding-left: 50px; padding-right: 12px; width: auto; height: 65px; line-height: 40px; border: 1px solid #CCCCCC; color: #000000; font-weight: bold; font-family: verdana; font-size: 12px; background-color: #ffffff; background-image: url(http://localhost:8080/images/bannerz.jpg); background-position: 100px center; background-repeat: no-repeat;">
	<script type="text/javascript">
	var window_width;
	var window_height;
	if( typeof( window.innerWidth ) == 'number' ) {
	  window_width = window.innerWidth;
	  window_height = window.innerHeight;
	} else if( document.documentElement &&( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
	  window_width = document.documentElement.clientWidth;
	  window_height = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
	  window_width = document.body.clientWidth;
	  window_height = document.body.clientHeight;
	}
	var left = Math.round((window_width - 240) / 2);
	var top = Math.round(((window_height - 130) / 3) + 30);
	document.getElementById('pageIsLoading').style.left = left+'px';
	document.getElementById('pageIsLoading').style.top = top+'px';
    </script><p><p><p><p>
    Loading page..Please wait...
</div>

Before </body> tag I have this:

<script type="text/javascript">
if (window.addEventListener) {
	window.addEventListener('load', hideLoading, false);
} else if (window.attachEvent)  {
	var r = window.attachEvent("onload", hideLoading);
} else  {
	hideLoading();
}
</script>

Thanks!

  • 2 Contributors
  • 1 Reply
  • 2K Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by harshal82
Member Avatar for harshal82

Use the below two jsp pages to get please wait effect.
PleaseWait.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body onLoad="do_totals2()">
<script language="javascript">
	function submitForm(oForm) {
		dototals1();
		oForm.submit();
	//	return true;
	}
	function do_totals1() {
		document.all.pleasewaitScreen.style.pixelTop = (document.body.scrollTop + 50);
		document.all.pleasewaitScreen.style.visibility = "visible";
	//	window.setTimeout('do_totals2()');
	}
	function do_totals2() {
		document.all.pleasewaitScreen.style.visibility = "hidden";
	}
	function lengthy_calculation() {
		while(true) {
		}
	}
</script>
<DIV ID="pleasewaitScreen"
	STYLE="position: absolute; z-index: 5; top: 30%; left: 42%; visibility: hidden">

<TABLE BGCOLOR="#000000" BORDER="1" BORDERCOLOR="#000000"
	CELLPADDING="0" CELLSPACING="0" HEIGHT="100" WIDTH="150" ID="Table1">
	<TR>
		<TD WIDTH="100%" HEIGHT="100%" BGCOLOR="silver" ALIGN="CENTER"
			VALIGN="MIDDLE"><img src="progress.gif"></TD>
		<!-- <TD WIDTH="100%" HEIGHT="100%" BGCOLOR="silver" ALIGN="CENTER"
			VALIGN="MIDDLE"><FONT FACE="Arial" SIZE="4" COLOR="blue"><B>Calculating<br>
		Please Wait</B></FONT></TD>  -->
	</TR>
</TABLE>
</DIV>

<P align="center">"Please Wait" messages are an excellent way to let
the user know that your web based application is performing some action,
such as loading a page or processing data. Without such a notification,
users may begin clicking other controls on the web page, or close the
browser due to the excessive delays.</P>

<p align="center">Pressing the button below will simulate a lengthy
function or calculation. While the function is calculating, a "Please
Wait" message will be displayed. This is done using a DIV area. When the
function begins the DIV area is shown and when the function ends, the
DIV area is hidden.</p>

</p>

<form action="Second.jsp" method="post" onSubmit="do_totals1()">
<p align="center"><input type="submit" name="btn_calc"
	value="Perform Calculation" ;></p>
</form>
<!-- 
<p align="center"><input type="button" name="btn_calc"
	value="Perform Calculation" onsubmit=
	do_totals1();
></p>
 -->


<p>
<center><font face="arial, helvetica"size"-2">Free
JavaScripts provided<br>

by <a href="http://javascriptsource.com">The JavaScript Source</a></font></center>
<p>
</body>
</html>

Second.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%Thread.sleep(11000); %>
<jsp:forward page="PleaseWait.jsp"/>
Reached here
</body>
</html>
Edited by nav33n because: Please wrap your code in [code][/code] tags for easy readability.
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.