CODEWITHSUNDEEP
firefoxpdfpopupfancybox
green_arrow
green_arrow

Reputation: 1277

Fancybox PDF issue in Firefox

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'
});

Upvotes: 5

Views: 5326

Answers (4)

Blynn
Blynn

Reputation: 1411

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.

Upvotes: 0

Mottie
Mottie

Reputation: 86423

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.

Upvotes: 2

JFK
JFK

Reputation: 41143

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

Upvotes: 0

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

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.

Upvotes: 0

Related Questions