Jump to content

Recommended Posts

I have a prepage section of processing in my PHP script as follows:

 

<BODY>
<div id="prepage" style="height:100%;width:100%;z-index:500;text-align:center !important;position:absolute;font-family:Verdana;font-size:11px;left:0px;top:0px;background-color:White;layer-background-color:White"> 
<center>
<img src="image.gif" style="margin:200px 0 0 0px" /><br />
<span style="font-size:14px;font-weight:bold">Please wait...</span>
</center>
</div>

 

There is some Javascript earlier that processes the prepage:

 

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function clearPreloadPage() 
{ //DOM
	if (document.getElementById)
	{
		document.getElementById('prepage').style.visibility='hidden';
	}
	else
	{
		if (document.layers)
		{ //NS4
			document.prepage.visibility = 'hidden';
		}
		else 
		{ //IE4
			document.all.prepage.style.visibility = 'hidden';
		}
	}
}

 

The problem is, that within the same PHP script, I have the core part of the HTML that I want to display AFTER the page has loaded.  It so happens that this includes a code segment:

 

<select name="servcountry" id="servcountry" style="width:230px;margin:0px" onChange="requestLinks()">
							<?
							foreach ($countries as $key => $value)
							{
								if ($key==$country) { echo '<option value="'.$key.'" selected>'.$value.'</option>'; } 
								else { echo '<option value="'.$key.'">'.$value.'</option>';} 
							}
							?>
						</select>

 

This displays a drop down box, where the user can select the country.

 

My problem is, that this drop down box displays right next to the 'Please wait...' message (and corresponding image, image.gif) immediately when the page loads.

 

So I see Please wait.. , image, and this drop down box.

 

I dont want to see this drop down box while the 'Please wait..' message is displayed, as this should only be processed after the form has loaded.

 

Does anyone know if there is something I can do to prevent this other section of the HTML (separate from the div section for prepage) from being processed/displayed until the form has fully loaded?

 

There are other HTML elements too, but these dont get displayed until the form has fully loaded.

Why don't you use redirect instead? You could google php/html redirect and find lots of examples.

 

If you want to be on the same page, like all those fancy sites, use AJAX, not php.

 

As far as I know, php couldn't do that directly. You could try to manipulate it, but it will be more difficult than copy paste the AJAX code.

This principle is pretty much working on another page, so I dont really want to change the technology or the way that I go about this.

 

Its just a particular quirk where the drop down box is being displayed, and I dont want it to be.

I am just looking for any hints/tips to try out, to see if the problem can be solved.

I have simplified my code to demonstrate the example (ripping out any db code etc):

 

main script:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>listing</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
window.onload = function () { setTimeout('clearPreloadPage()',0); }
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function clearPreloadPage() 
{ //DOM
	if (document.getElementById)
	{
		document.getElementById('prepage').style.visibility='hidden';
	}
	else
	{
		if (document.layers)
		{ //NS4
			document.prepage.visibility = 'hidden';
		}
		else 
		{ //IE4
			document.all.prepage.style.visibility = 'hidden';
		}
	}
}
// End -->
</SCRIPT>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li a {height: 1%;} 
#menu a, #menu h2 {
font: bold 11px Verdana, arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</HEAD>
<BODY>
<div id="prepage" style="height:100%;width:100%;z-index:500;text-align:center !important;position:absolute;font-family:Verdana;font-size:11px;left:0px;top:0px;background-color:White;layer-background-color:White"> 
<center>
<span style="font-size:14px;font-weight:bold">Please wait ..</span>
</center>
</div>
<center>
<table border="0" cellspacing="0" cellpadding="0" class="t874">
   <tr>
   <td>
  <? include("tempservices.php"); ?>
   </td>
   </tr>
<tr>
    <td>
	<br />
	<center>
	<a href="<?=$domain?>a.php" class="about">  A</a>
	<a href="<?=$domain?>b.php" class="about">  B</a>
	</center>
	<br />
	</td>
  </tr>
</table>
</center>
</BODY>
</HTML>

 

The script that is included (tempservices.php) which includes the drop down box:

 

<div class="offer1">
		<? if (!IsSet($find) or $find=="") { $find = 'products'; } ?>
		<div class="prodbut">	
			<form name="prods" method="post" action="" class="form10">
			<input name="find" id="find" type="hidden" value="<?=$find?>" />
			<a name="srv"></a>
			<table cellspacing="0" cellpadding="0" border="0" width="100%">
				<tr>
					<td><a href="#srv"><img src="elements/services0.gif" border="0" name="imgServ" id="imgServ" onclick="requestServ()" /></a></td>
					<td><a href="#srv"><img src="elements/events0.gif" border="0" name="imgEven" id="imgEven" onclick="requestEven()" /></a></td>
					<td><a href="#srv"><img src="elements/products1.gif" border="0" name="imgProd" id="imgProd" onclick="requestProd()" /></a></td>
					<td>
						<select name="servcountry" id="servcountry" style="width:230px;margin:0px" onChange="requestLinks()">
						</select>
					</td>
				</tr>
			</table>
			</form>
		</div>

		<div class="products" id="DivProducts" name="DivProducts">
		<?

		?>
		</div>
</div>

 

When you execute the main script, you see the drop down box to the right of the 'Please wait..' text.  You shouldnt. The drop down box should only be displayed when the 'Please wait..' prepage processing has completed.

Any ideas?

The solution was provided by Feherke from another forum:

 

    function clearPreloadPage()
    { //DOM
        if (document.getElementById)
        {
            document.getElementById('prepage').style.visibility='hidden';
            document.getElementById('servcountry').style.visibility='visible';
        }
        else
        {
            if (document.layers)
            { //NS4
                document.prepage.visibility = 'hidden';
                document.servcountry.visibility = 'visible';
            }
            else
            { //IE4
                document.all.prepage.style.visibility = 'hidden';
                document.all.servcountry.style.visibility = 'visible';
            }
        }
    }

 

And in tempservices.php for drop down:

 

                            <select name="servcountry" id="servcountry" style="width:230px;margin:0px;visibility:hidden" onChange="requestLinks()">
                            </select>

 

Notice how you are controlling the 'servcountry' drop down's visibility, in both the select name section of tempservices.php and in the main scripts clearPreLoadPage() function. Many thanks to Feherke for this insightful solution.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.