Adjusting the height of an IFRAME on the fly

One solution to dynamically fix the height issue of Google Trend charts is by modifying the code output. An example of this can be seen in the code snippet below:

<iframe width="600" height="320" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=css-showcase&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=600&h=320" style="border: none;"></iframe>

<hr>
first contents

<hr>

<iframe width="600" height="320" src="http://www.google.com/trends/fetchComponent?hl=en-US&q=html5&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=600&h=320" style="border: none;"></iframe>

<hr>
second contents

Check out the code on jsFiddle for more information: http://jsfiddle.net/yzw8Y/

javascriptjqueryhtmlcss

Answer №1

I haven't had the chance to try it out, but it looks promising.

function adjustFrameHeight(id)
{
   var newHeight;
   newHeight = document.getElementById(id).contentWindow.document.body.scrollHeight;
   document.getElementById(id).height = newHeight + "px";
}

<iframe id="dynamicFrame" onload="adjustFrameHeight('dynamicFrame')" ... >

Answer №2

assign an identifier to an iframe element

then use jQuery to specify the height

$('#iframeID').css('height','800px');

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

Retrieve an item from an array based on the unique ID value of the button that was clicked using

I am working with a phones array that is populated with JSON data: var phones = [ { "age": 0, "id": "motorola-xoom-with-wi-fi", "imageUrl": "img/phones/motorola-xoom-w ...

javascriptjqueryjquery-events

Tips for extracting data from a JQuery table with Python

My goal is to extract information from the top ten items on a manga website using Python Selenium/BeautifulSoup. However, I am facing challenges due to the website loading its content through a jquery script. The tutorials and guides I have followed do not ...

javascriptpythonjqueryseleniumweb-scraping

The conundrum of nested function wrapping in Typescript and its impact on

Upon calling the following function, it returns a Promise<boolean>: const fnc = (i:number) : Promise<boolean> => Promise.resolve(true) // Promise<boolean> const res1 = errorHandler(errorPredicates.sdkError1, fnc, null, 4); However, ...

javascripttypescripttypescript-typingstypescript-generics

Creating an Online Store with Python and Django for Server-side Development

Looking to create a dynamic E-commerce platform with Bootstrap, HTML, CSS, and JavaScript for the frontend, along with Python, Django, and MongoDB for the backend. Can someone provide me with step-by-step guidance on crafting code files for each language a ...

pythonhtmldjangobootstrap-4

PhpStorm flawlessly detects ES7 type hinting errors

For my project, I have implemented TypeScript. While JavaScript's array includes() function has been valid since ECMA6, setting the lib parameter in tsconfig to "es6" results in a non-fatal error being thrown in the browser console when using the foll ...

javascripttypescriptphpstorm

The connection between ng-model and ng-repeat, and the comprehension of $scope

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="customersCtrl"> <ul& ...

javascriptangularjs

How can I modify this code to be more responsive using float or relative positioning without introducing any errors?

I'm currently struggling to create a responsive web page that adjusts to any screen size automatically. Here is the code I have so far, including both HTML and CSS. What changes can I make to ensure the elements are properly placed regardless of the s ...

htmlcss

Provider injection is not possible

Angular Dashboard Creating a dashboard application on Angular 1.6 has been quite the journey. I've defined two static ui.router states within the app - 'home-dashboard' and 'other-dashboard' to register the dashboard components. ...

javascriptangularjsangular-ui-router

Adding elements to a JSON array in Javascript

Seeking assistance on updating a JSON array. var updatedData = { updatedValues: [{a:0,b:0}]}; updatedData.updatedValues.push({c:0}); This will result in: {updatedValues: [{a: 0, b: 0}, {c: 0}]} How can I modify the code so that "c" becomes part of ...

javascriptarraysjson

Ways to superimpose images

Everything seems to be functioning correctly in my code, but I would like the output images to overlap slightly. This could possibly be achieved using margins, padding, or some other script. Additionally, is there a way to incorporate z-index so that the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Making the Bootstrap 4 card-footer expand to occupy the remaining height of the column

I'm currently developing a project that incorporates bootstrap cards. There are 3 cards, each for a different column, and I need them to have equal heights. Here is how they currently look: https://i.sstatic.net/Nau98.png The B and C cards should oc ...

htmlcssbootstrap-4

Implementing a PHP button update functionality sans utilizing an HTML form

I need a way to update my database with just a click of a button, without using any forms or POST requests. Most examples I've seen involve updating through forms and the $_POST method. Is there a simpler way to update the database by directly click ...

javascriptphpjqueryajax

Utilize the onClick Event to Trigger Function with an Array in ReactJS

Every time I attempt to pass an array as a value to a function by clicking on a div, I encounter the error below: Uncaught Invariant Violation: Expected onClick listener to be a function, instead got a value of object type. If passing an array to a fun ...

javascriptreactjs

I'm in the process of constructing a create-next-app and I need to retrieve data from a web API. However, I'm unsure of the best place to securely store the API key

I am working on building a create-next-app that will retrieve data from the News Catcher API and display it within my application. I have obtained an API key to access the News Catcher API. However, I am unsure of where to securely store the API key and h ...

javascriptreactjsjsonapinext.js

Can regular JavaScript objects contain jQuery objects?

Lately, I've been working on optimizing the code for a carousel I built. One idea I'm toying with is organizing all my variables and functions into a JavaScript object to keep them separate from the rest of the code in the file (which happens to ...

javascriptjqueryobject

Is CSS Transition smoothly easing in, but not out?

On the image gallery of this website , I have applied transitions to the images, where they ease in (fade in), but revert back to their original state instantly when the mouse moves off the image. Is there a way to make the transition reverse when the mo ...

htmlcss

javascript implementing optional chaining for a single parameter

Is it possible to implement optional chaining on a single parameter? setAllProperties( Object.values(users).flatMap(({ properties }) => Object.values(properties) ) ); I am looking for a way to ensure that the properties folder exists in ...

javascriptreactjs

Having troubles with PHP retrieving images from my server directory over here

My current code is designed to retrieve an image from my server and display it on my HTML page. However, the images are stored in an encrypted format using MD5 and do not have corresponding names in the table. To fetch the image, I am using the primary key ...

phphtmlmysql

Interested in leveraging string functions on the information retrieved from the API?

I am trying to utilize String functions such as slice(x,y), length() on the data received from the API. To achieve this, I first converted the data to a variable called mystr using JSON.stringify(obj), but encountered an issue where the console displayed: ...

javascriptjsonreactjsstringapi

My mongoose sort function doesn't seem to be functioning properly. What could be the issue?

Hey there! I've got a simple API up and running on Node.js, using MongoDB as my database with Mongoose for querying. The issue I'm facing is related to sorting data using the mongoose 'sort' method. Instead of behaving as expected, it s ...

javascriptnode.jsmongodbmongoose