Fancybox PDF issue in Firefox

Question

I have Fancybox set up so that when a user clicks on a pdf link it displays the pdf in a pop up, however in Firefox it asks if you want to save or open the file and I don't want this. How can I force the pdf to be display in the fancybox popup? It works in Safari.

<a class="pdf" href="http://www.test.co.u.uk/test.pdf">test.pdf</a>

$(".pdf").fancybox({
   'width' : '700',
   'height' : '700',
   'autoScale' : true,
   'transitionIn' : 'none',
   'transitionOut' : 'none',
   'type' : 'iframe'
});

score 2 · Accepted Answer · answered Jan 10 '12 at 21:36

Personally, I would just use Google Docs to display the PDF in an iframe. It automatically resizes the PDF to match the iframe dimensions. Here is the format to use:

<iframe src="http://docs.google.com/gview?url=http://samplepdf.com/sample.pdf&embedded=true" style="width:100%; height:100%;" frameborder="0"></iframe>

You don't need flash or any other plugins.

Blynn · Answer 2 · 2012-01-11T16:49:33.360

0

I would convert the PDF file to HTML, or try to turn the PDF into an image.

I had this issue but I wasn't able to change my server settings to display PDF files instead of prompting them for download.

There is also variations between browsers the way they read PDF files.

edited Jan 11 '12 at 16:49

answered Jan 10 '12 at 16:35

Blynn

1,411
7
27
48

score 0 · Answer 3 · answered Jan 10 '12 at 18:04

0

Unless the user has a plug-in that renders PDF installed, the PDF won't render inline in Firefox. It's just not a format Firefox natively supports at the moment.

answered Jan 10 '12 at 18:04

Boris Zbarsky

34,758
5
52
55

score 0 · Answer 4 · answered Jan 10 '12 at 18:06

Most likely, you don't have the pdf plugin installed in Firefox or the plugin just crashed.

In Firefox, go to Tools --> Add-ons -->Plugins and look for Adobe Acrobat PDF plugin in the list. If isn't there, check this to learn how to install it (or re-install it).

Additionally, there is a better way to open PDF files with fancybox other than iframe, so for this html:

<a class="pdf" href="http://www.test.co.u.uk/test.pdf">test.pdf</a>

you can use this script:

$(document).ready(function() {
 $(".pdf").click(function() {
  $.fancybox({
   'width': '70%', // or whatever
   'height': '90%',
   'autoDimensions': false,
   'content': '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
   'onClosed': function() {
     $("#fancybox-inner").empty();
   }
  });
  return false;
 }); // pdf 
}); // ready

I recommended this method for Fancybox v1.3.x since May 2010

Please notice that I set height="99%". If you use HTML5 DCTYPE, it will avoid a double vertical scroll bar. This is because HTML5 initializes margins.

UPDATE. BTW, integer values go without qoutes so

'width' : '700',
'height' : '700',

should be

'width' : 700,
'height' : 700,

It will save you some headaches,mostly with IE

Fancybox PDF issue in Firefox

4 Answers4

Linked