SharePoint 2020

The Vision for a Future of Clarity

Open all PDF files in Maximum Dialog Box

This code grabs any PDF file on the page and rather have them opening in the same window or a new window, they open conveniently in a SharePoint modal pop up dialog window.

All you need to do is:

1: Place the code below into a TXT or HTML file,

2: Upload it to a Document Library

3: Your could edit the file and change the path of JQuery to a local copy of JQuery1.9.1.min.js if required.

4: You could either reference the file path in a Content Editor Web Part.  eg: \sharepointserver\sites\sitecollection\subsite\scripts\pdfmaxdialogcode.html

or add the code to your Master Page in a .JS file . (Need help with this, post a comment below)

5: Open up a page where PDF files are located and test it out.

Fullscreen SharePoint Dialog

To see a preview of the result, refer to my previous post: https://sharepoint2020.wordpress.com/2013/02/15/how-to-open-a-pop-up-dialog-maximized-fullscreen/

This script was created by Alexander Bautz from http://spjsblog.com/

His post is located here: http://spjsblog.com/2013/05/31/open-pdf-files-in-a-maximized-dialog/

For redundancy, I’ll post the code here as well.

* After you Paste the code, you will need to remove the < code > < / code > tags from the script below, it’s the only way I can paste the code in WordPress without the Object tags being stripped out.
<!-- Put this code below the list view web part -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$("a[href$='.pdf']").each(function(){
$(this).removeAttr("onclick").attr("href","javascript:openPDFinDlg(\""+this.href+"\")");
});
function openPDFinDlg(href){
var o;
$("body").append("<div id='pdfTemp' style='min-height:600px;min-width:800px;height:100%;overflow:hidden'><<code>object</code> data='"+href+"' width='100%' height='100%' type='application/pdf' ></<code>object</code>></div>");
o = {};
o.html = $("#pdfTemp")[0];
o.showMaximized = true;
o.title = href.substring(href.lastIndexOf("/")+1);
o.dialogReturnValueCallback = openPDFinDlgCallback;
SP.UI.ModalDialog.showModalDialog(o);
}

function openPDFinDlgCallback(){
// do something here when the dialog closes
}
// ]]></script>

To enhance the display of PDF files to your site vistors

When dealing with PDF files, you can also add parameters from Adobe’s PDF Open Parameters documentation to the +href+ variable to present the PDF to your users.

Some examples of Adobe PDF Open Parameters:

The following table lists and describes the available PDF open parameters. Italics indicate user-specified variables.

page=pagenum
Specifies a numbered page in the document, using an integer value. The document’s first page has a pagenum value of 1.
zoom=scale
zoom=scale,left,top
view=Fit
view=FitH
view=FitH,top
view=FitV
view=FitV,left
view=FitB
view=FitBH
view=FitBH,top
view=FitBV
view=FitBV,left

Use the page command before this command.
pagemode=bookmarks
pagemode=thumbs
pagemode=none (default)
Displays bookmarks or thumbnails.
scrollbar=1|0
Turns scrollbars on or off.
toolbar=1|0
Turns the toolbar on or off.
statusbar=1|0
Turns the status bar on or off.
messages=1|0
Turns the document message bar on or off.
navpanes=1|0
Turns the navigation panes and tabs on or off.

for example: Within line 11, you can change this portion:

 data='"+href+"' width='100%' height='100%' type='application/pdf' 

to this

 data='"+href+"#page=1&view=fitV&pagemode=thumbs' width='100%' height='100%' type='application/pdf' 

For further documentation on Adobe Open Parameters see this link:

http://partners.adobe.com/public/developer/en/acrobat/PDFOpenParameters.pdf

* Possible issues: If the PDF link is located outside of your SharePoint server, the dialog window will display but the PDF may not.

Hope the code is useful for your site, thanks for reading.

June 3, 2013 Posted by | SharePoint 2010, SharePoint Designer 2010 | , , | Leave a comment