Solved

Body onUnload and onBeforeUnload

Posted on 2009-05-12
5
2,598 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

864 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