Scrolling pdf in a frame

Question
1

Does anyone have any idea how to do this in Sparkle (or something similar). If you click on the first Ofted report, it opens in a scrollable window/frame with options to download or print.

https://twyfordacademies.org.uk/key-documentation/reports

2

If you want to go the iFrame route, you can use the code below - just paste it into an embed object on your sparkle page:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Viewer</title>
</head>
<body>

<iframe src="your-pdf-file.pdf" width="100%" height="600" scrolling="yes"></iframe>

</body>
</html>

You would specify the full path and name of the pdf file (preferably a file that you’ve already uploaded to your hosting server if you want to preview the result in Sparkle). You can also set the height of the iFrame. If you leave the width at 100%, the iframe will display at the placed width of the embed object on your page. Your PDF can be single of multipage. Long documents can be scrolled using a mouse wheel over the iframe. If you want print or download options, you’ll have to provide links on the page to do that.

3

Thanks @francbrowne. I’ll give this a go. Does it work on mobile too? Probably not!

4

It will work on mobile, but if you want it to work on desktop and mobiles, But some mobiles won’t display the iframe content

<iframe src="your-pdf-file.pdf" width="100%" height="600" scrolling="yes"></iframe>

Edit: Above code amended to reflect the advice of @duncan in his `post below.

5

Thanks for this. I’m not a coder so don’t really understand much of what is going on here. The mobile version only displays the first page and also scrolls laterally as it’s too big to fit in iFrame. I have played %s etc but doesn’t make a difference.

6

The code I’ve supplied you will display the iFrame on a mobile device, but most mobiles will replace the PDF content with an ‘Open’ button. This will allow the user to open the pdf and view it in an installed PDF reader. You can see what happens by opening THIS link. Check it on a mobile device and see what happens. An alternative option would be to have the embed object only display on desktops, and have a PDF link on the mobile version of the page.

7

Doesn’t work in Safari - no open button and pdf is still scrolling sideways and only one page. It’s not that important as you’re right, just give a different option on mobile version. But thanks for your input anyway. Much appreciated!

8

Actually the code embed should not include the <html> or <head> or <body> tags, that confuses browsers and essentially messes with Sparkle’s coding (for example the viewport is taken from the embed code because it comes later).

Just the iframe tag is sufficient, prefixed by a style tag if needed.

1 Like