Looking for an iframe that can adapt to varying content sizes and scale seamlessly with different screen dimensions?

I am new to advanced coding and currently working on my first responsive Wordpress site. I have a "Product Search" database/site that I'm trying to integrate into my website using an iFrame. I want the integration to look seamless without scroll bars around the frame.

You can see the page for reference here:

I am facing two problems:

a) The iFrame is not adjusting dynamically based on the content within it. Since the content varies on each "page" of the database, setting a fixed frame height cuts off the content at the bottom.

b) The iFrame and its content are not responsive to different screen or window sizes. For example, when viewing the Parent Page on a mobile device, the iFrame (and content within) gets cut off.

I need a dynamic iFrame that adjusts to its content and is responsive to different device screen/window sizes. I don't have much coding knowledge, so I would greatly appreciate detailed instructions on how to fix this issue.

Below is the code I've used for the iframe on the linked page:

<iframe id="espweb" src="http://alwayzinc.espwebsite.com/" height="1700" width="100%" frameborder="0" scrolling="no"></iframe>
javascripthtmlcssiframe

Answer №1

This code snippet demonstrates a way to create responsive iframes without the need for JavaScript: View Fiddle

Here is the HTML:

<div class="fluidMedia">
<iframe src="http://www.example.com" frameborder="0"></iframe>
</div>

And here is the CSS:

.fluidMedia {
position: relative;
padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
padding-top: 30px;
height: 0;
overflow: hidden;
}

.fluidMedia iframe {
position: absolute;
top: 0; 
left: 0;
width: 100%;
height: 100%;
}

Credit for this technique goes to Michael Lancaster

To ensure responsiveness, the content within the iframe must also be designed to be responsive. This means modifying the source file being loaded into the iframe to adapt its elements accordingly, just like example.com does in the provided fiddle.

Answer №2

To dynamically adjust the height of an iframe, you can include the following code in the parent frame:

<script type="text/javascript">
window.onload = function(){
  resizeFrame(document.getElementById('webframe'));
};
function resizeFrame(frame) {
  frame.style.height = frame.contentWindow.document.body.scrollHeight + "px";
}
</script>

When the parent frame's body loads, it accesses the child frame's document element and calls a function called resizeFrame. This function sets the frame's height to match its scrollHeight. I hope this information proves useful to you.

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

How can I ensure that Mongoose is case sensitive?

Currently, our authentication system is case sensitive for the email input. However, I would like to make it case insensitive. Here is the function in question: Auth.authenticate({ email, password }) Auth represents a mongoose Model that stores users in ...

javascriptnode.jsmongodbmongoose

Encountering an issue while attempting to extract an ACF field in WordPress using JavaScript

When I write the following code, everything works fine: <script> $(document).ready(function(){ var user_id = '<?php echo get_current_user_id(); ?>'; // This is working var subject = "<?php echo the_field('subject ...

javascriptjquerywordpressadvanced-custom-fieldsuserid

Discovering a website's console content using the "web-request" npm package

I recently added the web-request NPM package to my project with the goal of retrieving console messages from a specific website. However, I encountered an issue as I was unsure of how to achieve this. var result = await WebRequest.get('http://disco ...

javascriptnode.jsnpmnpm-package

Having trouble retrieving a value from the $http promise, causing the code within the then() function to not run as expected

In the past, I encountered a challenge with the $http service which I managed to solve by creating a dedicated service for handling my requests. However, as my requests grew larger, this solution started to seem inefficient. Instead of just assigning a sim ...

javascriptangularjspromiseangularjs-serviceangular-promise

Creating an HTML Table with Database Data utilizing JSP, Java, and JavaScript

Challenge: I am currently tasked with developing a web application for a university course using JSP, Java, Javascript, and JQuery without relying on any external frameworks or libraries. The main goal is to create a calendar-like table that displays cours ...

javascriptjavajquerymysqljsp

Discord between Bootstrap tabs and C3 charts: A Compatibility Str

On my website, I have implemented Bootstrap navigation tabs that each contain a chart. The issue I am facing is that when I navigate to the home page, the chart in the active tab displays perfectly fine. However, for the other tabs, the charts overlap with ...

javascriptjqueryhtmlcssc3.js

Ways to minimize excessive gap between two columns in Bootstrap

How can I reduce the space between two form-groups without moving the email address field with CSS left margins? When I try to make the first column smaller, it automatically wraps to the next line, but I want the email address to be closer to the phone ex ...

htmlcsstwitter-bootstrap

What is the best way to retrieve state from a selector after refreshing the page?

In my React JS boilerplate code, I have a container component that retrieves data (such as a list of schools) using sagas into a reducer. The state set by the reducer is then read by a selector function on the render page to display to the user. Sample ...

javascriptreactjsreduxredux-sagaselectors-api

Transform date format using VueJS in JavaScript

I need to convert a date format from 19 Oct 2017 to 20171019. Is there a way to do this quickly? I am using FlatPickr in VueJs. Here is the code snippet for reference: import flatPickr from 'vue-flatpickr-component'; import 'flatpickr/dist/ ...

javascriptdatevue.jsflatpickr

Establish a secure connection to MySQL through SSH tunneling with node-mysql

Is it feasible to establish a connection to the MySQL server using an SSH key instead of a password when utilizing the node-mysql npm package? ...

javascriptmysqlnode.jsnpm

Is an Ajax powered loading feature used in transitions between pages?

I recently came across this interesting website: It appears that they have implemented a clever technique where new content is dynamically loaded using AJAX, giving the impression of seamless navigation. Additionally, they have succeeded in hiding the bro ...

javascriptjqueryajax

Is it possible to link fields with varying titles in NestJS?

Currently, I am developing a NestJS application that interacts with SAP (among other external applications). Unfortunately, SAP has very specific field name requirements. In some instances, I need to send over 70 fields with names that adhere to SAP's ...

javascriptnode.jstypescriptnestjs

Retrieve information from a JSON document

My project involves a bookStore with a list of books that I am working on. I am trying to extract all the book data from a JSON file and display them in a card view on a webpage. Although my code is error-free and seems to be functioning properly, the da ...

javascripthtml

PHP and Ajax do not $_POST the selected option value in <select>

I have implemented a system with two dropdown menus, one of which utilizes AJAX to fetch data from the database and present partial results on the page. Despite successfully submitting other input text (machine_no), I am encountering difficulties in postin ...

phpjqueryhtmlajax

Require checkboxes in AngularJS forms

Currently, I have a form that requires users to provide answers by selecting checkboxes. There are multiple checkboxes available, and AngularJS is being utilized for validation purposes. One essential validation rule is to ensure that all required fields a ...

javascripthtmlangularjscheckbox

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

javascripthtmlcss

Switch up the CSS file based on the URL route

My project consists of the following files: App.vue, changcolor.vue, config.json, main.js, index.html, xyz.css, abc.css. I need a solution where based on the URL, the appropriate CSS file is applied. For instance, if the URL is "xyz.local.com" then xyz.cs ...

javascriptnode.jsjsonvue.jswhite-labelling

Your search parameter is not formatted correctly

I am currently working on filtering a collection based on different fields such as name by extracting the values from the URL parameters. For example: http://localhost:3000/patient?filter=name:jack I have implemented a method to retrieve and convert these ...

javascriptjsontypescriptmongodbexpress

Jquery refuses to load

Hey everyone! I'm currently working on an HTML file for my Angular 2 course. After setting up the dependencies and downloading them with npm, I encountered an error when trying to run the app... The error message I received was: file:///Users/Rocky/A ...

javascriptjqueryangularjsnode.js

Interacting with a 3D model using the mouse cursor in a three

After stumbling upon the three.js library recently, I've been spending several days experimenting with it. I am eager to incorporate a mouse event into my project similar to this example where the head of the skull follows the cursor. However, I want ...

javascriptthree.jsmouseevent3d-model