Well, it's working, more or less. There are a number of issues. I'm not sure I can recall them all here, these are the most important:
- In Firefox when the page first loads with the first PDF on it, and each time a PDF is loaded via AJAX, the ability to use the home/end, up/down arrow, pgup/pgdn keys, and the scrollwheel are lost unless the tab/window loses focus and regains it. Using javascript (window.blur()/window.focus()) for this doesn't help. One may still scroll by dragging the window's/tab's scrollbar.
- Even after that, one must click somewhere on the page other than on the PDF to activate use of these keys and the wheel. This part is true in other browsers. Click on the PDF and these functions are lost again until you click off of it. I haven't tested it, but covering the PDF with an almost transparent div or a transparent .gif might help a little here.
- In IE there still are occasional instances where the PDF just doesn't show up. To fix this I've added the src param to the object tags and created a redundant loading of the imported tag (as mentioned before). Both of these strategies seem to help, but haven't eliminated the problem completely.
Here's a demo:
Attachment 3523
Unzip it to a separate folder on your PHP host or PHP local server. The way the PHP code is written, the PDF files need to be in the same folder as the pages.php file. Easiest to just keep everything in the same folder. If you choose though, you can edit the PHP file and/or move things around. Just be careful not to break the PHP file's ability to find the PDF files. I've used parameters to make the PDF's appear without the Acrobat toolbar, bookmark menu, or scrollbar. Doing so helped in removing some browser's (notably Opera) artifacts in the rendering of the Acrobat chrome and left more real estate for the actual PDF. If you change that, tweaks to the dimensions and/or how the height is calculated may be required. The main page is:
1234_ajax_4.htm
On it you will see:
Code:
. . . margin-left: 1em;
position: relative;
top: 2em;
}
#target object {
width: 600px; /* set object width here */
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var pageHeight = 780, // set height for one page here
pagination = 65, // amount to add per page if more than one page
t = $('#target'), count = 0, h;
function sizeIt(pages){
pages = typeof . . .
These should be pretty self explanatory. I think however that my 1234_old.pdf file is a little non-standard. So if not using it, you can probably just do:
Code:
var pageHeight = 845, // set height for one page here
pagination = 0, // amount to add per page if more than one page
In any case, the height you use in the script needs to be worked out proportionally to the width you set in the style section. If more than one page, pageHeight is added to pagination and the sum is multiplied by the number of pages. If a single page, pageHeight is used alone.
Reply With Quote
Bookmarks