Progress indicater while pdf loads

[clang]

I've got what I think (hope) is a simple problem. I have a page which has a table in it with some information, and below that table a pdf file.

First off, before any one says anything, yes I know embedding pdf's suck. But for this task, it's required. Not my choice, I promise.

 

Some of these pdf files take a bit to load (read, long enough for the user to think something broke). So I would like to include an indicator that is displayed during the page load, and is hidden once the entire page, including the pdf, is loaded.

 

This is what I currently have. I'm using the Mootools js framework.

 

The php file which has the pdf in it

<?php
include 'library/functions.php';
session_start(); 
$db=opendb($dbhost, $dbuser, $dbpass, $dbname);
$header="<script type=\"text/javascript\" src=\"library/mootools-compressed.js\"></script>\n
	<script type=\"text/javascript\" src=\"library/displayFile.js\"></script>\n
";
HTMLheader($db,"Reprint Customer Letter",'10 11','Yes',$header);

?>
<div class="title"><a class="likeParent" href="./Search.php">Reprint Customer Letter</a></div>
<div id="content">
<?php
checkError($db);
?>
<table>
<tbody>
<tr>
<th>File Number: </th>
<td> <?php echo $_SESSION['fileNumber'];?></td>
</tr>
<tr>
<th>Type of File: </th>
<td><?php if($_SESSION['type']==0)
		{
			echo "Purchase";
		}
		else
		{
			echo "Refinace";
		}?></td>
</tr>
<tr>
<th>Last Name: </th>
<td> <?php echo $_SESSION['lastName'];?></td>
</tr>
<tr>
<th>First Name: </th>
<td><?php echo $_SESSION['firstName'];?></td>
</tr>
<tr>
<th>Street Address: </th>
<td><?php echo $_SESSION['street'];?></td>
</tr>
<tr>
<th>City: </th>
<td><?php echo $_SESSION['city'];?></td>
</tr>
<tr>
<th>State: </th>
<td><?php echo $_SESSION['state'];?></td>
</tr>
<tr>
<th>Zip Code: </th>
<td><?php echo $_SESSION['zip'];?></td>
</tr>
</tbody>
</table>

<table>
<tfoot>
<tr>
<td colspan="2"><button type="button" onclick="javascript: window.location = './ReprintLetter.php'">New Search</button></td>
</tr>
</tfoot>
</table>
<div id="log_res" class="ajax-loading"><!-- spanner --></div>
</div>
</div>

<div id="document" style="display:none;">
<table>
<tr>
<td class="empty" align="center">
<EMBED src="<?php echo $_SESSION['filePath'];?>" width="1200" height="800" PLUGINSPAGE="http://www.adobe.com/products/acrobat/readstep2.html"></EMBED>
</td>
</tr>
</table>
</div>

<?php
HTMLfooter();
?>

 

And the Javascript file I created (of course the mootools file is also included)

window.addEvent('load', function() {
$('log_res').style.display='none';
$('document').style.display='';
});

 

If you've never used mootools, here is an example of what the load function does (I'm bad with js so this may be just a js function, I don't know).

 

So if my pdf was just a big image, this would work great. But something about being a pdf makes the page think it's loaded, when it's not.

 

Any ideas?

I'm open to completely re-doing it too, if that's what it takes.

[emehrkay]

is the pdf apart of the dom?

 

onLoad checks to see if things in the dom have completed loading

[gluck]

it will be in the js. You will have to check the js handler.

[clang]

I apologize, I'm quite new to JavaScript and DOM. I'm going to guess and say no it is not, but I'm not certain. It is in a <div> with an ID, but I doubt that qualifies. Would you mind telling me how I would know, or how to make it a part of DOM?

As a note, all the code for this problem I'm having (sans Mootools which is far too many lines to post here) is in my post.

But please if I've left out any important information let me know and I'll do my best to include it.

[emehrkay]

well does it open as apart of the html or does it prompt the user to either download or view a file? if it is in the html, it *is* apart of the dom (not always true)

[clang]

It opens as a part of the html. It is embedded into the page (again, I know, crappy, but it's not my choice).

 

It is embedded using this code

<div id="document" style="display:none;">
<table>
<tr>
<td class="empty" align="center">
<EMBED src="<?php echo $_SESSION['filePath'];?>" width="1200" height="800" PLUGINSPAGE="http://www.adobe.com/products/acrobat/readstep2.html"></EMBED>
</td>
</tr>
</table>
</div>

 

The style is set to display:none, and should change to display:'' once the page and the pdf are loaded. But right now it's just changing to display:'' regardless of the pdf loading.

[clang]

I'm not sure what the forum rules are here for bumping threads. Sorry if this is frowned on, but I still haven't been able to figure this problem out