PDA

View Full Version : IFrame SSI script II- firefox problem



paulhampson
03-12-2009, 12:46 PM
I am trying to implement the IFrame SSI script II, its works in IE8 but not firefox 3 (3.07). The strange thing is that the script works in firefox 3 for the page:
http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm
but not in my own implementation:

Any help would be appreciated.

This is the code for the container page:
[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1253">
<title>Scan 2 Web Document Conversion Service</title>
<meta name="generator" content="WYSIWYG Web Builder - http://www.wysiwygwebbuilder.com">
<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=["DynamicMenuFrame","DynamicContentFrame"]

//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

</script>


</head>
<body>
<div id="Contenttable" >
<iframe name="DynamicContentFrame" id="DynamicContentFrame" src="LoginContent.html" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:350px; display:none"></iframe>
</div>
<div id="Menutable">
<iframe name="DynamicMenuFrame" id="DynamicMenuFrame" src="LoginMenu.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>
</div>
</body>
</html>
[code]

Snookerman
03-12-2009, 01:44 PM
Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.

paulhampson
03-12-2009, 01:48 PM
That is my code

Its a skeleton and I can't even get that to work. It just gives a default height for the iframes
The code for the inside frames is:
LoginContent.html
{CODE}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1253">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder - http://www.wysiwygwebbuilder.com">
<style type="text/css">
div#container
{
width: 535px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
body
{
text-align: center;
margin: 0;
}
</style>
</head>
<body bgcolor="#ECEEF4" text="#000000">
<div id="container">
<div id="wb_Image1" style="overflow:hidden;position:absolute;left:0px;top:0px;z-index:11" align="left">
<img src="images/Panel BG2.gif" id="Image1" alt="" align="top" border="0" style="width:537px;height:17px;"></div>
<div id="wb_Text1" style="position:absolute;left:11px;top:4px;width:374px;height:14px;z-index:12" align="left">
<font style="font-size:11px" color="#000000" face="Arial">Scan2Web - LogIn</font></div>
<div id="wb_Form1" style="position:absolute;left:26px;top:31px;width:475px;height:229px;z-index:13" align="left">
<form name="Form1" method="post" action="mailto:yourname@yourdomain.com" enctype="text/plain" id="Form1">
<div id="wb_Text2" style="position:absolute;left:56px;top:33px;width:150px;height:24px;z-index:0" align="left">
<font style="font-size:21px" color="#000000" face="Arial"><b>Login</b></font></div>
<div id="wb_Text3" style="position:absolute;left:55px;top:72px;width:92px;height:19px;z-index:1" align="left">
<font style="font-size:16px" color="#000000" face="Arial"><b>User name:</b></font></div>
<div id="wb_Text4" style="position:absolute;left:51px;top:118px;width:88px;height:19px;z-index:2" align="left">
<font style="font-size:16px" color="#000000" face="Arial"><b>Password:</b></font></div>
<input type="text" id="Editbox1" style="position:absolute;left:171px;top:70px;width:0px;font-family:Courier New;font-size:16px;z-index:3" size="0" name="Editbox1" value="">
<input type="text" id="Editbox2" style="position:absolute;left:345px;top:74px;width:0px;font-family:Courier New;font-size:16px;z-index:4" size="0" name="Editbox2" value="">
<input type="text" id="Editbox3" style="position:absolute;left:155px;top:69px;width:240px;font-family:Courier New;font-size:16px;z-index:5" size="24" name="Editbox3" value="">
<input type="text" id="Editbox4" style="position:absolute;left:157px;top:112px;width:240px;font-family:Courier New;font-size:16px;z-index:6" size="24" name="Editbox4" value="">
<input type="checkbox" id="Checkbox1" name="Checkbox1" value="on" checked style="position:absolute;left:99px;top:158px;font-family:Arial;font-size:13px;z-index:7">
<div id="wb_Text5" style="position:absolute;left:136px;top:157px;width:181px;height:16px;z-index:8" align="left">
<font style="font-size:13px" color="#000000" face="Arial">Keep me logged in</font></div>
</form>
</div>
</div>
</body>
</html>
[CODE}

and the

paulhampson
03-13-2009, 11:58 AM
I found the problem. It was in the content page it seems the script was using the first style="height: " inf it found so I put all the content of the page in a DIV and included the width and height of the page in the style attribute.

The script no works but the images set to 100% in the table surrounding the iframe no longer fill the table cell as they keep there original length when the iframe and table are resized by the script.

Anyone help on that?