CODEWITHSUNDEEP
javascripthtmlcssiframe
designr
designr

Reputation: 21

Need a dynamic iframe that adjusts to content within AND is responsive to device screen/window size

I am very inexperienced at advanced coding, and I'm designing my first responsive Wordpress site. I have a "Product Search" database/site that I've attempted to integrate into my site via iFrame. It needs to look seamless, so I want to avoid scroll bars around the frame.

Here is the page for reference: http://alwayzadvertising.seattlewebsolutions.com/wp/?page_id=63

I have 2 Problems:

a) The iFrame is not dynamic enough to adjust to the content within. The content varies on each "page" within the database, so if I set a fixed frame height, the content within tends to get cut off at the bottom.

b) The iFrame (and content within) is not responsive to the screen/window sizes that it is being viewed on. For example, when I view the Parent Page on my mobile device, the iFrame itself (and content within) gets cut off.

I need a dynamic iframe that adjusts to the content within AND is responsive to device screen/window sizes that it is being viewed on. Frankly, I have very limited knowledge when it comes to coding, so if anyone knows how to remedy this, and can explain to me in detail - I will be forever grateful!!

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

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

Upvotes: 2

Views: 1296

Answers (2)

Lei-Lonnie
Lei-Lonnie

Reputation: 784

This works without Javascript: Fiddle

HTML

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

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 goes to this guy: Michael Lancaster

In order to make it responsive, then you have to make the page you're loading into the iframe responsive, just like example.com is in the fiddle. You must be able to edit the src file in order to change the behaviour of elements within an iframe.

Upvotes: 2

happenask
happenask

Reputation: 1084

if you want to resize iframe height dynamically, make some code in parent frame like this

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

when the body of the parent frame loads , it look up the document element of childframe Then the page call a function named resizeFrame. The function sets the height of the frame to be the scrollHeight. i hope it is helpful for you

Upvotes: 0

Related Questions