Dynamic iFrame Help Needed Please

[SMFnub]

Webste:  www.atticaguild.org
SMF:  1.1.6
TP:  1.05 Beta 1
Problem:  Dynamic iFrame does not work in Firefox

Ok I've browsed through this forum and tried a variety of suggestions and googled.  I'm not well versed enough in php and javascript to really understand my problem.  Be great if someone could look over this code and tell me what is going on.

With new game and new guild, decided to create a new website.  Except the below posted iFrame no longer works in FireFox, now that I have updated SMF and TP.  So I'm using this script from Dynamic Drive that G6 had posted in another help topic.  The script used to work with an older version of TP and SMF, but no longer works.  It only shows about a height of 200 now. 

Link to article:  http://www.atticaguild.org/index.php?page=6

Code: 

Code Select Expand

<script type="text/javascript">

/***********************************************
* IFrame SSI script II- Ã,© Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>  <iframe frameborder="0" scrolling="no" style="width: 100%; display: none;" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.atticaguild.org/eqdkplus/listmembers.php" id="myframe"></iframe>

[Ken.]

I too use a dynamic iFrame for some of my external pages and at times have had issues like you are experiencing... not sure why except that it may be an issue with browser versions.

Here's the code that's being used on my Coppermine and it seems to work OK.

Code Select Expand


<script type="text/javascript">

/***********************************************
* IFrame SSI script II- ? Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="yes"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>  <iframe scrolling="no" frameborder="0" id="myframe" src="http://www.YOUR_ARTICLE_URL" marginwidth="0" marginheight="0" vspace="0" hspace="0" style="width: 100%; display: none;"></iframe>


[SMFnub]

Yeah that one does the same, it just shows about a height of 200 and that is it.

[Ken.]

What I've had to do sometimes is set the scrolling to "yes".

[Ianedres]

In the IFRAME statement, could you try specifying a height in there? Such as:

Code Select Expand

<iframe frameborder="0" scrolling="no" style="width: 100%; display: none;" height="500px" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.atticaguild.org/eqdkplus/listmembers.php" id="myframe"></iframe>

This would force the block to 500px and perhaps you could adjust it from there.

[SMFnub]

That defeats the point of having a dynamic iframe

[Ken.]

That defeats the point of having a dynamic iframe

That's true enough but if you can't get the dynamic portion of the code function correctly you may end up doing a fixed  height.

Here's how my two iFrame articles are working out:
WordPress
Coppermine

The same code is being used for both but with one having the scrolling set to "yes" and in the other it is set to "no". Why is that? I have no idea at all... all I can say it that after many hours of research and much beating and banging on the code they are set that way because that's what works best for each of them. And, if I need to work on the 'config' page in cpg the page must be accessed directly and not through the article (it's the one set to no).

The thing is that iFrames work great up to a point but there some drawbacks like the ones mentioned for my site... you'll just have to keep playing around with yours until you've worked out the details as best you can because until someone writes some new, better code that's about as good as we will be able to do.

There are other ways to pull in a page, like 'includes'... have you looked at other approaches to see if that would work with your page?

[SMFnub]

any other suggestions?

[Ianedres]

That code is from '05 and from what little javascript I can interpret, doesn't appear to care what major version of FF is being used, but looks at the minor revisions.

The intent of my suggestion was to get the block allocated on the screen, as it is set to 'none' initially. I though perhaps FF might now be requiring the 'height' in the sizing of the block on initial loading.

[SMFnub]

I just used the same script for a different php application and it works flawlessly.

I discovered the problem seems to be with how the EQdkp Plus loads.  Would appear the people who are doing this project do it in such a manner that not all of the page loads before the iframe script resizes it.

But then the EQdkp Plus while has nice features, is pretty messy and highly flawed.  It seems they are trying to create it into a CMS of its own, and it blows.