1

The requirement is that there are a couple of hyperlink on the left upon clicking the hyperlink I need to open PDF's on the right in a frame

(it can be a content editor or a page viewer etc.)

i placed two script editor (on the left and right, one to show hyperlinks another for the pdf).please see below for the code i have used

here i have loaded pdfs but hid all but the first one

<object class="pdfobject" id="1" data="https://he.sharepoint.com/sites/SiteOffices/PMMDetailsPDF/1.pdf?#zoom=85&scrollbar=1&toolbar=0&navpanes=1" width="800" height="800" type="application/pdf" /> 

here i created hyperlinks pointing to the same page and Jquery to show the pdfs.

Pdf1
Pdf1
Pdf1

$('.pdflink').click(function(){ $('.pdfobject').hide(); //Hide all pdf var objId = $('this').attr('objectid'); //Get pdf object element id from link $('#' + objId).show(); //Show respective pdf });
1

There are know issues with dynamically changing the source file path. Workaround you can try is by hiding and showing respective frame on clicking the link.

You can use jQuery or pure JavaScript to do this.

Adding link to Script Editor webpart as below

<object class="pdfobject" id="1" .... /> --This will be visible initially
<object class="pdfobject" id="2" style="display:none;"...
<object class="pdfobject" id="3" style="display:none;"...
....

Now you can handle the link

<a href="..." class="pdflink" objectid="1">Pdf1</a>
<a href="..." class="pdflink" objectid="1">Pdf1</a>
<a href="..." class="pdflink" objectid="1">Pdf1</a>
....

You can use below jQuery code

$('.pdflink').click(function(){
    $('.pdfobject').hide(); //Hide all pdf
    var objId = $('this').attr('objectid'); //Get pdf object element id from link
    $('#' + objId).show(); //Show respective pdf
});
  • so i have 20 pdf i can add all that using the method below and show or hide using javascript ? . Here is what i have done i had added a script editor and add the below code to show the pdf <object width="800" height="800" type="application/pdf" data="mydomain.sharepoint.com/sites/SiteOffices/DetailsPDF/…"> . should i add others one in the same way and hide the rest of them using javascript ? . sorry to ask ,can you show me one example to do so. I am not good with javascript – Rinu Aug 9 '16 at 11:21
  • @Rinu how big are the PDF files? If you place 20 pdf the page will load slowly. Have you thought about adding 20 page and link it? – Amal Hashim Aug 9 '16 at 12:12
  • all the pdfs are less than 1 mb some as small as 64 kb. It needs to be shown in one page. at the movement i added all the pdfs in one document library and open it using a script editor using the above code. The requirement is to show the links/buttons on the left and upon clicking the respective pdf shows on the right. – Rinu Aug 9 '16 at 12:16
  • sorry for beeing a bit ignorant and the delay . i have used the below code but it redirects and opens the pdf in the page itself – Rinu Aug 14 '16 at 9:48
  • 1
    All the a tag href should be # and not the actual links – Amal Hashim Aug 14 '16 at 10:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.