Iframe error on height 100% in IE9 - Solution

OnzeDanny · Post by **OnzeDanny** » Tue Apr 26, 2011 3:38 pm

Ch3vr0n wrote:hehe i'm not the one having an issue mate. .

Oeps ... I have to sleep some more time i suppose ...
After i have upgraded PiMaG.be (my script

) to the 1.6 release, i will write some easy to install and modifiable Plugin to add PHP into an article or menu.
Most of the plugins are made so complex and can be written with 50% of the existing code, without loosing functionality or security ...

ymfidds · Post by **ymfidds** » Wed Apr 27, 2011 7:19 pm

To OnzeDanny and Ch3vr0n,

I really appreciate all of your help.

With regards to the iframes, I still cannot get 100% height.
I have copied and pasted the code for default.php, both com and mod, from the post by OnzeDanny (Thu Apr 21, 2011 4:22 pm) There was a small error in the code - a variable $phpbbgo
I have set the scroll bar parameters and advanced options

In the iframe wrapper I am calling a locally hosted file
http://localhost/cms_joomla/content/handicaps.html

handicaps.html contains the following code: -

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://localhost/joomla/content/handicaps.css"media="screen, print, projection" type="text/css" rel="stylesheet" />
<title>Untitled Document</title>
</head>

<frameset rows="*,0">
  <frame src="http://masterscoreboard.co.uk/results/EGA_HandicapList.php?CWID=15031" name="mainFrame" id="mainFrame" title="mainFrame" scrolling="auto" />
  <frame src="http://localhost/joomla/content/blankframe.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="bottomframe" />
</frameset><noframes></noframes>

How frustrating as the html works when used direct from the address bar!

Tomorrow, perhaps I will have a look at PHPdirect and see about embedding the code.

Again, many thanks...

ymfidds · Post by **ymfidds** » Wed May 04, 2011 1:45 pm

Hi all,

Well, still unable to get 100% height to work with wrapper (iframe)

At the moment I am presenting the content directly in an article using <object> and fixed height - the problem being that when I click on one of the names, the data that gets rendered does not need as much height and therefore the page has a lot of whitespace.

http://www.barcafeole.com/mags/index.php/handicaps

If anyone has any views or advise I would be grateful

jorge1379 · Post by **jorge1379** » Tue May 10, 2011 10:13 pm

Hello and thanks for te solution,
this fix the problem for me in a minute, for IE9 in 1.5 joomla

OnzeDanny · Post by **OnzeDanny** » Wed May 11, 2011 7:30 pm

jorge1379, thanks for your response

baggiesmad · Post by **baggiesmad** » Fri May 20, 2011 9:02 am

Works great in IE9 for Joomla 1.5

Sadly it doesnt fix the issue in Opera v 11.01

OnzeDanny · Post by **OnzeDanny** » Fri May 20, 2011 10:54 am

Did you activate iframes into Opera v 11.01?

baggiesmad · Post by **baggiesmad** » Sat May 21, 2011 7:35 am

OnzeDanny wrote:Did you activate iframes into Opera v 11.01?

iFrames need to be activated within the Opera browser? So the issue needs to be fixed by my web users?

OnzeDanny · Post by **OnzeDanny** » Sat May 21, 2011 4:47 pm

It's just a question ...
Maybe this article clears out the Opera IFRAME problem: http://highslide.com/forum/viewtopic.ph ... &sk=t&sd=a
They test it with Mac and Vista and it runs well.
Ask other people who use Opera or they have the same problem.

brienj · Post by **brienj** » Mon Jun 06, 2011 12:42 am

Here is a solution that will work in Opera 11.11 and AFAIK, should also work with IE9, although I don't have IE9 to test.

Sometimes the easiest solutions are the most elegant.

Here is the code to put in your wrapper php code:

Code: Select all

<script type="text/javascript">
//<![CDATA[

window.onload = function(){
    var setheight = window.frames['blockrandom'].document.body.scrollHeight;
    document.getElementById('blockrandom').style.height = 40 + setheight+'px';
}

//]]>
</script>

40 extra px should suffice for most browsers.

baggiesmad · Post by **baggiesmad** » Thu Aug 25, 2011 8:08 am

Hi again, It seems we have the same issue in Firefox 6. Is there a solution for this?

OnzeDanny · Post by **OnzeDanny** » Thu Aug 25, 2011 8:21 am

Yes there is next solution, REPLACE my code with:

Code: Select all

<script language="JavaScript">
<!--
function resize_iframe()
{
   var height=window.innerWidth;//Firefox
   if (document.body.clientHeight)
   {
      height=document.body.clientHeight;//IE
   }
   document.getElementById("blockrandom").style.height=parseInt(height-
   document.getElementById("blockrandom").offsetTop-8)+"px";
}
//-->
</script>

Remove all other code like: <!--[if IE]> and <![if !IE]>

baggiesmad · Post by **baggiesmad** » Thu Aug 25, 2011 8:49 am

OnzeDanny wrote:Yes there is next solution, REPLACE my code with:

Code: Select all

<script language="JavaScript">
<!--
function resize_iframe()
{
   var height=window.innerWidth;//Firefox
   if (document.body.clientHeight)
   {
      height=document.body.clientHeight;//IE
   }
   document.getElementById("blockrandom").style.height=parseInt(height-
   document.getElementById("blockrandom").offsetTop-8)+"px";
}
//-->
</script>

Remove all other code like: <!--[if IE]> and <![if !IE]>

Thanks, is this to replace whats in com_wrapper and mod_wrapper?

Also, does this allow me to set height to 100% without scroll bars?

OnzeDanny · Post by **OnzeDanny** » Thu Aug 25, 2011 8:51 am

Solutions are the result of problems ...
You're welcome

OnzeDanny · Post by **OnzeDanny** » Thu Aug 25, 2011 8:55 am

vannquish wrote:
OnzeDanny wrote:Yes there is next solution, REPLACE my code with:
Code: Select all
<script language="JavaScript">

</script>
Remove all other code like: <!--[if IE]> and <![if !IE]>
Thanks, is this to replace whats in com_wrapper and mod_wrapper?

Its a long time that i have seen Joomla code ... there i have no CMS installed.
So far i remember you have to edit them both!

msartor · Post by **msartor** » Thu Aug 25, 2011 9:56 am

Hi guys,

unfortunately OnzeDanny's new code does not work for me. Neither on IE9 nor on Firefox 6, the wrapper iFrame is adjusting size correctly.

With the previous code, it worked fine in IE9, but not in FF6.

I have created template overrides:
/[JOOMLA_ROOT]/templates/[TEMPLATE_NAME]/html/com_wrapper/wrapper/default.php and
/[JOOMLA_ROOT]/templates/[TEMPLATE_NAME]/html/mod_wrapper/default.php

You have any idea what can be done?

Thanks in advance for all help.

Cheers,
Matt

OnzeDanny · Post by **OnzeDanny** » Thu Aug 25, 2011 10:06 am

Hi Matt,
Please remove the <![if !IE]> and <![endif]> , from your code.
It is because Mozilla 6 use different identity then IE, that the code is not active when the <![if !IE]> and <![endif]> is still there .
It has to work ... its tested on different Joomla sites.
Cheers,
Danny

msartor · Post by **msartor** » Thu Aug 25, 2011 10:22 am

Hi OnzeDanny,

thanks for the hint, I did this now in both override files, but the result is it stops working on both again (IE9 and FF6).

Find here the components override file I currently have uploaded:

Code: Select all

<?php
/**
 * @version		$Id: default.php 21391 2011-05-26 17:46:12Z dextercowley $
 * @package		Joomla.Site
 * @subpackage	com_wrapper
 * @copyright	Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;
?>
<!--[if IE]>
<script>
function iFrameHeight() {
  var f = document.getElementById('blockrandom');
  f.style.height = '100px' ;
  var d = (f.contentWindow.document || f.contentDocument) ;
  var h = Math.max(d.body.offsetHeight, d.body.scrollHeight) ;
  h += 20;
  f.style.height = h + 'px' ;
  f.setAttribute("height", h) ;
}
</script>
<![endif]-->

<script type="text/javascript">
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';
   }
}
</script>

<div class="contentpane<?php echo $this->pageclass_sfx; ?>">
<?php if ($this->params->get('show_page_heading', 1)) : ?>
	<h1>
		<?php if ($this->escape($this->params->get('page_heading'))) :?>
			<?php echo $this->escape($this->params->get('page_heading')); ?>
		<?php else : ?>
			<?php echo $this->escape($this->params->get('page_title')); ?>
		<?php endif; ?>
	</h1>
<?php endif; ?>
<iframe <?php echo $this->wrapper->load; ?>
	id="blockrandom"
	frameborder="0"
	name="iframe"
	src="<?php echo $this->escape($this->wrapper->url); ?>"
	width="<?php echo $this->escape($this->params->get('width')); ?>"
	height="<?php echo $this->escape($this->params->get('height')); ?>"
	scrolling="<?php echo $this->escape($this->params->get('scrolling')); ?>"
	class="wrapper<?php echo $this->pageclass_sfx; ?>">
	<?php echo JText::_('COM_WRAPPER_NO_IFRAMES'); ?>
</iframe>
</div>

Find here the modules override file I currently have uploaded:

Code: Select all

<?php
/**
 * @version		$Id: default.php 20196 2011-01-09 02:40:25Z ian $
 * @package		Joomla.Site
 * @subpackage	mod_wrapper
 * @copyright	Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;
?>
<!--[if IE]>
<script>
function iFrameHeight() {
  var f = document.getElementById('blockrandom');
  f.style.height = '100px' ;
  var d = (f.contentWindow.document || f.contentDocument) ;
  var h = Math.max(d.body.offsetHeight, d.body.scrollHeight) ;
  h += 20;
  f.style.height = h + 'px' ;
  f.setAttribute("height", h) ;
}
</script>
<![endif]-->

<script type="text/javascript">
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';
   }
}
</script>


<iframe <?php echo $load; ?>
	id="blockrandom"
	frameborder="0"
	name="<?php echo $target ?>"
	src="<?php echo $url; ?>"
	width="<?php echo $width ?>"
	height="<?php echo $height ?>"
	scrolling="<?php echo $scroll ?>"
	class="wrapper<?php echo $moduleclass_sfx ?>" >
	<?php echo JText::_('MOD_WRAPPER_NO_IFRAMES'); ?>
</iframe>

Do you have any idea what I might be doing wrong?

Thanks,
Matt

OnzeDanny · Post by **OnzeDanny** » Thu Aug 25, 2011 10:33 am

Please try next: components

Code: Select all

<?php
/**
 * @version		$Id: default.php 21391 2011-05-26 17:46:12Z dextercowley $
 * @package		Joomla.Site
 * @subpackage	com_wrapper
 * @copyright	Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;
?>
<script language="JavaScript">
<!--
function resize_iframe()
{
   var height=window.innerWidth;//Firefox
   if (document.body.clientHeight)
   {
      height=document.body.clientHeight;//IE
   }
   document.getElementById("MyId").style.height=parseInt(height-
   document.getElementById("MyId").offsetTop-8)+"px";
}
// this will resize the iframe every time you change the size of the window.
window.onresize=resize_iframe;
//-->
</script>

<div class="contentpane<?php echo $this->pageclass_sfx; ?>">
<?php if ($this->params->get('show_page_heading', 1)) : ?>
	<h1>
		<?php if ($this->escape($this->params->get('page_heading'))) :?>
			<?php echo $this->escape($this->params->get('page_heading')); ?>
		<?php else : ?>
			<?php echo $this->escape($this->params->get('page_title')); ?>
		<?php endif; ?>
	</h1>
<?php endif; ?>
<iframe <?php echo $this->wrapper->load; ?>
	id="blockrandom"
	frameborder="0"
	name="iframe"
	src="<?php echo $this->escape($this->wrapper->url); ?>"
	width="<?php echo $this->escape($this->params->get('width')); ?>"
	height="<?php echo $this->escape($this->params->get('height')); ?>"
	scrolling="<?php echo $this->escape($this->params->get('scrolling')); ?>"
	class="wrapper<?php echo $this->pageclass_sfx; ?>">
	<?php echo JText::_('COM_WRAPPER_NO_IFRAMES'); ?>
</iframe>
</div>

And: modules

Code: Select all

<?php
/**
 * @version		$Id: default.php 20196 2011-01-09 02:40:25Z ian $
 * @package		Joomla.Site
 * @subpackage	mod_wrapper
 * @copyright	Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;
?>
<script language="JavaScript">
<!--
function resize_iframe()
{
   var height=window.innerWidth;//Firefox
   if (document.body.clientHeight)
   {
      height=document.body.clientHeight;//IE
   }
   document.getElementById("MyId").style.height=parseInt(height-
   document.getElementById("MyId").offsetTop-8)+"px";
}
// this will resize the iframe every time you change the size of the window.
window.onresize=resize_iframe;
//-->
</script>


<iframe <?php echo $load; ?>
	id="blockrandom"
	frameborder="0"
	name="<?php echo $target ?>"
	src="<?php echo $url; ?>"
	width="<?php echo $width ?>"
	height="<?php echo $height ?>"
	scrolling="<?php echo $scroll ?>"
	class="wrapper<?php echo $moduleclass_sfx ?>" >
	<?php echo JText::_('MOD_WRAPPER_NO_IFRAMES'); ?>
</iframe>

I have no site at this moment to test, but this solution worked on other sites, who request me for a solution by email.

msartor · Post by **msartor** » Thu Aug 25, 2011 11:06 am

Hi,

thanks for this. But still, none of the 2 browsers would resize the iFrame. Both just cut.

You may wanna have a look:
http://www.wasserlauf-montabaur.de/ewig ... liste.html

Thanks, Matt

OnzeDanny · Post by **OnzeDanny** » Thu Aug 25, 2011 11:32 am

My mistake ...
Please replace: "MyId" with: "blockrandom"

msartor · Post by **msartor** » Thu Aug 25, 2011 1:11 pm

Still no luck in both IE9 & FF6. Thought it might be cache, but the are all empty.

Current code for component:

Code: Select all

<?php
/**
* @version      $Id: default.php 21391 2011-05-26 17:46:12Z dextercowley $
* @package      Joomla.Site
* @subpackage   com_wrapper
* @copyright    Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
* @license      GNU General Public License version 2 or later; see LICENSE.txt
*/

// no direct access
defined('_JEXEC') or die;
?>
<script language="JavaScript">
<!--
function resize_iframe()
{
   var height=window.innerWidth;//Firefox
   if (document.body.clientHeight)
   {
      height=document.body.clientHeight;//IE
   }
   document.getElementById("blockrandom").style.height=parseInt(height-
   document.getElementById("blockrandom").offsetTop-8)+"px";
}
// this will resize the iframe every time you change the size of the window.
window.onresize=resize_iframe;
//-->
</script>

<div class="contentpane<?php echo $this->pageclass_sfx; ?>">
<?php if ($this->params->get('show_page_heading', 1)) : ?>
   <h1>
      <?php if ($this->escape($this->params->get('page_heading'))) :?>
         <?php echo $this->escape($this->params->get('page_heading')); ?>
      <?php else : ?>
         <?php echo $this->escape($this->params->get('page_title')); ?>
      <?php endif; ?>
   </h1>
<?php endif; ?>
<iframe <?php echo $this->wrapper->load; ?>
   id="blockrandom"
   frameborder="0"
   name="iframe"
   src="<?php echo $this->escape($this->wrapper->url); ?>"
   width="<?php echo $this->escape($this->params->get('width')); ?>"
   height="<?php echo $this->escape($this->params->get('height')); ?>"
   scrolling="<?php echo $this->escape($this->params->get('scrolling')); ?>"
   class="wrapper<?php echo $this->pageclass_sfx; ?>">
   <?php echo JText::_('COM_WRAPPER_NO_IFRAMES'); ?>
</iframe>
</div>

Current code for module:

Code: Select all

<?php
/**
* @version      $Id: default.php 20196 2011-01-09 02:40:25Z ian $
* @package      Joomla.Site
* @subpackage   mod_wrapper
* @copyright    Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.
* @license      GNU General Public License version 2 or later; see LICENSE.txt
*/

// no direct access
defined('_JEXEC') or die;
?>
<script language="JavaScript">
<!--
function resize_iframe()
{
   var height=window.innerWidth;//Firefox
   if (document.body.clientHeight)
   {
      height=document.body.clientHeight;//IE
   }
   document.getElementById("blockrandom").style.height=parseInt(height-
   document.getElementById("blockrandom").offsetTop-8)+"px";
}
// this will resize the iframe every time you change the size of the window.
window.onresize=resize_iframe;
//-->
</script>


<iframe <?php echo $load; ?>
   id="blockrandom"
   frameborder="0"
   name="<?php echo $target ?>"
   src="<?php echo $url; ?>"
   width="<?php echo $width ?>"
   height="<?php echo $height ?>"
   scrolling="<?php echo $scroll ?>"
   class="wrapper<?php echo $moduleclass_sfx ?>" >
   <?php echo JText::_('MOD_WRAPPER_NO_IFRAMES'); ?>
</iframe>

OnzeDanny · Post by **OnzeDanny** » Thu Aug 25, 2011 1:26 pm

Please mail me in zipfile your both files in ORIGINAL state.
So i can adjust them here and post here results for everybody.

msartor · Post by **msartor** » Thu Aug 25, 2011 2:18 pm

Hi Danny,

sent you the links.

Thank you!

Matt

OnzeDanny · Post by **OnzeDanny** » Thu Aug 25, 2011 3:33 pm

I have received and downloaded them and check it this evening
No thanks at all

francescodelv · Post by **francescodelv** » Fri Aug 26, 2011 3:57 pm

hi danny,

thanks for your job, but for me don't work. it's possible to found a solution for this problem? there are many J! sites with this problem

regards

OnzeDanny · Post by **OnzeDanny** » Fri Aug 26, 2011 5:00 pm

Hi Francesco,
I am busy to write a final solution.
If everything works, like it is now, it will be ready tomorrow.
Regards, Danny

francescodelv · Post by **francescodelv** » Fri Aug 26, 2011 5:10 pm

OnzeDanny wrote:Hi Francesco,
I am busy to write a final solution.
If everything works, like it is now, it will be ready tomorrow.
Regards, Danny

Hi Danny,

Thanks for support

remember that this problem is also with ff6

regards and good work

jsiout · Post by **jsiout** » Sat Aug 27, 2011 8:02 am

Hello, i have the same problem on both of browsers (FF6, IE9). i replace the code on both of files but i am still have a problem !!!

pvd21 · Post by **pvd21** » Sat Aug 27, 2011 2:17 pm

Got the same as jsiout. The javascript for the resize is the same on joomla 1.7 too if I'm not mistaken so none is on the safe side with this issue until it is resolved satisfactory.

This happens when browser companies don't sit down and create a unified standard that will all share but do what they feel right at the respective time period, and then change it all over again of course. $:-\$

The Joomla! Forum™

Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution

Re: Iframe error on height 100% in IE9 - Solution