What is the best way to ensure that an iframe adjusts its height to fit the content within a tabbed container?

Is there a way to dynamically set the height of an iframe to match the content inside it when clicking on a tabbed plane? Initially, I used a fixed height of 1000px. How can this be achieved?

<div class="container-fluid text-center">    

<div class="col-sm-12" style="margin-top:120px">

<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="pill" 
href="#projectOverview">OVERVIEW</a></li>
<li><a data-toggle="pill" href="#projectPosts">POSTS</a></li>
<li><a data-toggle="pill" href="#projectThreads">THREADS</a></li>
<li><a data-toggle="pill" href="#projectMembers">MEMBERS</a></li>
<li><a data-toggle="pill" href="#projectTasks">TASKS</a></li>
</ul>

</div>

<div class="tab-content col-sm-12">
<div id="projectOverview" class="tab-pane fade in active">
    <iframe  src="projectOverview.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectPosts" class="tab-pane fade">
  <iframe  src="projectPosts.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectThreads" class="tab-pane fade">
  <iframe  src="projectThreads.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectMembers" class="tab-pane fade">
 <iframe  src="projectMembers.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
<div id="projectTasks" class="tab-pane fade">
  <iframe  src="projectTasks.jsp" name="iframe" style="width:100%;height:1000px; border: 0px">   
</iframe>
</div>
</div>

</div>
javascriptjqueryhtmlcssweb

Answer №1

If you want to access the content body of an iframe, one way to do it is by using the code this.contentWindow.document.body (assuming both domains are the same and there is no sandboxing). You can then execute a function like this:

$('iframe').on('load', function() {
     $(this).css('height',
         this.contentWindow.document.body.offsetHeight + 'px');
 });

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

Using Object Values and Subvalues to Assign Element Attributes in jQuery

I have a weekly schedule that I update regularly using a static table layout: <table> <tr class="live gm fsp"> <td>Oct. 7</td> <td>12:30 pm</td> <td class="prog">Show 1</td> <td>Team ...

javascriptjqueryhtmljsonobject

The grayscale effect is not functioning on the default web browser of an Android device

I have implemented a grayscale effect for an image using the following CSS code snippet: img.grayscale { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\&apo ...

androidhtmlcsssvg

jQuery Charset Grid

Currently, I am utilizing a jQuery Grid to present data written in Spanish. The data appears correctly with accents ( ´ ), but when attempting to search for data using accents, the server receives a corrupted string like ∫√ instead of the accented let ...

jquerycharacter-encodingstruts2-jqueryjqgrid

Assign an AJAX call to retrieve data from a MySQL table and store it in a

In my database, I have a table that includes fields for 'user_name' and 'user_round'. My goal is to set the 'user_round' field to match the value of a JavaScript variable called 'Level'. However, when I run my code, ...

javascriptjquerymysqlajax

Is there an alternative to using CSS units of measurement when using the .css() method?

Is there a way to use .scrollTop() and .css() to adjust the margins of an element so that it floats up only when the page is scrolled, but stops at a certain margin value? I want the element to float between specific values while scrolling. The issue I am ...

jquerycss

Is there a way to pass a variable from a Django view to an HTML page using Ajax when the user presses a key

I am developing an application that delivers real-time data to users in HTML, and I aim to dynamically update the paragraph tag every time a user releases a key. Here is a snippet of my HTML: <form method="POST"> {% csrf_token %} <p id="amount_w ...

pythonhtmldjangoajax

Creating a dynamic menu structure by tailoring it to the specific elements found on each page

Currently, I am facing issues while attempting to generate a dynamic menu based on the elements present on the page. Is there a way to develop a menu using the following code structure?: <div class="parent"> <div class="one child" id="first"& ...

javascriptjqueryhtml

"Utilizing JSON data to implement custom time formatting on the y-axis with AmCharts

Looking to convert minutes to hh:mm:ss format in my JavaScript code var allDataTime = [{ date: new Date(2012, 0, 1), "col": "LONG CALL WAITING", "duration1": '720', "duration2": '57', "duration3": ...

javascriptjqueryangularjssvghtml5-canvas

Tips for implementing daterangepicker js in an Angular 2 project

I'm currently working on an Angular 2 project and I'm looking to integrate the daterangepicker.js library for a date range picker. If you're not familiar with it, you can find more information about the library here. Here's the HTML co ...

javascriptangulardate-rangedaterangepicker

Issues with d3.js transition removal functionality not functioning as expected

Having an issue with a d3.js visualization that involves multiple small visualizations and a timeline. When the timeline changes, data points are supposed to be added or removed accordingly. Here is the code snippet responsible for updating: var channels ...

javascriptd3.js

What is the best way to display converted value in Angular 8?

In my current project, I am utilizing .NET Core 2.2 for the backend and Angular 8 for the frontend. The scenario involves having integer values on the backend within a specified range. For example: [Required] [Range(1073741824, 1099511627776)] // ...

javascriptc#angulartypescriptasp.net-core

Encountering a Node.js issue when attempting to properly sanitize data before inserting it into MySQL

This is a snippet of code that I am using to insert data into a MySQL table. Before running the query, I escape the values like so: const mysql = require('mysql'); const R = require('ramda'); class Repository { constructor(connectio ...

javascriptmysqlnode.js

Tips for applying a class to two elements when a checkbox is clicked and avoiding duplicated URL strings

Issue with Checkbox Selection In my project, I have implemented two tabbed containers for grid and list view. Each container contains multiple elements called info boxes with checkbox inputs. Whenever a checkbox is checked, the background color of the res ...

jqueryhtmlcss

Cannot add padding to the DIV element

Here is some HTML and CSS code that I've provided. .x{ border-bottom: 1px solid #000; } .y { border-bottom: 1px solid #000; } .z li{ display: inline; padding-top: 50px; } <div class="x"> <br> <br> <b ...

htmlcss

Coding with a combination of JavaScript, AngularJS, and manipulating brackets

I am currently performing the following action: myArray.push(pageCount); After that, I end up with something like this: $scope.myArray = Pages.getAllPageCount(); Finally, when I utilize AngularJS to display it in my .html file. {{myArray}} If there i ...

javascriptangularjs

Breaking down a intricate JavaScript expression in order to reformat it into a different structure

As I explore the task of refactoring a legacy application, I find myself faced with complex JavaScript expressions stored in a database column. These expressions contain validation and conditional rendering logic that need to be translated into structured ...

javascriptc#jsonparsing

Difficulty displaying SVG in Opera browser when using the Raphael JS library

Currently, I am experimenting with Raphael JS to create visually appealing SVG graphics on a webpage. You can view my progress at . Most browsers display the graphics properly except for Opera 11. In Opera, the graphics fail to render when clicking on any ...

csssvgoperavisibilityraphael

What is the best way to export multiple modules/namespaces with the same name from various files in typescript within index.d.ts?

I am currently in the process of creating a new npm package. I have two TypeScript files, each containing namespaces and modules with the same name 'X'. At the end of each file, I declared the following: export default X; My goal is to import bo ...

javascriptangulartypescriptnpmexport

Top tips for data manipulation

I am facing an issue with my JavaScript code that makes an ajax request to the server and receives JSON data, which is not correctly formatted for array-based manipulation. A colleague suggested a client-side solution to convert object-based JSON into arra ...

phpjavascriptjsonstandardsdata-manipulation

What is the best way to manage variables that are not present in a Vue.js template?

When working with vue.js templates, I often come across instances like this: {{ jobs[0].stages[0].node.name }} If a job has no stages, the entire template fails to load and vue.js admin throws this warning: Error in render: "TypeError: Cannot read prope ...

javascriptvue.js