Forums IFrame Height

[brains]

One of the issues I had with the forum opening within the existing IFrame is the number of scroll bars the user has to contend with. By changing a couple of lines of code this problem can be eliminated.

In the course_forum.html.php file near the bottom I amended the code to:

<iframe
onload="iFrameHeight()"
id="blockrandom"
name="iframe"
src="<?=$link?>"
width="100%"
height="100%"
scrolling="no"
align="top"
frameborder="0"
class="wrapper">
<?php echo _CMN_IFRAMES; ?>
</iframe>

Hey presto, no more scrolling to contend to - the IFrame automatically adjusts to the height of the forum.

Hope this helps others.

[den]

Sometime your solution works wrong. (If you goes from page with small height to page with lagre height). Because there was a bug in iframe onload event, it is not handle inside reloads.
Use this solution:
In the course_forum.html.php file near the bottom I amended the code to:

<iframe
// you can remove onload event
id="blockrandom"
name="iframe"
src="<?=$link?>"
width="100%"
height="800px" // or "100%"
scrolling="no" // or "auto" if your template small by horizontal
align="top"
frameborder="0"
class="wrapper">
<?php echo _CMN_IFRAMES; ?>
</iframe>

In your SMF template change file index.template.php. Function template_main_below() (in SMF 1.1.1 default template - line 346).
Change lines 338 - 438 to: (my changes marked as bold)

echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[';
echo '
function goSetHeight() {
if (parent == window) return;
else parent.iFrameHeight();
}';
// Unfortunately, Safari does not have a "getComputedStyle" implementation yet, so we have to just do it to code...
if ($context['browser']['is_safari'])
echo '
window.addEventListener("load", smf_codeFix, false);

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if ((codeFix[i].className == "code" || codeFix[i].className == "post" || codeFix[i].className == "signature") && codeFix[i].offsetHeight < 20)
codeFix[i].style.height = (codeFix[i].offsetHeight + 20) + "px";
}
goSetHeight();
}';
elseif ($context['browser']['is_firefox'])
echo '
window.addEventListener("load", smf_codeFix, false);
function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = 0; i < codeFix.length; i++)
{
if (codeFix[i].className == "code" && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0))
codeFix[i].style.overflow = "scroll";
}
goSetHeight();
}';
else
echo '
var window_oldOnload = window.onload;
window.onload = smf_codeFix;

function smf_codeFix()
{
var codeFix = document.getElementsByTagName ? document.getElementsByTagName("div") : document.all.tags("div");

for (var i = codeFix.length - 1; i > 0; i--)
{
if (codeFix[i].currentStyle.overflow == "auto" && (codeFix[i].currentStyle.height == "" || codeFix[i].currentStyle.height == "auto") && (codeFix[i].scrollWidth > codeFix[i].clientWidth || codeFix[i].clientWidth == 0) && (codeFix[i].offsetHeight != 0 || codeFix[i].className == "code"))
codeFix[i].style.height = (codeFix[i].offsetHeight + 36) + "px";
}

if (window_oldOnload)
{
window_oldOnload();
window_oldOnload = null;
}
goSetHeight();
}';

[brains]

Unfortunately I am using the Classic template. Can this still be applied?

[den]

You can try this code:

echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[';
echo '
function goSetHeight() {
if (parent == window) return;
else parent.iFrameHeight();
}';
echo '
if (window.addEventListener) {
window.addEventListener("load", goSetHeight, false);
} else {
window.attachEvent("onload", goSetHeight);
}';
echo '
// ]]></script>';

Insert it into template_main_below() function before "// The following will be used to let the user know that some AJAX process is running" comment.

[brains]

Thanks Den

My coding was slightly longer than that!

[penguinhead]

echo '
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[';
echo '
function goSetHeight() {
if (parent == window) return;
else parent.iFrameHeight();
}';
echo '
if (window.addEventListener) {
window.addEventListener("load", goSetHeight, false);
} else {
window.attachEvent("onload", goSetHeight);
}';
echo '
// ]]></script>';
Insert it into template_main_below() function before "// The following will be used to let the user know that some AJAX process is running" comment.

Hi Den

I am not using the LMS at this stage but am trying to use the SMF forum in a Rockettheme template (Vortex) wrapper, and am experiencing the same problem with the unnecessary duplication of scroll bars. www.woolamaibeach.asna.u

I have added the code above to the classic SMF template but it hasn't made any difference.

Is there some other code I need to add elsewhere???

Any assistance is greatly appreciated!

[den]

What SMF template you are using? If your template is 'SMF default theme', then try code from the second message in this thread. Alos try to play with 'scrolling' setting of your wrapper ('auto' instead of 'no').

[penguinhead]

What SMF template you are using? If your template is 'SMF default theme', then try code from the second message in this thread. Alos try to play with 'scrolling' setting of your wrapper ('auto' instead of 'no').

Thanks Den, I really appreciate your help.

I am using the SMF default theme and have set the scrolling setting to auto.

It is sort of working, except that when it initially loads in the wrapper the height of the page does not automatically adjust in size. However once I click on any button or link in the SMF forum component it adjusts its height and works correctly from that point forward.

You can see what I mean at http://woolamaibeach.asn.au

Any suggestions how to avoid this initial bug on loading??

[den]

Your wrapper is setup to "www.woolamaibeach.asn.su/forum", but your site url is "woolamaibeach.asn.su". Javascript isn't have permissions to get properties of page from another domain. In your situation 'www.woolamaibeach.asn.su' and 'woolamaibeach.asn.su' are different domains.
Specify another url for your wrapper, without 'www'.