dynamically Resizing HTML element to show content of an iFrame

domphilcox

Hi Armin et al,

I’m having trouble figuring out how to dynamically resize an +HTML element to show the full content of an iFrame without scroll bars.

Searching the web, it seems that the only way to achieve this is by using Javascript. I’ve found a piece of code to do the job, but I’m unsure how to make it work correctly. I have no idea if the code will work with Laytheme or indeed if I have applied it correctly... any assistance you could give would be great appreciated.

Here’s the JS I have placed within the "Custom <head> content” section.

And here’s a link to the test page: https://zmr.eab.myftpupload.com/latest-jobs/

Again, any assistance you can give would be greatly appreciated.

Best wishes, D.

arminunruh

right click the html element in the gridder please, click "set html class and id"

for class enter:

dynamic-iframe

then the js code should be in Enter this css in "lay options" -> "custom css & html" -> "custom <head> content"

<script>
window.laytheme.on("newpageshown", function(){
	var $frame = jQuery(".dynamic-iframe iframe");
	if($frame.length > 0){
		// Adjusting the iframe height onload event
		$frame[0].onload = function() {
			// set the height of the iframe as the height of the iframe content
			frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px';
		}
	}
});
</script>

this should at least target the iframe html element

if the code to change the size works correctly, im not sure about that

arminunruh

other than that, you could simply set a size using css:

.dynamic-iframe iframe{
height: 600px;
}

domphilcox

Good man, thanks Armin. Taking the time to respond is very much appreciated.

Lay Theme Forum

dynamically Resizing HTML element to show content of an iFrame

Before you post:

When you post:

Online Users