dynamically Resizing HTML element to show content of an iFrame
-
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.
<script>
window.laytheme.on("newpageshown", function(){
var frame = document.getElementById("Iframe");
// Adjusting the iframe height onload event
frame.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>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.
-
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
-
other than that, you could simply set a size using css:
.dynamic-iframe iframe{ height: 600px; } -
Good man, thanks Armin. Taking the time to respond is very much appreciated.
-
it doesnt really work no? the iframe seems not to have a good height here:
https://zmr.eab.myftpupload.com/latest-jobs/but it seems like you havent applied the css that i posted in my last post?
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it