Member Avatar for rori

Hi,

I have a page on my website where I put an iframe and display inside it another website, something like this:

<iframe frameborder="0" height="100%" scrolling="yes" src="http://www.another-website.com/" style="overflow: scroll; min-height: 600px;" width="100%"></iframe>

My problem is that my page have a fixed width of for example 800px which the iframe width is 100% of this width, but some external websites I put inside the iframe have a wider fixed width than 600, for example if the external website have the width of 1000px then my iframe will have a horizontal scroll.

I don't want the horizontal scroll to appear and at the same time I want the iframe to show the whole width of the external website.

Is there a way that I can control the width of the external website and make it 100% of the width of my iframe instead of their fixed 1000px for example?

I don't think I can but I thought I would ask anyways maybe it's possible!

Thanks for your time.

  • 3 Contributors
  • 3 Replies
  • 805 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by fxm

Recommended Answers

All 3 Replies

Member Avatar for Agent Cosmic

Maybe you could try something like this.

var frame = document.getElementById(Id of frame).contentDocument.body;
if(frame.offsetWidth > 800){
frame.style.width = '800px';
}

Member Avatar for fxm

Hi,

I don't want the horizontal scroll to appear and at the same time I want the iframe to show the whole width of the external website.

These attributes

width="1000px" style="overflow-x: hidden; overflow-y: auto;"

come fairly close to what you want (in all current browsers AFAICT).

You may be able to adjust the width dynamically; I don't know of any cross-browser way to move the y-scrollbar to the left of the iframe.

Member Avatar for fxm

adjust the width dynamically

This

<script type='text/javascript'>
    function resizeIframe(ifn) {
        ifn.style.width = (20+ifn.contentWindow.document.body.scrollWidth) + 'px';
    }
</script>
<body onload="resizeIframe(document.getElementById('resizeme'))">
<iframe id="resizeme" src="......" frameborder="0" style="height:400px; overflow-x: hidden; overflow-y: auto;"></iframe>

is crude but effective.

When src= is wide enough there will be a polite horizontal scrollbar at the bottom of the page (instead of a rude one at the bottom of the iframe).

I still haven't found an effective way to move the y-scrollbar; it looks rather ugly in its default position when src= is narrow.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.