HTML PDF embedding blocks controls in html modal - javascript

I'm using <embed src="<%= path %>" type="application/pdf" /> to preview pdf file on the page. It works great until I open my custom modal window with position fixed covering pdf preview area. Modal window has buttons and I cannot click on any. It seems modal is covered by something invisible. I tried to play around with z-indexes but it didn't work out. Embedding with tag <object data="" type="application/pdf"></object> caused the same problem - I cannot click on the button.
The main problem of the issue is that it can be reproduced at particular computers in spite of the same Chrome version (version: 69.0.3497.100 64-bits) Did anyone face such pdf rendering issues in Chrome?
Here is the link to test this issue https://fatuk.github.io/test-pdf-render

Related

HTML pdf not showing in safari

i have a php page which shows a list of invoices. clicking on any of those invoices shows its pdf file. When the user clicks on any invoice, the src of the embed tag is changed by jQuery to the appropriate pdf file.
Works very well, but strangely enough it behaves differently in safari then in firefox for instance.
In firefox i can just click on an invoice -> the pdf shows. if i right after that click on another invoice and after that click on the first invoice again -> the pdf shows again.
Safari: If i re-click an invoice, i get a blank pdf (embed tag). And downloading of that pdf results in a 0kb file.
Seems to only happen in safari.
Has anyone encountered this before and maybe know a solution to this issue?
i have googled and tried a lot but it's still not working.
Html:
<div class="card-body">
<embed id="invoice_scan" src="" type="application/pdf" width="100%" height="400px" />
</div>
jQuery:
$('#invoice_scan').attr('src', '/docs/pdf_file1.pdf );
I had this issue showing a pdf in an object tag using angular.
The fix was to remove type="application/pdf" from the object tag.
I have a similar issue with Safari 15.5 with <object> tag. As soon as PDF gets loaded, it was crashing the browser. I removed type="application\pdf" conditionally for safari. That seems to be working.
Alternate option would be use iFrame for PDF's.
Why is this code failing on MacOS Big Sur Safari?

Detect scrolling in embedded PDF

On my page I have an embedded PDF file and I want to detect if the user scrolled at least once to make a continue button visible. I tried a few things the came to my mind, namely:
Putting the onscroll event into the HTML
<object data="flgs/EUW/EUW.pdf#zoom=38&toolbar=0&navpanes=0&scrollbar=0&view=fit"
type="application/pdf" width="60%" height="60%" onscroll="PDF()" style="position:relative; right:20%; left:20%;">
</object>
In JS
document.getElementById('PDF').addEventListener('scroll')
$('#PDF').on('scroll')
and $('#PDF').scroll()
All three of those are different examples I tried and not in the same script at once.
Is there a way I can detect whether the user scrolled in the PDF or not?

dynamically generated modal with embedded swf content does not trigger the "click to use flash" overlay in safari 10

i am trying to get a flash-games showcase site working again, after Safari 10 changed the game and the old SwfObject does not work anymore.
The site is a simple bootstrap grid with dynamic modals which get created via javascript when a thumbnail is clicked.
In order to trigger "click to use flash" overlay i changed the code from the SwfObject to a simple embed tag.
However that does not work ...
The created embed looks like this:
<embed class="embeddedswf" src="games/game1/swf/game1.swf" width="640" height="480" FlashVars="path=games/game1/swf/&w=945&h=540" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflash" />
and works perfectly in a static site or in other browsers
So i assume, that safari does not like the modal to be created at runtime via JavaScript.
EDIT: If i already enabled flash for the site it works like a charm like in all other browsers.
Does anyone have an idea if there is a solution?
Or do I have to make all the content static?
thanks a lot!

PDF viewer toolbar is disabled in MS Edge

I am using jquery plugin for opening modal pop-ups. The pop-up can open the pdf document. I am using tag object for displaying pdf like this:
<object id="idPdf" width="300" height="400" type="application/pdf"
data="MY_PDF_URL">
<span>PDF plugin is not available.</span>
</object>
It works fine in all browsers, but the pdf toolbar is missing in MS Edge (user can not save or print). It works fine in new window or tab, but in pop-up has the issue. Anyone know how to fix it?

Anchor tags in PDF are not clickable in firefox and safari

I have an iframe which loads PDF. It loads PDF successfully in all browsers. But anchor tags inside those PDFs are not clickable in Firefox and safari.
In works fine in google chrome.
Is there any way to solve this issue?
It looks working when used Embeddable Google Document Viewer (http://googlesystem.blogspot.in/2009/09/embeddable-google-document-viewer.html).
Working:
<iframe src="https://docs.google.com/gview?url=http://www.realtimecases.com/system/cases_offereds/media/000/000/009/original/Public_Relations_Communications_Overview.pdf?1453309175&embedded=true" width="100%" height="900"></iframe>

Categories

Resources