1

In my project i had a side menu(left). OnClick of each Button in menu a pdf should be loaded in middle of my page(i.e., in a div).I am able to load a pdf in middle of my page(div),but not on click of my menu Buttons. iframes should not be used in my project.please help me out

Here is my code(sample code) on click of menu items the pdf should load in div class="col-sm-9 col-md-10"

<div class="col-sm-3 col-md-2 sidebar">

 <ul class="nav nav-sidebar">
                <li style="padding-left:1em;"><h4>MENU</h4></li>
                <li class="active"><a href="shows.aspx" class="user-icon">TV Shows</a></li>
                <li><a href="history.aspx" class="sub-icon">History</a></li>
                <li><a href="#" class="menu1">Movies</a></li>
                <li><a href="#" class="menu">Sports</a></li>
                <li><a href="shows.aspx" class="user-icon">TV Shows</a></li>


<div class="col-sm-9 col-md-10">

Aarthi
  • 11
  • 4
  • 2
    Can you include the code that you already made? – Seb Sep 06 '17 at 13:18
  • sure u can see it above.i included in my div class using this i am able to load pdf in a div.but i want to load a PDF on click of my menu Buttons.Guide me – Aarthi Sep 07 '17 at 12:22

3 Answers3

1

Your div should have object tag embedded i.e

<div class="col-sm-9 col-md-10">
   <object data="#" type="application/pdf" width="100%" height="750">
        alt : pdf not loaded yet
   </object>
</div>

Then after the onclicked of the menu, you then change the data="" in the object tag to your specific pdf source i.e

$(".menu, .menu1").on("click", function(){
    $("object").attr('data', 'your-pdf.pdf');
 });

you can decide the logic at which you want to show your pdf base on the menu the above script would get you started.

Benjamin
  • 7,055
  • 6
  • 40
  • 60
Yusuf Sanusi
  • 23
  • 1
  • 6
0

You can most likely use the <object> tag. You may have to have one tagged and reconstruct it on a click using javascript.

I can't really provide more specifics without knowing how you're project is layed out.

Here's a more fleshed out stackoverflow answer

devoxel
  • 76
  • 1
  • 5
0

$(document).ready(function() {
    $("a[href$='.pdf']").each(function(){
        $(this).attr('href', 'http://docs.google.com/viewer?embedded=true&url=' + $(this).attr('href'));
    });

    $("a[href$='.doc']").each(function(){
        $(this).attr('href', 'http://docs.google.com/viewer?embedded=true&url=' + $(this).attr('href'));
    });

});

$(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    iframe : {
        preload: false
    }
});
<a class="fancybox" data-fancybox-type="iframe" href="http://www.irs.gov/pub/irs-pdf/fw4.pdf">Test PDF</a>

<a class="fancybox" data-fancybox-type="iframe" href="www.snee.com/xml/xslt/sample.doc">Test Doc</a>
Raguvaran R
  • 177
  • 1
  • 12