[eknudholParticipant]

I have been searching many posts within the forum and on the broader net and not able to get this to work.

The Problem: using a vendors “site-in-a-box” which is basically an <iframe> block that allows our visitors to navigate through our vendors catalog without leaving our site.

<iframe src=’https://partnerportal………. frameborder=’0′></iframe>

The Issue: The iframe isn’t a static height and as our visitor navigates through the pages, scroll bars appear to the right and content is not visible. I have tried using both the RAW and TEXT elements to host the iframe and used the iframe ONLOAD event to call JavaScript code to adjust the height of the RAW/TEXT element container, but can not get it working.

What I am trying to accomplish: Can you suggest an approach to reset the height of the container element, assuming the RAW element is the correct choice for this, when the iframe completes reloading (i.e. height changes) and has displayed it’s content (onload event).

Our site isn’t live as yet.

Thanks for your help.

[ChristianModerator]

Hey there,

The Raw Content element follows the height of the content. Your iframe however might not have a height. Please try adding a height to your iframe (see attachment).

Hope that helps. 🙂

[eknudholParticipant]

Thanks for your reply, the issue is that the iframe content changes in height as the visitor navigates through the content so fixing the height to say 1000px would create a significant gap when there is only small amount of content or forces scrollbars drops overflow when the content stretches past the 1000px.

I have been attempting to set the iframe height dynamically, but can not get anything to work:

<script type=”text/javascript”>
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById(‘the_iframe’).contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById(‘the_iframe’).height=the_height;
}
</script>
<iframe src=”…” scrolling=”no” id=”the_iframe” onLoad=”calcHeight();” height=”1px” frameborder=”0″ ></iframe>

thanks

Ed

[ChristianModerator]

I see. In that case. that would need some JavaScript. Regretfully, this falls outside the scope of our support. You might want to try out the solutions in the links below.

http://stackoverflow.com/questions/15389527/adjust-div-height-to-resizable-iframe-height
http://stackoverflow.com/questions/9162933/make-iframe-height-dynamic-based-on-content-inside-jquery-javascript
http://stackoverflow.com/questions/12725436/setting-iframe-height-to-100-seems-to-overflow-containing-div

Hope that helps. 🙂

[Author]

Posts