<object data="NAME.pdf" type="application/pdf" width="100%" height="1200px">
<p>Alternative textMy CV</p>
</object>
So let's say I embed my pdf into my page like this, so that the entire page is the pdf document. EXAMPLE
The issue I get is that when you scroll inside the object (pdf), it only scrolls the object, so when it's full screen nothing happens. I would like the user to be able to scroll the site, not the pdf.
Also is there a way to change the object pdf background color?
Thanks for the help, there doesn't seem to be much documentation on this. If you have any other suggestions on integrating a full-page pdf please let me know. I am using pure HTML/CSS.
Related
I am currently doing so like this:
<div class='embed-responsive' style='padding-bottom:150%'>
<object data="../pdf/Invoice_file.pdf" type="application/pdf" width="95%" height="800px"
style="display: block; margin: 0 auto;" />
<p>Not supported by browser.</p>
</object>
</div>
I looked at the other solutions on here but none of them worked. If possible I'd like to scale the PDF page size as the screen gets smaller. Any ideas would be appreciated, thanks!
Unless your PDF of choice has a JS interface, you may find you can't achieve what you want. Why not - well I just opened a PDF file in Chrome and resides the browser window. The PDF page in view did not scale - so I conclude that Chrome's PDF viewer is coded to re-center the page on viewport dimension changes but not to scale the page.
I your PDF viewer of choice provides a JS interface, then you probably can do it.
Problems will no doubt occur if you cannot dictate the PDF viewer your users will choose.
How can I customize the default scrollbar that browser shows on pdf file?
<object data="/pdf/sample.pdf" type="application/pdf" width="100%" height="100%">
<p><b>Example fallback content</b>: This browser does not support PDFs. Please download the PDF to view it: Download PDF.</p>
</object>
It is unclear which scroll bar you're talking about. Is it part of the browser or part of the PDF viewer? More importantly: Which browser and viewer are you using?
Suppose you're using Adobe's PDF viewer, then you can add an argument to the url like this:
data="/pdf/sample.pdf?scrollbar=0"
See: http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
This can however have no effect when using other pdf viewers. More so, the scroll bars are often there for a good reason.
Activating touch mode can also remove the scroll bar in some viewers.
Basically you don't have much control over this.
Your real question is about customization. This could mean a lot of things, for instance making the scroll bar wider, changing its color, etc. Clearly this cannot be easily done when the scroll bar is part of the viewer.
Lastly, the message; 'This browser does not support PDFs.', is not entirely accurate. It will also be shown if the PDF file doesn't exist.
EDIT:
This works to get rid of the extra scroll bar in Chrome:
<html>
<body style="overflow:hidden;margin:0">
<object data="sample.pdf" type="application/pdf" width="100%" height="100%">
<p>Error!</p>
</object>
</body>
</html>
I want to embed a page from around 200px down. Is it possible to make an embedded page (for example, an embedded Youtube page scrolled down to the comments)? This code worked for the embed itself - <iframe src="(webpage)" width="800" height="452" frameborder="0">. I'm assuming it's HTML. Please let me know if it is poorly phrased for the section.
I have a website that has a huge background image. I need to put a flash player at the top of the website, and I just realized that each page they click on is a new page, and thus restarts the Flash player. So I would like to put that flash player in an iframe so it will continue to play throughout the user surfing.
But my issue is will the iframe cover the background image and not be underneath? Or will the background image of the page (not iframe) go nicely underneath the iframe and no one will be the wiser of my methods? Any help would be greatly appreciated.
Firstly what you want to do is put your individual pages contents into an iframe (not the flash video) as this is what you want to update. You want the flash to be on the actual parent page so it always remains the same. (or put both in seperate iframes and only update the content iframe).
In regards to your question about the iframes background you can make it transparent so that the background is still visible through it.
To do this set the ALLOWTRANSPARENCY property to true on your iframe e.g.
<iframe width="100%" height="500px" name="content" src="home.html" frameborder=0 allowtransparency="true"></iframe>
And then in the pages which are going to be contained in the iframe set the body's background to be transparent:
<body style="background-color:transparent">
Iframes are bad, and take with them all the shitty stuff about frames (google "why frames are bad" if you want some reading).
What you should be looking at is some AJAX-techniques. JavaScript frameworks like Dojo and jQuery have lots of functionality you could check out. This will enable users to do things like vote, add to favourites or comment while the movie is playing - pretty much like Youtube.
It all depends a little on what you've got running underneath your HTML-pages though. Could you provide some more information about that?
I'm pretty much at my wits end with this issue. I've been searching for a while and though I find many posts with people having the same issue as me, I'm not finding any answers or solutions to these posts.
The problem is this: We have a PDF viewer embedded on a report site. The user has the option to view the PDF in the browswer or to download it. We have a dropdown menu so the user can navigate to different reprots. The menu overlaps the PDF viewer when it drops down. In IE, it goes over the PDF viewer, as it should. In FireFox it goes behind the viewer and gets cut off.
Here is a code snipit:
<div style="position: relative; height: 347px; z-index: 1;" id="divPDF">
<span style="width: 100%; height: 100%;" id="PDFViewer1">
<div>
<object width="100%" height="100%" type="application/pdf" data="report.pdf#toolbar=1&navpanes=0&scrollbar=1&view=FitH">
<param name="wmode" value="opaque" />
<embed src="report.pdf#toolbar=1&navpanes=0&scrollbar=1&view=FitH" type="application/pdf" width="100%" height="100%" wmode="opaque"></embed>
Download PDF
</object>
</div>
</span> </div>
I have tried putting it in an iframe, but that didn't work. I've tried setting the vmode to transparent, but that didn't work either. (Is vmode even a valid param?) The z-index for the menu is 500.
Any suggestions would be greatly appreciated.
Thanks in advance.
This is known issue with the 'embed' html tag & the way the adobe pdf renders the pdf . Currently Adobe does not support transparency tags like the flash files do ( wmode=transparent) kind of thing in the PDF rendering.
Have you check in Firebug at all instances that the z-index of your menu and pdf containers remain constant? When I say instances I mean when the user interacts with the menu and whatnot.
Or perhaps it's a CSS overflow issue? Just throwing things out.
I had the same problem. I fixed it by hiding the report when the user clicked the drop down menu, then showing it again when the menu was hidden. It's mostly a hack, but it works and allows me to have both my embedded report and my drop-down menu.