wphats

How to make scroll PDF in iFrame for iPAD Safari

How to make scroll PDF in iFrame for iPAD Safari

There is an occasional bug for iPhone and iPad even they are designed as well and you will face lot of troubles with viewing a PDF inside an iframe. It does not seem to matter if viewing the PDF on Safari or any other mobile devices. The PDF would load into an iFrame, however it would not be scrollable. Ya !! That’s weird 🙁

There are many tutorials found online and many solutions come across but not satisfied as how i want. And finally i got solution to make work with Google PDF Viewer. 🙂

Meaning that if your iFrame code like this:

That would be like this:

Did you notice ? I have added https://docs.google.com/gview?url= just before the PDF link and made it embedded=true . Now you can check and i believe you can find it’s cool, yea 🙂

 

But what if, you already generated lots of PDF links (iFrame) in your site and there you thinking how can be make it automatic !!

yea.. my next code & scripts will help you to make it more simple you are thinking:

See..how easy. Yes, its cool and don’t forget to change ‘hasPDF’ class with your iframe class name.

 

If you are using WordPress, then it would be more easy to set in footer through a hook. Just place this below code in your theme functions.php file:

Finally, one free tips if you are having problem with general TOUCH issue in your iPad (apple) devices where you must need to use -webkit-overflow-scrolling:touch for parent tag.
How should be the HTML :

Hope this helps to resolve your iPad touch & scroll issue viewing PDF in iFrame.

Thanks.

This post has already been read 2332 times!

Mehedi Hasan

Cool WordPress Developer having much agile experience to develop any kind of WordPress sites & plugins. Also good in troubleshooting, fixing & making any kind of tweaks for WP site.

More Posts

POSTED ON: Wordpress Support, Wordpress Tricks
TAGGED : , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *