Display a PDF in a <div> when the menu is clicked

I have a project where I am trying to load a PDF in the middle of my page, inside a div, upon clicking on buttons in a side menu located on the left. While I have been successful in loading the PDF in the div, I am facing issues with triggering this action upon clicking the menu buttons. My project does not allow the use of iframes. Can someone please assist me?

Below is a snippet of my code. Upon clicking on the menu items, the PDF should be loaded in the 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">

javascripthtmlcsspdftwitter-bootstrap-3

Answer №1

To embed an object tag inside your div, follow these steps:

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

After clicking on the menu, you can change the data attribute in the object tag to specify your PDF source like this:

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

You have control over how and when to display your PDF based on the menu using the provided script as a starting point.

Answer №2

Perhaps consider utilizing the <object> tag for your project. It's possible that you might need to create one tagged and then rebuild it with javascript upon a click event.

Without more insight into the layout of your project, I'm unable to offer specific guidance.

For additional information, you may find this detailed Stack Overflow response helpful.

Answer №3

$(document).ready(function() {
    $("a[href$='.pdf']").each(function(){
        $(this).attr('href', 'http://viewdocs.com?source=true&doc=' + $(this).attr('href'));
    });

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

});

$(".fancybox").fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    iframe : {
        preload: false
    }
});
<a class="fancybox" data-fancybox-type="iframe" href="http://www.example.com/pdf-file.pdf">PDF Example</a>

<a class="fancybox" data-fancybox-type="iframe" href="www.example.com/doc-sample.doc">Doc Sample</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Attempting to access properties of undefined object (reading 'hash') has caused an unhandled TypeError

I've been working on a project to store files in IPFS and then record the hash on the blockchain. However, I encountered an error message while trying to upload the file to IPFS. Error Message: Unhandled Rejection (TypeError): Cannot read properties ...

javascriptreactjsipfsjs-ipfsipfs-http-client

Why does the font on my website appear altered compared to the font in the ttf/woff files?

This is an example of the font's appearance. Here's how the font appears in the .ttf file format. And this is the visual representation of the font on my website. #top { margin: 30px 30px 0px 150px; border: ...

cssfont-face

How to individually justify flex items in React Native?

I am looking to create a button with the text in the middle centered and an additional text pushed to the right, similar to this image: https://i.imgur.com/oNDeFJo.png I attempted to use the marginLeft property, but the react-native flexbox model behaves ...

javascriptreactjsreact-native

Ensure uniform height for images in the absence of specific dimensions

Is there a solution to ensure that images of different sizes have the same height on a card? The issue is that the content is dynamic and coming from a CMS, so I don't know in advance what the image size will be or how much text will be in the card. & ...

cssimagebootstrap-5image-size

numerous requirements for formatting utilizing Css modules

Can someone help me figure out how to set multiple conditions using a ternary operator to style an element with Css modules? I'm struggling to find the right syntax. Is it even possible? import style from './styles.module.sass' const Slider ...

cssreactjsnext.jsjsxcss-modules

Using a render target causes certain elements of my visual graphics to become hidden

Hey there, I've been experimenting with render targets lately and encountered some issues. I've put together a simplified example below: init = function() { // RENDERER canvas = document.getElementById("mycanvas"); renderer = new THREE ...

javascriptthree.js

Clicking on a button will allow me to select only a portion of text within a specific cell of

Inside a table, there is a paragraph of text enclosed in a <td></td> element. Take for example the following passage. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard ...

javascripthtmljquery

The instance is referring to "close" as a property or method during render, but it is not defined. Ensure that this property is reactive and properly defined

Upon my initial foray into Vue.js, I encountered a perplexing warning: vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "success" is not defined on the instance but referenced during render. Make sure that this property is reactive, e ...

javascriptvue.jsvuejs2

Filtering data on objects in Angular can be achieved by utilizing the built-in

Retrieving data from the backend using this function: private fetchData(): void { this.dataService.fetchData().pipe( tap((response: any) => { this.persons = response.results; this.familyMembersTrue = this.persons.filter(x =&g ...

javascriptangulartypescriptobjectfilter

A circle border-radius transforms into an ellipse when used with absolute positioning

I am facing an issue while trying to create a circular shape around a font awesome icon. Whenever I apply position: absolute, the circle distorts and turns into an ellipse. A similar problem occurs when I try using display: block. https://i.sstatic.net/F ...

htmlcsscss-positionfont-awesome

Obtain environment variables within a Strapi plugin

I am currently working on developing a Strapi local plugin, but I am facing an issue with retrieving variables defined in my .env file located at the root of my project. Specifically, I am trying to access this value within my React component (plugins/myPl ...

javascriptnode.jsreactjsstrapi

Utilizing JSON and select for dependency management

Let's say we have a JSON object: { "A": { "1": "1", "2": "2", "3": "3" }, "B": { "4": "4", "5": "5", "6": "6" }, "C": { "7": "7", "8": "8" } } And we also have ...

javascriptjqueryhtml

Ways to populate dynamic choices for multiple Select boxes within an ng-repeat loop

When I click the "Add Row" button on an Html form, dynamic rows are added. Each row contains a 'Country' select and a 'State' select. The issue I am facing is that when I select a country in one row, all other row values change as well. ...

javascripthtmlangularjsservicenow

Refresh tab URLs for dynamic tabs with jQuery UI

Utilizing jQuery UI dynamic tabs in my application requires updating the URL hash value when a user clicks on a tab. After researching solutions on SO, like link1 and link2, I attempted the following approach: Javascript: $( "#tabs" ).tabs({ select ...

jqueryhtmljquery-ui

While using .map() to display videos from an array, the button ends up playing all videos instead of only the selected

Within this component, I am presenting an array of YouTube videos utilizing react-player. The issue I'm facing is that when the custom play button is clicked, all videos in the array play and pause instead of just the selected one. I am currently uti ...

javascriptarraysreactjsuse-refreact-player

Unable to properly export the HTTP server for socket.io communication

I am facing an issue with my app.js const express = require('express'); const app = express(); const server = require('./server.js'); // app.use const io = require('socket.io').listen(server); io.on('connection', f ...

javascriptnode.jsexpresssocket.iohttpserver

Troubleshooting issue with applying Select2 class dynamically with JavaScript

When developing my web application, I faced a challenge of dynamically adding new rows to a table using JavaScript. The row contains a <select> element which loads data from the ViewBag for its <options>. Additionally, I wanted to apply the Sel ...

javascripthtmljqueryjquery-select2

The variablewidth feature in Slick Carousel is malfunctioning

I've integrated slick slider 1.8.1 into my Rails app (v.5.2.0) and I'm encountering an issue with variablewidth set to true. My expectation was to achieve a layout similar to the example shown here: https://i.sstatic.net/5QFRx.jpg However, what ...

jqueryhtmlcssslick.js

Utilizing CodeIgniter for Efficient AJAX Posting

I'm struggling to submit a post using the ajax post method. It appears that the request is being posted without any error messages, but the model doesn't seem to respond and insert the row into the database. While I'm not well versed in jQu ...

javascriptphpjqueryajaxcodeigniter

Begin by opening a single div for each instance

I want a functionality where opening one div closes all the others. I've searched around for solutions and only found jQuery options, not pure JavaScript ones. Here is my code: function openDescription(description_id) { var x = document.getEle ...

javascripthtmlcss