If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

The scrolling attribute is obsolete all together, as is the frameborder attribute. But all browsers support it.
If you don't want them, see this.
Anyways, I think scrolling must not be allowed in order to avoid scroll bars to appear in an iframe that should be truly resized.

I agree that scrolling should be hidden... but can't you just use overflow:hidden; ?

overflow:hidden works in all modern browsers except IE. So you need something for IE, which could be scrolling="no" if you don't care about validation (validation should not be a purpose on itself!!) or the script I referred to above.

The overflow: hidden; property/value pair works cross browser if assigned to the html and/or body elements of the page in the iframe.

An important note about what I said:

Code:

alert(jQuery(window.frames[0].document).height());

That needs to be:

Code:

alert(jQuery(window.frames[0].document.body).outerHeight());

And something else to be aware of (just as with any iframe resizing scheme) is that only works if the content that determines the height required by the window showing the page being loaded into the iframe is in the normal flow (position static or relative without going beyond the bottom) of the page. Absolute, relative, fixed, or floated content might cause problems, as can tables in some browsers.

You can choose trying to determine if there's anything like that on the remote page and/or look for things that have an offsetTop + offsetHeight that's greater than the document.body.offsetHeight (or the jQuery equivalents). But generally it's best not to use any of that stuff on the remote page.

The overflow-y is hidden on the pages in the iframe for both the html and body elements. Nothing else is done to eliminate the scrollbar, that's apparently sufficient cross browser. I left the border at 1 because it shows the resizing more dramatically. If you want no border in IE 8 and less, you must use the deprecated border=0 attribute.

The code on that page should work with multiple iframes. All that's required is that they each have a class of "resize", which allows you to also have other iframes on the page without that class, those iframes will not resize. If you don't want the resize to be an animation, that's simple, let me know.

Your solution is 100% what I am looking for but it is not working IE for me....tested in ie7 but no luck. IE7 is around 95% of our enviornment. Attached screenshot of the 3 views and also is there a easy way to make the space disappear if the actual iframe content is 100% empty? Have emergency banner that will only be displayed when a message is made active and needing to stretch it in hieght without scrollbars according to content as there may be multiple messages at once.<!DOCTYPE html>
<html>
<head>
<title>jQuery Resize Iframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var $iframe = $('iframe').eq(0), ie = (function(){var ie; return (ie = /MSIE (\d+)/.exec(navigator.userAgent)) && ie[1] < 9 ? 5 : 0;})();
$iframe.load(function(){
$iframe.animate({height: $(window.frames[0].document.body).outerHeight(true) + ie}, 600);
});
$iframe.data('load', function(){$iframe.trigger('load');});
ie && $(window).load($iframe.data('load'));
});
</script>
</head>
<body>
<iframe name="myframe" src="http://intranet-dev/deztest.cfm" width="300" height="300" scrolling="auto" frameborder="1"></iframe><br>
<a href="frame1.htm" target="myframe">Frame1</a><br>
<a href="frame2.htm" target="myframe">Frame2</a><br>
</body>
</html>

Thanks n advance,

Originally Posted by jscheuer1

I tried it out. It needed some tweaks. This worked in limited testing:

For some reason, I hadn't noticed John's script when I submitted my last post.
It's a very nice script. I tested it in IE (down to IE7), Firefox, Google Chrome, Opera and Safari. The results were fine with each browser.
I would suggest 2 modifications though:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Hey John, Thanks so much for quick response I tried that change and no luck still same results. i also changed the height from 300 to 100% but that made the box even smaller. Your solution is exactly what I need just need it to do no scrolling and just automatically fit in height...I've attached image of exact site that has the iframe and width is perfect but still getting scrollbar even with scrolling="no"

There's nothing I can really do without a link to the page. Even then, some pages in the iframe cannot be easily read for height in some browsers, as I noted earlier in this thread:

Originally Posted by jscheuer1

And something else to be aware of (just as with any iframe resizing scheme) is that only works if the content that determines the height required by the window showing the page being loaded into the iframe is in the normal flow (position static or relative without going beyond the bottom) of the page. Absolute, relative, fixed, or floated content might cause problems, as can tables in some browsers.

You can choose trying to determine if there's anything like that on the remote page and/or look for things that have an offsetTop + offsetHeight that's greater than the document.body.offsetHeight (or the jQuery equivalents). But generally it's best not to use any of that stuff on the remote page.