iframe scrolling attribute

[entity]

Hi,

I am trying dynamically modify the scrolling attribute of an iframe, in order to get rid of the buggy horizontal scrollbar that appears in IE when the scrolling is set to 'auto' but disappears when it is set to 'yes'. Details here.

Basically I have different links that have content that either fits snuggly into the iframe or has (vertical) overflow. The scripts on the links call the following function from the anchor tag:

onclick="hscroller('yes');" //if there is overflow

onclick="hscroller('no');" //if there is no overflow

The actual function looks like this:

// Iframe Scrollbar controller
function hscroller(switcher){
	//Check if IE
	if (navigator.appVersion.indexOf("MSIE")>0){
		alert (switcher);
		//modify scrolling attribute
		window.frames[0].scrolling = switcher;
	}
}

The scrolling attribute does change, but I see no visible results. Does anyone know of a way around this?

[jscheuer1]

This is a real mess in the various browsers, this works for IE6 and FF1.5, but not in Opera8:

<iframe style="overflow:auto" src="text.htm" width="250" height="200" scrolling="yes" frameborder="1"></iframe>

However, since virtually all other browsers recognize scrolling="auto" correctly but many (including IE) do not accept its dynamic assignment in a practical fashion, you might be better off using conditional document.write lines or comments to create the iframe in the first place as well.

[jscheuer1]

To elaborate, this sort of arrangement works well:

<!--[if IE]>
<script type="text/javascript">
document.write('<iframe id="ie" name="ed" src="text.htm" width="250" height="200" scrolling="yes" frameborder="1">')
</script>
<![endif]-->
<script type="text/javascript">
if (!document.getElementById('ie'))
document.write('<iframe name="ed" src="text.htm" width="250" height="200" scrolling="auto" frameborder="1">')
</script>
</iframe><br>
<a href="text2.htm" target="ed">ed</a>

With the caveat that on content pages to be loaded into the iframe that you do not want even the empty vertical scrollbar to appear in IE, use this style in the head:

<style type="text/css">
html, body {
overflow:hidden;
}
</style>

[entity]

Thanks! The way I eventually got around it, with some help from codingforums.com was to apply the following style to the page with overflow in the iframe

<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
width:279px;
}
</style>

The beauty of this approach is that I didn't have to use JavaScript at all.

Where the frame width was actually 296 (it seems IE needs 17 pixels). I liked your conditional document.write approach, but in this particular example the iframe would have to change its scrolling property depending on the content it loads. I suppose I could change the innerHTML of a DIV each time a link is clicked...

[jscheuer1]

That solution is very good but allows for no decent looking frameborder in IE. I think you got it wrong on my solution though. As long as the content that you do not want to have scrollbars has the style I indicated in my post, no changes to the iframe are required.

[entity]

That solution is very good but allows for no decent looking frameborder in IE.

That's true. However, in this case I didn't want borders.

I think you got it wrong on my solution though. As long as the content that you do not want to have scrollbars has the style I indicated in my post, no changes to the iframe are required.

I tried your solution out (the overflow style part) and I see what you mean. Your solution actually works great (in IE6 and FF1.5 at any rate) without having to resort to the JavaScript.

Thanks!

[jscheuer1]

I also tested it in Opera, worked fine. But, if you don't want borders and are not using javascript otherwise for the page, the CF solution would be better.