Showcase a Pair of Files Next to Eachother using HTML

I am a beginner with HTML and I am trying to accomplish a seemingly simple task. I have searched for similar questions and attempted the solutions provided, but none have worked for me.

My goal is to have two documents displayed side by side on a web page when a link is clicked. These documents are stored remotely and are not static. One is a PDF file, while the other is an image. I believe the PDF file may need to be embedded with a scroll bar?

Currently, both documents are displaying, but the second document (image) is overlapping the first at the center of the screen.

The code I am using is as follows:

<a href="#" onclick="lightbox_open();"><b>Click me to view files</b></a>

<div id="light">
<a href="#" onclick="lightbox_close();">
<embed src="?php echo $address ?>" style="float: left;" />
<img src="<?php echo $address2 ?>" style="float: left;" />
</a>
</div>

<div id="fade" onclick="lightbox_close();"></div>

<div>

**Please note that the lightbox_open() and lighbox_close() functions are used to dim the screen when the documents are displayed.

Any assistance with this issue would be highly appreciated.

Answer №1

Code remains unchanged, only the iframe has been replaced with an embed.

<style> html,
body {
  width: 100%;
  height: 100%;
}
#doc1,
#doc2 {
  display: inline-block;
  width: 49%;
  height: 100%
}
embed {
  width: 100%;
  height: 100%;
  border: none;
}
#doc1 {
  background-color: red;
}
#doc2 {
  background-color: blue;
}
<html>

<head>
</head>

<body translate="no">

  <div id="doc1">
    <embed src="http://www.pdf995.com/samples/pdf.pdf"></embed>
  </div>

  <div id="doc2">
    <embed src="http://www.pdf995.com/samples/pdf.pdf"></embed>
  </div>
</body>

</html>

The iframe will not be visible here because this snippet in stackoverflow is already within an iframe, and iframes cannot be loaded within another iframe.

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

Utilizing custom links for AJAX to showcase targeted pages: a beginner's guide

I am putting the final touches on my website and realized that it may be difficult to promote specific sections of the site because the browser address never changes. When visitors click on links, they open in a div using Ajax coding. However, if I want to ...

What is the mechanism by which a custom hook, functioning as a trigger, initiates the re-rendering of a separate function component?

According to the official documentation on Custom React Hooks, one particular use case for utilizing a custom hook is demonstrated through the following example: function FriendListItem(props) { const isOnline = useFriendStatus(props.friend.id); retur ...

Unable to access client's channels cache with empty parameters

In my quest to locate the guild and then channel within that guild, I have employed the following code snippet: const guild = client.guilds.cache.find(guild => guild.name === "bla bla bla"); const channel = guild.channels.cache.find(ch => c ...

When using Nuxt JS and Jest, a warning message may appear stating "[Vue warn]: Invalid Component definition" when importing an SVG file

I am facing a unique issue only in my Jest unit test where an error occurs when I import an SVG into the component being tested: console.error node_modules/vue/dist/vue.common.dev.js:630 [Vue warn]: Invalid Component definition: found in -- ...

The delete function is not functioning

I need help with implementing a custom Angular directive that includes a delete button to remove itself. When I click the button removeMe, it is not deleting an item from the array. Any suggestions on what might be causing this issue? HTML: <button t ...

Mastering Typing for Enhanced Order Components using Recompose and TypeScript

I have been working on integrating recompose into my react codebase. As part of this process, I have been experimenting with getting some basic functionality to work. While I have made progress, I am uncertain if I am following the correct approach for usi ...

Tips for preventing duplicate properties in Material UI when using React JS

Incorporating components from Material-UI, I have designed a form where the state of inputs is controlled by the parent component. However, I encountered an error stating "No duplicate props allowed" due to having multiple onChange parameters. Is there a w ...

The "Location..." header always points me back to the same destination

Hope you're all doing well. I've been having some trouble with using header("Location...") to redirect from one page to another on my website. For some reason, it keeps redirecting me back to the same page. I've gone through my code multiple ...

Troubleshooting problem with ion-input in Ionic 3 regarding the keyboard issue

Issue with Keyboard Overlaying Button In my ionic3 app, I am facing an issue where the keyboard overlaps the "Registrarse" button when it is open, as shown in the image. The button is positioned at the bottom of the ion-content using CSS rules such as pos ...

How to assign a value to an array within a form in Angular 8

I'm facing an issue with my Angular 8 edit form that utilizes a form array. When I navigate to the page, the form array is not populated with values as expected. Can anyone help me identify and solve this problem? ngOnInit(): void { // Fetc ...

Experiencing issues utilizing vue.js to retrieve information from a REST API

Using vue.js, I am attempting to fetch data from a rest api but encountering issues. Unfortunately, the response data is not being displayed and no error status is shown either. It's puzzling trying to identify what may have gone wrong. Below is my i ...

angular-bootstrap-mdindex.ts is not included in the compilation result

Upon deciding to incorporate Angular-Bootstrap into my project, I embarked on a quest to find a tutorial that would guide me through the download, installation, and setup process on my trusty Visual Studio Code. After some searching, I stumbled upon this h ...

Some models showcase crisp textures with Thee.js, while others appear hazy (especially custom designs)

As a beginner in the realm of Three.js, I have been following a tutorial on texturing custom geometric shapes. The tutorial used a classic head OBJ file as a test case, which worked perfectly fine. However, when I tried to tweak the script to render my own ...

Looking for a speedy solution with a [PHP function] that needs to be converted to a [JavaScript function

Looking for a quick favor - can anyone help me out with this: static function make_url_safe($z){ $z = strtolower($z); $z = preg_replace('/[^a-zA-Z0-9\s] /i', '', $z); $z = str_ireplace(' ', '-', $z) ...

Attempting to extract the class name of a tr tag but receiving a result of 'undefined'

I'm struggling to retrieve the class name from a specific <tr> tag. <table cellpadding=5 cellspacing=5> <tr id='cat_abc123' class='class_a'> <td>foo</td> <td><input type=& ...

Understanding how much of a video stream has been viewed by a user using PHP

I am currently involved in a project that involves displaying video advertisements to users, and after 60 seconds, users are presented with a link. My supervisor wants to ensure that users watch the entire 60 seconds of the video. I am now wondering if th ...

Ways to capture the value of several images and add them to an array

When working on a multiple file upload task, I encountered the need to convert images into base64 encoded strings. My form consists of two fields, one for first name and another for image upload. The user can enter their name, upload multiple photos, and c ...

Creating a mobile-friendly table that remains within a specific width on smaller screens (CSS)

Ensuring consistency across all tables on my website is crucial to me, which is why I am utilizing the same class for all of them. While everything appears perfect on desktop, I'm facing challenges when it comes to mobile responsiveness. The tables fa ...

Scrolling to the latest message in Vuejs when a new message is received

I am currently working on a chat application, but I am facing an issue with scrolling to the bottom when new messages are received. I have attempted both methods: document.getElementById('msg_history').scrollTop = document.getElementById('m ...

Utilizing React hooks to dynamically toggle a class within a component

While similar questions have been raised previously, none seem to address my specific issue. Most references involve class components that do not align exactly with what I am attempting to achieve. My goal is to toggle two components on and off with a simp ...