Link to home
Create AccountLog in
Avatar of Jonathan Greenberg
Jonathan GreenbergFlag for United States of America

asked on

Iframe auto-height display problem in Safari/Chrome

In a Joomla CMS site, I'm using iframes ("wrapper menu item," in Joomla-speak) to display pages from an external site on the same server. I have iframe "auto height" selected, and this works perfectly in IE and Firefox, on both Mac and Windows systems.

But there's an auto-height problem in Safari and Chrome. The first iframe always comes up at the correct height -- meaning the full page of content is displayed, with no vertical scrollbar. The problem arises when a link in the iframe is clicked. The height of the new page, as well as that of all subsequent linked pages, is correct if its height is equal to or greater than that of the first. But if its height is less, the iframe never shrinks down to the shorter height. So, regardless of the height of subsequent linked pages, the iframe will never decrease in height. It will continue to display empty space below the new iframed page's content, filling the iframe so that it's always as tall as the tallest iframed page. This may cause the outer page to become too long and develop a vertical scrollbar.

As you can see from line 8 of the script below, 60px of height is added to the iframed page (style.height = h + 60 + 'px'). On Safari and Chrome, this has the consequence of adding 60px to the height of the tallest iframed page each time an internal page's link is clicked. So with each click, not only does the iframe never shrink down to the height of shorter new iframed pages, but it gains 60px of height.

Click here for a live example of the problem.

Below is the JavaScript in Joomla that sets the iframe auto-height. I can modify it, and I can modify the pages being iframed.

Here's my question: Is there a way by modifying the code below, and/or by adding new code to my iframed pages, to get pages from my external site (same domain) to display in my Joomla iframes -- set on auto-height -- at the correct heights in Safari and Chrome?

Thanks!
function iFrameHeight() {
    var h = 0;
    if ( !document.all ) {
        h = document.getElementById('blockrandom').contentDocument.height;
        document.getElementById('blockrandom').style.height = h + 60 + 'px';
    } else if ( document.all ) {
        h = document.frames('blockrandom').document.body.scrollHeight;
        document.all.blockrandom.style.height = h + 20 + 'px';
    }
}

Open in new window

Avatar of Xper4net
Xper4net
Flag of France image

Try the following:

function iFrameHeight() {
	var f = document.getElementById('blockrandom') ;
	var h = Math.max(f.document.body.offsetHeight, f.document.body.scrollHeight) ;
	if ( !document.all ) {
		h += 60 ;
	} else if ( document.all ) {
		h += 20 ;
	}
	h += 'px' ;
}

Open in new window

Oops, bad intermediary code copied...
The good one:
function iFrameHeight() {
	var f = document.getElementById('blockrandom') ;
	var h = Math.max(f.document.body.offsetHeight, f.document.body.scrollHeight) ;
	h += (document.all)? 60 : 20 ;
	f.style.height = h+ 'px' ;
	f.setAttribute("height", c) ;
}

Open in new window

I'm not really awake this morning... last line is f.setAttribute("height", h) ;

Some comments:
> I've kept document.all test, but it's not a good way to test browsers.
> setAttribute is not mandatory, but recommended.
Avatar of Jonathan Greenberg

ASKER

Thank you. But this has turned the auto-height off completely. The iframes are now just defaulting to my my minimum height of 100px. If you want me to explain this, please let me know.
Oh, hold on, I just saw your last message! Let me try that.
Have you tried the second sample code or the first one?
The second. That's what my comment was referring to. Now I've replaced it with your comment from ID 34446923. No change, it's still not auto-heighting at all now.

Here's what the code now looks like:
function iFrameHeight() {
	var f = document.getElementById('blockrandom') ;
	var h = Math.max(f.document.body.offsetHeight, f.document.body.scrollHeight) ;
	h += (document.all)? 60 : 20 ;
	f.style.height = h+ 'px' ;
	f.setAttribute("height", h) ;
}

Open in new window

Ok, just an issue for accessing frame's document.
Adjust as this:
function iFrameHeight() {
	var f = document.getElementById('blockrandom') ;
	var d = (f.contentWindow || f.contentDocument);
	var h = Math.max(d.body.offsetHeight, d.body.scrollHeight) ;
	h += (document.all)? 60 : 20 ;
	f.style.height = h+ 'px' ;
	f.setAttribute("height", h)
}

Open in new window

No, still the same thing. It's only displaying at a height of 100px, which is essentially the minimum height setting.
Joomla has basic required iframe setting parameters for width, height, scrollbars, and auto-height. Auto-height has radio buttons of No and Yes; I have it on Yes. The scrollbar options are radio buttons of No, Yes and Auto; I have No selected. The width and height parameters are text fields. Width works fine in all browsers at '100%'. Height cannot be in percentages, so I use 100, which results in a minimum iframe height of 100px.
Sorry again, second line would be:
var d = (f.contentWindow.document || f.contentDocument);
Now it should work!
OK, the auto-height is back on. But now the iframe is still not shrinking back down to size. Instead, it's growing taller by 20px each time an internal link is clicked.
Just to be clear, this is the code I'm using right now:
function iFrameHeight() {
	var f = document.getElementById('blockrandom') ;
	var d = (f.contentWindow.document || f.contentDocument) ;
	var h = Math.max(d.body.offsetHeight, d.body.scrollHeight) ;
	h += (document.all)? 60 : 20 ;
	f.style.height = h+ 'px' ;
	f.setAttribute("height", h) ;
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Xper4net
Xper4net
Flag of France image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
You're a genius! That's it, it worked! I really was losing hope. Thank you!
You're welcome! But if you knew how much time I've spent on these kind of iframes issues...
Well, I hope your experience pays off for you as well as it just has for me! Thanks again. I'm really grateful.
Avatar of ECLAC-CKMC
ECLAC-CKMC

Hello xper4net. I am very new to Joomla, and I also have a similar need.  I found the iFrameHeight code in /components/com_wrapper/views/wrapper/tmpl/default.php.  I made the change as you prescribed, however, when I refresh the page, I am not getting the auto-adjusted height.  Note that I am using <iframe ... width="100%" height="100%" scrolling="auto" ... >.  I have also tried height="100" but without success.  What am I missing?  Thank you in advance.
I can't answer without having a look on page content.
Note that this code can operate only for frame which displaying content belonging to the same domain. If this is not the case, another solution should be applied.
But as this question is now closed, please create a new one to handle your own case.