www.webdeveloper.com
Results 1 to 7 of 7

Thread: PDF within a DIV

  1. #1
    Join Date
    Apr 2005
    Location
    Essex, United Kingdom
    Posts
    187

    PDF within a DIV

    Hi. I have a page which currently contains just a paragraph of text. I now have a requirement to add a PDF in the middle of the page as well. Not a link to the PDF, but the actual open document itself. The PDF is a set number of pixels wide (roughly 75% of the page width) and is centered on the page.

    Normally, I would create an IFrame in the middle of the page and set the source as the PDF, but for this particular project, Frames and IFrames are not possible. (The reason for this is very long and very complicated and out of my control. I won't bore you with the reason why, but please just accept i cannot use any kind of frame. Everything must be kept within a single page file).

    Is it possible to have a DIV in the middle of the page and show the PDF in that? I have tried <div src="mypdf.pdf"> and other variations, but to no avail. I have also tried with CSS, but again, no joy

    Any solution to this, or any other ideas are appreciated.

    Thanks

  2. #2
    Join Date
    May 2004
    Location
    FL
    Posts
    3,447
    Not sure but I believe that PDFs are handled by the browser so I don't know how you would actually open one in a page itself. For instance, I have a Firefox extension that asks me how I want the PDF file handled. Even when it does open it within the browser, it's not in the page itself but as a separate document. Let's see if someone has a definitive answer.
    Lee

    ""Men occasionally stumble over the truth, but most of them pick themselves up and hurry off as if nothing ever happened."" -- Sir Winston Churchill

  3. #3
    Join Date
    Jun 2007
    Posts
    1

    Put a PDF in a DIV tag

    Hi,

    Give this a try:

    <div>
    <object data="test.pdf" type="application/pdf" width="300" height="200">
    alt : <a href="test.pdf">test.pdf</a>
    </object>
    </div>

  4. #4
    Join Date
    May 2005
    Location
    Northern Indiana
    Posts
    597
    Another option (albeit, not a good option, but one that can work in a pinch), is to create an iframe in your page and point the frame source to the pdf document. As long as the user has an Acrobat browser plugin installed, it should be displayed in the iframe. Of course, you have no control over whether or not they have the necessary plugin, so use with caution...

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by Tweak4
    ... As long as the user has an Acrobat browser plugin installed, it should be displayed in the iframe. Of course, you have no control over whether or not they have the necessary plugin, so use with caution...
    True, but you make it sound as if their computer will explode or something. -A link to Adobe to get the required-missing download is a standard Accessibility requirement anyway (document would throw a validation warning for Accessibility s. 508 if a plug-in is called for and no link to source it is given).
    -Actually, this is occasionally a good thing for the general computer-user to encounter..., -a file that requires a common plug-in/helper software. It ensures that they have adequate helper-software installed on their machines (and, installing it, the software probably 'calls home' occasionally asking about updates, fixes, etc).
    Like, if I never went to Youtube or any other 'video' repository and tried to download / view things, -how would I ever know that I do not have "Quicktime" installed (for instance).

    Myself, -I'm liking the "<object>" method mentioned above (that was going to be my reply but postee got to it first).
    Last edited by WebJoel; 06-29-2007 at 04:27 PM.
    I build for: Firefox and tweak for IE

  6. #6
    Join Date
    May 2005
    Location
    Northern Indiana
    Posts
    597
    Quote Originally Posted by WebJoel
    True, but you make it sound as if their computer will explode or something.
    What can I say? I love the drama of it all

  7. #7
    Join Date
    May 2011
    Posts
    1

    pdf in div - Thanks!

    Quote Originally Posted by geissingert View Post
    Hi,

    Give this a try:

    <div>
    <object data="test.pdf" type="application/pdf" width="300" height="200">
    alt : <a href="test.pdf">test.pdf</a>
    </object>
    </div>
    THANKS!!!
    perfect solution!
    Exactly what I needed. Saved me so much time!

Thread Information

Users Browsing this Thread

There are currently 3 users browsing this thread. (0 members and 3 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles