...

View Full Version : Iframe auto resize, expands but does not contract in IE/Safari.



gjkung
03-07-2011, 12:46 PM
http://isensors.com.sg/isensors-GJ/

That's the page I'm working on now, the script I'm using from here: http://www.frontpagewebmaster.com/m-89000/tm.htm posted by collide007.

It allows me to resize my iframe when a new page loads in it, it's working fine on Chrome and Firefox. For safari, the iframe expands but does not contract when a smaller page is loaded in. The code doesn't even work in IE.


<script type="text/javascript">

//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=["contentframe", "newsframe"]

//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? 3 : 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++){
var iframeid = iframeids[i];
if (document.getElementById)
resizeIframe(iframeid)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeid] : document.getElementById(iframeid)
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+50;
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight+50;
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>

Could someone kindly help me find the problem? Thanks.

Kor
03-07-2011, 12:55 PM
It contracts, but only after some background process ends. It might be related with the fact that you have a JavaScript error in your documents. You call a YAHOO object which is not defined. Maybe you miss a file from the Yahoo API.

gjkung
03-07-2011, 01:48 PM
Hi Kod, thanks for the reply.

Are you sure it contracts in Safari? And could you kindly point out the error as I did not write this code, i merely adapted it for my use.

What about in I.E, do you know why it isn't working at all?

Kor
03-07-2011, 01:56 PM
Hi Kod, thanks for the reply.

Are you sure it contracts in Safari? And could you kindly point out the error as I did not write this code, i merely adapted it for my use.

What about in I.E, do you know why it isn't working at all?
You said IE and safari. I have no Safari (I work on Win7), but I have tested in IE. In IE it works, but only after a considerable period (several seconds). Meanwhile the windows wait cursor shows that a process (I don't know which) works in background. Only after that process ends, the iframe is re-sized.

gjkung
03-07-2011, 04:31 PM
Thanks for pointing out. I don't have IE myself, so I only got a short glimpse at it. Will try again.

I know this sounds stupid, but which part did I call a YAHOO object? I have no idea what that is.

Logic Ali
03-07-2011, 05:16 PM
I know this sounds stupid, but which part did I call a YAHOO object? I have no idea what that is.news.asp is trying to load the following files, which do not exist:

<script type="text/javascript" src="./js/yahoo-min.js" ></script>
<script type="text/javascript" src="./js/dom-min.js" ></script>
<script type="text/javascript" src="./js/event-min.js" ></script>

gjkung
03-08-2011, 03:05 AM
ok thanks.

Logic Ali
03-08-2011, 05:26 AM
The code you're using seems to be installing event handlers twice for the same function. I also notice that one iframe has two different IDs, so it's not certain which frame is the target.

I would scrub that code and just use the much simpler code below, which I'm sure will work.

The event handler could be installed unobtrusively, but in the case of iframes, I.E. requires setAttribute to be used, so I just simplified it for now.

<script type='text/javascript'>

function setIframeHeight( iframeId )
{
var ifDoc, ifRef = document.getElementById( iframeId );

try
{
ifDoc = ifRef.contentWindow.document.documentElement;
}
catch( e )
{
try
{
ifDoc = ifRef.contentDocument.documentElement;
}
catch(ee)
{
}
}

if( ifDoc )
{
ifRef.height = ifDoc.scrollHeight; // Enable / disable
// ifRef.width = ifDoc.scrollWidth; // required lines
}
}

</script>

<iframe onload='setIframeHeight( this.id )' id="newsframe" name="newsframe" src="news.asp" width="100%" scrolling="no" frameborder="0" class="contentframe"></iframe>

gjkung
03-08-2011, 07:19 AM
Thanks Logic All, the new code works on firefox, but not on Internet Explorer still, I just tried it and the page just doesn't resize.

I have no idea why I have 2 id, I didn't even write that, I think Dreamweaver added it in on it's own when I opened the file with it and made a few changes.

The code works on Safari for expanding, but it still doesn't contract when the loaded page becomes smaller.

I've also fixed the missing JS files.

Thanks, have a look again.
http://isensors.com.sg/isensors-GJ/

Logic Ali
03-08-2011, 01:37 PM
The reason it doesn't work in I.E. is because the framed documents don't have a doctype. Just give them the same doctype as the paent pages:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

I don't see a problem in (Windows) Safari.

gjkung
03-09-2011, 02:03 AM
Hey thanks Logic Ali!

It's working now, such a simple mistake on my part!

Thanks for all the help guys!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum