Disabling HTML PDF Viewer Object - html

Question

I have embedded a PDF viwer in my page and would like to disable the object in such a way that it's not possible to interact with it (no scrolling, no zoom in/out). My html object looks like this:
<div id="pdf">
<object width="650" height="500" type="application/pdf" data="./forms/my.pdf?#zoom=45&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content">
<p>PDF could not be loaded.</p>
</object>
</div>
Is it even possible to disable the object?

Answer 1

If your PDF is rendering as intended on page load and you simply want to prevent mouse interaction, you can cover it up with an invisible element like so with CSS:
#pdf {
position: relative;
}
#pdf::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(0, 0, 0, .3);
}
And per your request, a way to toggle this on/off (using jQuery):
$('#toggle').on('click', function() {
if ($('#pdf').hasClass('enable')) {
$('#pdf').removeClass('enable').on('mousedown scroll', function() { return false; });
$(this).text('Enable PDF Interaction');
} else {
$('#pdf').addClass('enable').off();
$(this).text('Disable PDF Interaction');
}
});
#pdf {
position: relative;
/* sizes for example since PDF won't load: */
width: 650px;
height: 500px;
}
#pdf::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 1;
background: rgba(0, 0, 0, .3);
}
#pdf.enable::before {
content: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">Disable PDF Interaction</button>
<div id="pdf" class="enable">
<object width="650" height="500" type="application/pdf" data="https://upload.wikimedia.org/wikipedia/en/d/dc/Convergent_Synthesis_Example.pdf" id="pdf_content">
<p>PDF could not be loaded.</p>
</object>
</div>