control iframe content width to avoid horizontal scroll

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

5 Days

Discussion Span

3 Years Ago

Last Updated

4

Views

rori

Newbie Poster

24 posts since Dec 2006

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

Maybe you could try something like this.

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

Agent Cosmic

Junior Poster in Training

51 posts since Aug 2008

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

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.

fxm

Posting Pro

596 posts since Apr 2010

Reputation Points: 40

Solved Threads: 74

Skill Endorsements: 0

3 Years Ago

0

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.

fxm

Posting Pro

596 posts since Apr 2010

Reputation Points: 40

Solved Threads: 74

Skill Endorsements: 0

control iframe content width to avoid horizontal scroll

This article has been dead for over three months: Start a new discussion instead