Edinburgh Web Development

Displaying PDF files in popups

Some Jquery magic

by Iain Wilson

24 October 2013
pdf

Here's something for the developers out there.

Every needed to show pdf files in a popup window? We recently had a job where we had a webpage with a table and in each cell was a link to display a pdf.

Displaying a pdf is not like displaying a normal web page element such as an image.  A pdf file wants to take over the whole browser page, so to display it within a web page we need to use an iframe.

What we did was create a hidden div that contained an iframe, and when a link was clicked used Jquery and Javascript to change the iframe src value, then show the hidden div containing the pdf.

Sounds pretty straighforward, but the key to this is that you can't show the div until the iframe has loaded the latest pdf.  So here's the general code (simplified for clarity).

First we need the div containing the iframe.

<div id="modal"><iframe id="modalframe" src=""></iframe></div>

Then we need our click handler for the links in the table

$('table.matrix a').click (function(e) { 
  e.preventDefault();
  newSrc =$(this).attr("href");
  $('#modalframe').attr('src', newSrc);

As you can see, we're using the href tag to hold the name of the pdf file, stopping the default link behaviour, then changing the src value of the iframe to the pdf that should be displayed.

Now at this point, we could just show the #modal div, but if the pdf file is large or there is a load on the server, it will not have loaded yet, so we have to create a handler to wait until the pdf has loaded in the iframe:

$('#modalframe').on('load', function(){
  $("#modal").fadeIn(1000);
  $('#modalframe').off('load');
});
});

Note that we remove the handler after showing the div containing the pdf. If we didn't, we'd have multiple handlers going off once the viewer had clicked more than one line.

Browser History

Each time a link is clicked using the above code, the browser will add the link to its history.  You might want this, but equally you might not, because if you had say, 10 links each with their own pdf, and a user clicked all 10 links, if they then clicked the back button, it would go back through the pdfs.

So if you don't want the history, what you need to do is create the iframe dynamically.  Don't include it in your HTML, but create it in Javascript when the link is clicked, something like this :-

$('table.matrix a').click (function(e) { 
  e.preventDefault();
  newSrc =$(this).attr("href");
  $("#modal").append("<iframe src='" + newSrc + "'></iframe>");

You'll also need to remove the iframe each time the user closes the popup.

 

The above code is simplified for clarity; we actually loaded separate pages for each pdf, with the pdf being held in another iframe.   We wanted the links to be followed by the search engines and indexed independently.

Liked this article? Please share it with your friends and colleagues.


comments powered by Disqus
 
Blot Design,
10 Colinton Road, Edinburgh, EH10 5DT,
0131 208 1792
Terms, Cookies & Privacy