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.
Related
<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.
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 currently open a pdf in an iframe. The iframe is hidden and whenever the user hits the button, the iframe loads the pdf source. When the window closes, it removes the source.
The problem that I have is that when a person views the iframe, messes with the zoom and pages, then closes down the iframe, the next person is stuck with the work that the other person was doing. Is there a way I can reset a pdf back to the default zoom, page, orientation, etc?
I've been doing some testing and it seems that adobe has a cache that will cache the settings until the browser closes down. An example is go to
http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf
Mess with the zoom and pages, go to a different web page, and when you go back to that url, you'll see it's the exact same as you left it. I assume that there is a setting that I have to set in adobe reader. I've also tried setting defaults with parameters, but that doesn't seem to be working.
This is for internet explorer 11.
Additional Info
this is for a kiosk system that is running IE11 in Kiosk mode. The shell has been replaced by ie, and it's set to load the site with the hidden iframe. The system is running Adobe Reader X 11.0 and I'm using the following to embed:
<object id="pdf" data="kill-charts.pdf" style="display: none;" width="100%" height="100%" type="application/pdf">
</object>
I've tried embed as well, but it doesn't make a difference. I swapped to object because I wanted to try with parameters. I tried this
<object id="pdf" data="kill-charts.pdf" style="display: none;" width="100%" height="100%" type="application/pdf">
<param name="zoom" value="100" />
</object>
but that didn't work after the second load.
If you look on the last page of the link you provided you will see that you can append #zoom=50 to the URL as follows:
http://example.org/doc.pdf#zoom=50
This will make the browser open it at 50% every time. You can also add other parameters as well such as page number:
http://example.org/doc.pdf#page=1&zoom=50
This method will work at least for the Adobe plug-in, but not guaranteed for other PDF plug-ins.
I have a menu div that I'd like to display on top of a pdf in an iframe. The work-around I have found is to place an empty iframe behind the div. Works fine in Firefox/IE. Chrome still has the menu div behind the iframe. Oh, and I have the Adobe PDF plugin activated. Anyone have experience with this?
See the Fiddle
If you add it in as an object (with wmode) rather than as an iframe it seems to work fine in Chrome (FYI, I can confirm that it was not working correctly in my version of Chrome: Windows 7, Chrome 16). Try this:
<div id="objectContainer">
<object id="pdfObject" data="http://mirror.hmc.edu/ctan/macros/latex/contrib/pdfpages/dummy.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
alt : test.pdf
</object>
</div>
<iframe id="emptyIframe" src="about:blank" frameborder="0">something</iframe>
<div id="menu">
Menu
</div>
This also works in Firefox. However, you might run into problems with IE. I recommend you do a server-side browser detect and then output either the embedded object or iframe depending on the browser.