Opera and iFrame . . . I know, I know

[Zuke]

OK, so I'm using the dynamic iFrame script to display my forums within the page (reading around, I see that's not an original idea).

It's taken work, but it now displays the same in IE6, IE7, and Firefox. However, in Opera, it doesn't. I know, everyone says that iFrames don't work in Opera, but Opera 9 IS showing the iFrame. It's just set at a static size that seems to small. I ran Opera's error console, and it seems to be having issues with line 19 which is (for me):

tempobj.style.display="block";

I have no idea what that is, or what it does. Any ideas?

Http://www.infinitegeekonline.com

The iframe is located on the Forums page. Please be kind, the site has NO content on it now, just trying to get all the bugs worked out first.

(Also, if there's anyone on Linux, can you tell me how the site looks in Konqueror?)

[Zuke]

bump.

[jscheuer1]

Script not rated for Opera. Try this modification to the script that allows it to work with Opera:

http://home.comcast.net/~jscheuer1/s...i_III_demo.htm

You probably will need to customize it a bit but, the general code is workable for the three browsers, perhaps more (only tested on IE6, FF and O).

Be sure to set this variable for FF if needed:

//Set optional Mozilla (recent FF, NS and other Mozilla based browsers)
//height adjustment if needed for your layout to avoid scrollbars.
//example: var mAdjust=14
var mAdjust=0

[jr_yeo]

what problem areas should I look for in your site using Konqueror?
coz i don't see any of it here in Konqueror

[jr_yeo]

ok... here is one problem in Konqueror
in the forums page, the site menu is not readable
attach is the screenshot to better explain what m trying to say :P

[Zuke]

I've already modified it in Firefox to get rid of the scroll bars. It was a pain, but I got it. I'm afraid that link didn't really shed any light for me, but it could be because I didn't know what to look for. :-(

As for the Konqueror issue, no one had brought that to my attention. Everyone said it looked ok :-(. Can you tell me which version you are using and I can see if anyone can duplicate it?

Anyone have any ideas on that one?

[jscheuer1]

That wasn't a suggestion as to how to modify the existing script. It was a link to an updated version of the script that works with Opera. When you view the page:

http://home.comcast.net/~jscheuer1/s...i_III_demo.htm

Use your browser's 'view source' to see the updated code. Copy it, in fact.

[jr_yeo]

which version you are using

Konqueror 3.5.1-5
Linux 2.6.15-1.2054_FC5

[Zuke]

I did just that, and now it's not working in any browser. This script appears almost ccompletely different than the last. Do I need to merge them somehow?

Old code:

<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[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
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

New code:

<script type="text/javascript">
/***********************************************
* IFrame SSI script III- © jscheuer1 (http://www.dynamicdrive.com/forums)
* very loosely based upon IFrame SSI script II- © DynamicDrive
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Set optional Mozilla (recent FF, NS and other Mozilla based browsers)
//height adjustment if needed for your layout to avoid scrollbars.
//example: var mAdjust=14
var mAdjust=16

//////////////////No Need To Edit Below Here////////////////////

function collectWidth(obj){
var wVal=0
var objs=obj.document.getElementsByTagName('*')
for (var i_tem = 0; i_tem < objs.length; i_tem++){
wVal=Math.max(objs[i_tem].offsetWidth, wVal)
}
return wVal;
}

function setClicks(obj){
var links=obj.contentDocument.getElementsByTagName('a')
var iFrameObjs=document.getElementsByTagName('iframe')
for (var i_tem = 0; i_tem < links.length; i_tem++){
for (var j_tem = 0; j_tem < iFrameObjs.length; j_tem++)
if (links[i_tem].target==iFrameObjs[j_tem].name)
links[i_tem].onclick=new Function('parent.'+links[i_tem].target+'.location.replace(this.href);return false;')
else if (links[i_tem].target!=='')
links[i_tem].target=links[i_tem].target
else
links[i_tem].onclick=new Function('parent.'+obj.name+'.location.replace(this.href);return false;')
}
links=document.getElementsByTagName('a')
for (i_tem = 0; i_tem < links.length; i_tem++){
for (j_tem = 0; j_tem < iFrameObjs.length; j_tem++)
if (links[i_tem].target==iFrameObjs[j_tem].name)
links[i_tem].onclick=new Function('window.'+links[i_tem].target+'.location.replace(this.href);return false;')
}
}

function sizeFrame(frameObj){
if ((frameObj.contentDocument && (frameObj.contentDocument.body.offsetHeight||frameObj.contentDocument.documentElement.offsetHeight))||frameObj.Document && frameObj.Document.body.scrollHeight){
if (window.opera)
setClicks(frameObj)
var contentHeight=window.opera? frameObj.contentDocument.documentElement.offsetHeight : frameObj.contentDocument? frameObj.contentDocument.body.offsetHeight+mAdjust : frameObj.Document.body.scrollHeight+4
var contentWidth=window.opera? collectWidth(frameObj.contentDocument) : frameObj.contentDocument? frameObj.contentDocument.documentElement.offsetWidth : frameObj.Document.body.scrollWidth
var frameWidth=frameObj.offsetWidth
if(!window.opera)
frameObj.style.overflow='visible'
frameObj.height = frameWidth<contentWidth? contentHeight+18 : contentHeight+3;
if (window.opera&&frameWidth>=contentWidth)
frameObj.contentDocument.body.style.overflow='hidden'
}
}

[jscheuer1]

Don't ever combine any scripts unless you know what you are doing or are willing to go through much trial and error. I'm wondering just what you did. The update to vIII requires that you replace the entire vII script with the vIII one and also that you change your iframe tag(s) markup to conform to that used on the vIII demo page.