iframe-Javascript combination doesnt work in Firefox

[nitish]

Hi all

My page:

http://www.nitishbelut.com/indymoviemakers/index.html

My problem:

I use two iframes one above the other( header + content).However, the iframe's (content) height was not adjusting to the length of the page inside it.So i used javascript (i got somewhere from the net) to automatically resize the height of the iframe.It works fine with I.E but the iframe doesnt get displayed in Firefox at all. View the page in I.E and in F.F to better understand the problem.

Can anyone tell me how to solve this problem.Below is the javascript code.

Thanks

<script type="text/javascript">

var iframeids=["content"]

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

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+20;
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>

[mburt]

Us percentages!! It's very useful :)

set the global padding and margin to 0px:


<style type="text/css">
* {
padding:0px;
margin:0px
}
</style>

Ex:


<iframe width="25%" height="100%"></iframe>
<iframe width="75%" height="100%"></iframe>

[jscheuer1]

nitish -

First off, that is a Dynamic Drive script (and varies ever so slightly from what you have in your post, this one difference could be important):

http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

Please restore the credit:

Your page is in violation of Dynamic Drive's usage terms (http://www.dynamicdrive.com/notice.htm), which, among other things, state that the script credit must appear in the source code of the HTML page(s) using the script. Please reinstate the notice first.

Second, you really need to apply it to both iframes (if they both can vary in the size of their loaded content).

Also, make sure that you read, understand and follow all the installation instructions on the demo page (linked to above). If you still are having problems, get back to us.

mburt -

I am curious. Did you test out this theory of yours on this particular problem? Or, is this just a case of a child with a new toy hammer suddenly thinking that everything needs hammering?

[mburt]

Percentages automatically reset the page width and height to the screen resolultion. It's very helpful.

[jscheuer1]

<iframe width="25%" height="100%"></iframe>
<iframe width="75%" height="100%"></iframe>


100% of what?

[nitish]

Thanks for the replies.

It works now...but the display is horrible..looks like the CSS 'scrollbar' attributes are not working.I'll try to solve the different display problems as much as i can and get back to the forum as soon as i need more help.

Also, I added the credit in the source code :) Didnt realise i had got the javascipt from Dynamic Drive!

[mburt]

John:

100% of what?

100% of the page height.

[jscheuer1]

It doesn't always work out that way.