Solved

Body onUnload and onBeforeUnload

Posted on 2009-05-12
5
2,593 Views
Last Modified: 2013-12-08
Hi all,
I try to add a waiting page during the processing page.
 But I don't understand why I can't lunch the script in IE with onUnload action (work fine in FF).

 The id is simple, I display the message in each unloading and hide the waiting div in the onload.

I have two mistake :
                                 onUnload                 don't work in IE
                                                                 work fine for FF
                                 onBeforeUnload      work on IE but some action on onclick lunch it too
                                                                 work on FF but I lose the image in background ???

Thanks for your help or suggestions.

                                 

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" onload="setup_box();" onbeforeUnload="show_loadmsg();">
 

setup_box :

if (document.getElementById('pleaseWaitDiv') != null) {document.getElementById(id).style.display = 'none';}
 

show_loadmsg :

	document.getElementById('pleaseWaitDiv').style.display = 'block';

	document.getElementById('loaderHaze').style.height = '4000px';

	document.getElementById('loaderHaze').style.width = '4000px';

	document.getElementById('loaderHaze').style.opacity = '0.7';

	document.getElementById('loaderHaze').style.filter = 'alpha(opacity=70)';	
 

My waiting div :

<div id="pleaseWaitDiv" style="display:none;" >
 

	<div id="loaderHaze" style="position:absolute;top:0px;left:0px;background-color:#chr(35)#FF0000;">

		&nbsp;

	</div>

	<div id="loaderBlock" style="width:410px;height:103px;background-image:url(img/#attributes.loader_img#);background-repeat:no-repeat;position:absolute;top:200px;left:36%;">

		<div id="loaderBlock_part1" style="position:absolute;top:15px;left:0px;text-align:center;width:410px;">

			#attributes.uper_txt#

		</div>

		<div style="width:374px;height:17px;position:absolute;top:44px;left:16px;">

			<img id="loaderBarImage" style="position:absolute;top:0px;left:0px;" alt="" src="img/#attributes.loader#" />

		</div>
 

		<div id="loaderBlock_part2" style="position:absolute;top:75px;left:0px;text-align:center;width:410px;">

			#attributes.lower_txt#

		</div>

	</div>
 

</div>

Open in new window

0
Comment
Question by:boodyguard
  • 3
  • 2
5 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24372724
Please show a complete example (view-source - not template stuff) and tell us what IE you use
0
 
LVL 1

Author Comment

by:boodyguard
ID: 24380031
I have tested IE6 , IE7 and IE8.

Here is the source code of the file, i must hide all content (big public application, dont have the right to publie).
I hope it will help you.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en">

<head>

	

		<script type="text/javascript" language="javascript">

		// initialising the var for WaitingGif function 

var bDoSHSelect = false;

var bDoSHSelect2 = true;
 

function setup_box(id){

	id='pleaseWaitDiv';

	if (document.getElementById('pleaseWaitDiv') != null) {document.getElementById(id).style.display = 'none';}

// hide select object in the page

	if (bDoSHSelect) { shSelTag('show'); }

	document.body.scroll='yes';

}
 

// display the waiting gif

function show_loadmsg(){

	pyd_dl$('pleaseWaitDiv').style.display = 'block';

	pyd_dl$('loaderHaze').style.height = '4000px';

	pyd_dl$('loaderHaze').style.width = '4000px';

	pyd_dl$('loaderHaze').style.opacity = '0.7';

	pyd_dl$('loaderHaze').style.filter = 'alpha(opacity=70)';	

	document.body.style.overflow='hidden';

	document.body.scroll='no';

	if (arguments[0]) {

	pyd_dl$('loaderBlock_part1').innerHTML=arguments[0];

	}

	var loaderDiv = document.getElementById('loaderBlock');

	browserVars.updateVars();

	var lTop = new String(loaderDiv.style.top);

	var x = parseInt(lTop.replace("px","")) + browserVars.scrollTop;

	loaderDiv.style.top = x+"px";

	pyd_dl$('pleaseWaitDiv').style.display = 'block';

	moveLoaderBar();

	if (bDoSHSelect2) { shSelTag('hide'); bDoSHSelect2 = false; }

	return void(0);

}
 
 

			var loaderBarDirection = 0;

			function moveLoaderBar(){

				var leftPos = new String(document.getElementById('loaderBarImage').style.left);

				leftPos.replace("px","");

				leftPos = parseInt(leftPos);

				if(loaderBarDirection==0){

					leftPos = leftPos + 10;

					if(leftPos>310) loaderBarDirection = 1;

				}else{

					leftPos = leftPos - 10;

					if(leftPos==0) loaderBarDirection = 0;

				}

				document.getElementById('loaderBarImage').style.left = leftPos+'px';

				setTimeout("moveLoaderBar()",50);

				return void(0);

			}

 

// Hide all select element in the page for WaitingGif

function shSelTag(act) {

	var sStyle = 'block';

	var i=0;

	var aElms = '';

		if (act == 'show' || act == 'all') { sStyle = 'block'; bDoSHSelect = false; } 

		else { sStyle = 'none'; bDoSHSelect = true; }

		

		aElms = document.getElementsByTagName('select');

		

		//alert('there are currently: '+aElms.length+'to be hidden');

		 

		for (i=0; i < aElms.length; i=i+1) {

			try {

				aElms[i].style.display = sStyle;

				//alert('changed '+i+' '+aElms[i].name+' you asked me to '+act+' all elements.');

			} catch(err) {

				// do nothing about this error, just continue processing 

				// alert('Not changed '+i+' '+aElms[i]+' you asked me to '+act+' all elements.');

			}			

		 }

	return void(0);	

}
 

</script>

				

 
 

</head>

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" onBeforeUnload="show_loadmsg();">

<table width="100%" cellpadding="0" cellspacing="0" border="0" id="Focus">

<tr>

	<td> my content</td>

</tr>

</table>

 

 

<div id="pleaseWaitDiv" style="display:none;" >

 

	<div id="loaderHaze" style="position:absolute;top:0px;left:0px;background-color:#FF0000;">

		&nbsp;

	</div>

	<div id="loaderBlock" style="width:410px;height:103px;background-image:url(img/loaderBackground.gif);background-repeat:no-repeat;position:absolute;top:200px;left:36%;">

		<div id="loaderBlock_part1" style="position:absolute;top:15px;left:0px;text-align:center;width:410px;">

			Please be patient

		</div>

		<div style="width:374px;height:17px;position:absolute;top:44px;left:16px;">

			<img id="loaderBarImage" style="position:absolute;top:0px;left:0px;" alt="" src="img/loader.gif" />

		</div>

 

		<div id="loaderBlock_part2" style="position:absolute;top:75px;left:0px;text-align:center;width:410px;">

			The system is currently busy retrieving the data.

		</div>

	</div>

 

</div>

 

 

 

 

</body>

</html>

 

 

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 24382127
Had to add some things, but still not sure what your issue is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="en">

<head>

        

                <script type="text/javascript" language="javascript">

                // initialising the var for WaitingGif function 

var bDoSHSelect = false;

var bDoSHSelect2 = true;

function pyd_dl$(id) {

  return document.getElementById(id) || null;

} 
 

var browserVars = new Object();

browserVars.updateVars=function() {

  this.scrollTop=100;

  alert('hey')

}

function setup_box(id){

        id='pleaseWaitDiv';

        if (document.getElementById('pleaseWaitDiv') != null) {document.getElementById(id).style.display = 'none';}

// hide select object in the page

        if (bDoSHSelect) { shSelTag('show'); }

        document.body.scroll='yes';

}

 

// display the waiting gif

function show_loadmsg(){

        pyd_dl$('pleaseWaitDiv').style.display = 'block';

        pyd_dl$('loaderHaze').style.height = '4000px';

        pyd_dl$('loaderHaze').style.width = '4000px';

        pyd_dl$('loaderHaze').style.opacity = '0.7';

        pyd_dl$('loaderHaze').style.filter = 'alpha(opacity=70)';       

        document.body.style.overflow='hidden';

        document.body.scroll='no';

        if (arguments[0]) {

        pyd_dl$('loaderBlock_part1').innerHTML=arguments[0];

        }

        var loaderDiv = document.getElementById('loaderBlock');

        browserVars.updateVars();

        var lTop = new String(loaderDiv.style.top);

        var x = parseInt(lTop.replace("px","")) + browserVars.scrollTop;

        loaderDiv.style.top = x+"px";

        pyd_dl$('pleaseWaitDiv').style.display = 'block';

        moveLoaderBar();

        if (bDoSHSelect2) { shSelTag('hide'); bDoSHSelect2 = false; }

        return void(0);

}

 

 

                        var loaderBarDirection = 0;

                        function moveLoaderBar(){

                                var leftPos = new String(document.getElementById('loaderBarImage').style.left);

                                leftPos.replace("px","");

                                leftPos = parseInt(leftPos);

                                if(loaderBarDirection==0){

                                        leftPos = leftPos + 10;

                                        if(leftPos>310) loaderBarDirection = 1;

                                }else{

                                        leftPos = leftPos - 10;

                                        if(leftPos==0) loaderBarDirection = 0;

                                }

                                document.getElementById('loaderBarImage').style.left = leftPos+'px';

                                setTimeout("moveLoaderBar()",50);

                                return void(0);

                        }

 

// Hide all select element in the page for WaitingGif

function shSelTag(act) {

        var sStyle = 'block';

        var i=0;

        var aElms = '';

                if (act == 'show' || act == 'all') { sStyle = 'block'; bDoSHSelect = false; } 

                else { sStyle = 'none'; bDoSHSelect = true; }

                

                aElms = document.getElementsByTagName('select');

                

                //alert('there are currently: '+aElms.length+'to be hidden');

                 

                for (i=0; i < aElms.length; i=i+1) {

                        try {

                                aElms[i].style.display = sStyle;

                                //alert('changed '+i+' '+aElms[i].name+' you asked me to '+act+' all elements.');

                        } catch(err) {

                                // do nothing about this error, just continue processing 

                                // alert('Not changed '+i+' '+aElms[i]+' you asked me to '+act+' all elements.');

                        }                       

                 }

        return void(0); 

}

 

</script>

                                

 

 

</head>

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0" onBeforeUnload="show_loadmsg();">

<table width="100%" cellpadding="0" cellspacing="0" border="0" id="Focus">

<tr>

        <td> my content</td>

</tr>

</table>

 

 

<div id="pleaseWaitDiv" style="display:none;" >

 

        <div id="loaderHaze" style="position:absolute;top:0px;left:0px;background-color:#FF0000;">

                 

        </div>

        <div id="loaderBlock" style="width:410px;height:103px;background-image:url(img/loaderBackground.gif);background-repeat:no-repeat;position:absolute;top:200px;left:36%;">

                <div id="loaderBlock_part1" style="position:absolute;top:15px;left:0px;text-align:center;width:410px;">

                        Please be patient

                </div>

                <div style="width:374px;height:17px;position:absolute;top:44px;left:16px;">

                        <img id="loaderBarImage" style="position:absolute;top:0px;left:0px;" alt="" src="img/loader.gif" />

                </div>

 

                <div id="loaderBlock_part2" style="position:absolute;top:75px;left:0px;text-align:center;width:410px;">

                        The system is currently busy retrieving the data.

                </div>

        </div>

 

</div>

 

 

 

 

</body>

</html>

 

 

Open in new window

0
 
LVL 1

Author Comment

by:boodyguard
ID: 24382757
Thanks for your help mplungian , what I don't understood is that the same source code work with onbeforeunload but not onunload on IE.

And both are working on FF ... I start to be crazzy with this source code.

I think the only solution I have ... is to find a other code for my waiting gif ...
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 125 total points
ID: 24382828
But onUnload you cannot expect the document and its content/javascript vars to be there.
onBeforeUnload you CAN
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now