Displaying an imbedded pdf file

Question

I've been struggling to find a workable way to imbed .pdf files in web pages that are broadly accessible, including to IE8 users. I don't think pdf.js is going to work because I want to embed the files, not load them as new pages.PDFObject seems like the best choice. But when I use their code, no matter what browser I use, I get only about a quarter of the page length displaying, as shown in the accompanying image. enter image description here Everything below that first line of text is simply the white of my website background. I have tried both following the PDFObject instructions and using their code generator. No luck either way. Here's the code:

<!-- insert in the document body -->

<object data='http://www.example.com/TestDoc.pdf#' 
        type='application/pdf' 
        width='100%' 
        height='100%'>

<p>It appears your Web browser is not configured to display PDF files. 
No worries, just <a href='http://www.chrisrichard.org/TestDoc.pdf'>click here to download the PDF file.</a></p>

</object>

And here's the javascript version:

<!-- insert in the document head -->

<script type='text/javascript'>

  function embedPDF(){

    var myPDF = new PDFObject({ 

      url: 'http://www.example.com/TestDoc.pdf'

    }).embed();  

  }

  window.onload = embedPDF; //Feel free to replace window.onload if needed.

</script>

This is all directly from the PDFObject coder. There's a tutorial on the website, and I've followed it meticulously so far as I can tell, but no luck. So I'm stumped, and would appreciate any suggestions. Frankly, I wish I didn't have to accomodate IE8 at all, and I wish I could make pdf.js work for what I want it to do, but neither seems to be a viable option. Again, thanks in advance for any ideas.

Note: Please note corrected code, which gives the entirety of what PDFObject generates.

Note 2: This is the entirety of the kind of page I would be seeking to insert the viewer into. I have skipped the javascript version, which would have me insert the code in the header and which would fill the entire page with the pdf and viewer. It's important that the .pdf be set within my page. I would almost certainly be getting rid of the swfobject references, since that isn't working with mobile devices, etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example.com - </title>
<link href="oneColLiqCtrHdr.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#MenuHolder {
    position:absolute;
    left:692px;
    top:50px;
    width:228px;
    height:23px;
    z-index:1;
}
-->
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<body class="oneColLiqCtrHdr">
<div id="container">
        <div id="header">
    <h1><img src="images/BodyLogo.jpg" width="665" height="57" alt="Logo" /></h1>
    <link type="text/css" rel="stylesheet" href="/floatbox/floatbox.css" />
<script type="text/javascript" src="/floatbox/floatbox.js"></script>
<script type="text/javascript" src="/floatbox/options.js"></script>
 <link rel="stylesheet" href="/Menu2Assets/mbcsmb4pc8.css" type="text/css" />


<div id="mb4pc8ebul_wrapper" style="max-width: 345px;">
  <ul id="mb4pc8ebul_table" class="mb4pc8ebul_menulist css_menu">
  <li><div class="arrow buttonbg"><a>Examples</a></div>
    <ul>
    <li><a href="Example1.html" target="_self" title="">Example1</a></li>
    <li><a href="Example2.html" target="_self" title="">Example2</a></li>
    <li><a href="Example3.html" target="_self" title="">Example3</a></li>
    <li><a href="Example4.html" target="_self" title="">Example4</a></li>
    </ul></li>
  <li><div class="buttonbg" style="width: 86px;"><a href="resume.html" target="_parent" class="button_2">Resume</a></div></li>
  <li><div class="arrow buttonbg" style="width: 96px;"><a>Contact</a></div>
    <ul>
    <li><a href="Mail/contactform.php" class="floatbox" data-fb-options="width:50% height:80% scrolling:yes" title="">Email</a></li>
    <li><a href="files/index.php" class="floatbox" data-fb-options="width:50% height:80% scrolling:yes" title="">Send</a></li>
    </ul></li>
  <li><div class="buttonbg" style="width: 69px;"><a href="index.html" target="_self" class="button_4">Home</a></div></li>
  </ul>
</div>
<script type="text/javascript" src="/Menu2Assets/mbjsmb4pc8.js"></script>
  <!-- end #header --></div>
</head>
  <div id="mainContent">
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
<!-- insert in the document body -->

<object data='http://www.example.com/TestDoc.pdf#' 
        type='application/pdf' 
        width='100%' 
        height='100%'>

<p>It appears your Web browser is not configured to display PDF files. 
No worries, just <a href='http://www.example.com/TestDoc.pdf'>click here to download the PDF file.</a></p>

</object>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
  </div>
  <div id="footer">
<p align="center"><img src="images/Copyright.jpg" width="190" height="15" alt="Copyright" /></p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Where can we see this happening? Where is the html,css and javascript code? — Ismael Miguel, Oct 26 '14 at 21:07
PDFObject has a code generator that purports to create useable text, and that is what I copied and posted. That page makes no reference to css or javascript. Well, they do have a javascript generator option, but they advise against using it. They seem to be saying that if you plug that code snippet into a page, within the body, that it will imbed. And it does, partially. — Chris, Oct 26 '14 at 21:41
I thought I could paste code here but it looks like I can't. Please see alteration to my original post. — Chris, Oct 26 '14 at 22:07
It looks like that will work for the .pdf. Thanks. It does raise new problems, though, including blowing up everything else on the page to 100 percent, like my logo .jpg, etc, when I actually try to apply it to a real page. That's probably a result of my self-teaching on web design. Would you be able to do something similar just by creating a div, where it would apply only to that section? — Chris, Oct 26 '14 at 23:08
You said it didn't had any other code...... That css only works for **this** page: it was supposed to be applied only to this page and to no other page. You can't put it in a css file that is shared across pages. You can't apply it only to a `
` because **all** the parents of your pdf **must** have a `width` and `height` of `100%`. I can't assist much more because you don't provide enough information. Can you please post (at least) the generated html? — Ismael Miguel, Oct 26 '14 at 23:41
checkout http://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html — Graham T, Oct 26 '14 at 23:46
Actually, you did help a lot already. I was just trying to figure out what else might be possible. I'll try again to paste in the generated html. I'm not quite sure why it wouldn't paste properly before. — Chris, Oct 27 '14 at 01:23
You can't paste the code directly. You have to appends 4 spaced before **each** line before you put the code in here. When you edit your question, there is a symbol like `{}` which creates 1 line for you to put code. Here are some examples: http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 and http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css (check both the answers and the question, click on the edit button but **do not save**) — Ismael Miguel, Oct 27 '14 at 01:50
OK. Thanks. It doesn't look like I can post code in a comment, so I'm going to try to get appended to the original post. — Chris, Oct 27 '14 at 06:05
You still don't provide the **whole** html file. The whole structure is important to know how to proceed. I know it does sound demanding, I'm just making sure I can fix your problem without assumptions. You could have a `
` with `height:300px;`, then an `
`, then an `
` and then an unclosed `
` tag with the pdf file. Every single line in the code makes a huge difference in this case. — Ismael Miguel, Oct 27 '14 at 23:34
You can check here (http://scratchpad.io/animated-hands-6897) for an example of the code working. You **should** forget about `PDFObject`. (btw, **DON'T CHANGE A SINGLE COMA ON THAT LINK**, copy and go to http://scratchpad.io/ and make a new one). — Ismael Miguel, Oct 27 '14 at 23:36
OK. I think I've finally given you what you requested. I haven't included the CSS sheets, since it didn't appear that you were asking them in your last message. But the code is inserted is what I'd be using for a template, inserting various .pdfs into the body in the space where I've inserted that generated code. I've also gone to your example, and yes, that is what I want to do (always stipulating that it's important to have the pdf embedded.) I'm a little puzzled by your last direction, to set up a new scratchpad. — Chris, Oct 28 '14 at 00:36
You may have gathered by now that I am no Einstein when it comes to this stuff. It is just dawning on me what you may be using the scratchpad to show -- how to insert code in the page correctly -- correct? So what you're asking me to do is to try to emulate it? — Chris, Oct 28 '14 at 01:54
What I am trying to show is that I'm depending on the whole html code of the page to tell you what to do. And I showed you an example on how to do it and a possible structure you might have but it isn't the one you have and won't work right for you. That is simply an example — Ismael Miguel, Oct 28 '14 at 14:31

Displaying an imbedded pdf file

0 Answers0