Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to enforce user must scroll pdf within iframe

I have a pdf file within iframe. I want user to scroll must in pdf file before submitting the form. i am trying with this,

var position = $('#myIframe').contents().scrollTop();  

But not working. Please help me Thanks in advance.

like image 634
Sajid anwar Avatar asked Mar 24 '16 04:03

Sajid anwar


People also ask

How do you add a scroll event in iframe?

An iframe does not have a scroll method, the document of the iframe does - you need to reference the inner document rather than your <iframe> tag.

How do I display a PDF in iframe?

All you need to do is add #view=fitH to the end of the source attribute. That's it! fitH stands for fit horizontal, and this will make the PDF in our iframe fit the width of the screen.

How do you make a PDF scroll?

Or you can right click anywhere in the PDF and choose Vertical or Horizontal, Single Page or Two Page, tick Continuous Scroll and click Read Mode On or Off from the pop-up menu.


2 Answers

If you don't mind making a static height for your iframe, I have a solution for you.

HTML and CSS
1. Wrap your iframe in a div container
2. set heights for both your container and iframe (height of container should be the height you want your frame to be seen and the iframe height should be large enough to show entire pdf.)
3. set container div's overflow to scroll

Now you have a scrollable "iframe".

Javscript

  1. Get container element. (var containerEl = $("#container")[0];)
  2. Write a scroll function. Within the scroll function find if the total height of the element (scrollHeight) is less than or equal to how much has been scrolled (scrollTop) plus the inner height (clientHeight) of the element. If it is, remove disabled property from button

Here's the fiddle. Made some changes to @mJunaidSalaat's jsfiddle.

like image 166
Anthony Avatar answered Sep 19 '22 06:09

Anthony


Well I've tried almost an hour on this, Researched it, finally coming to a conclusion that Unfortunately this is not possible using this method.

The PDF is usually not a DOM element, it's rendered by PDF reader software. Every browser has its own mechanism for rendering PDFs, there is no standard. In some cases, the PDF might be rendered by PDF.js; in those situations you might be able to detect scrolling. But Adobe Reader, Foxit, and some of the native PDF rendering don't provide that option.

I've also created a Github issue for this. But no use.

Sorry. Please update me if you could find any thing or any workaround.

like image 37
M. Junaid Salaat Avatar answered Sep 20 '22 06:09

M. Junaid Salaat