Iframe SSI script II

[hask23]

Iframe SSI script II
http://www.dynamicdrive.com/dynamici...iframessi2.htm

I was just curious if there is a way to automatically adjust the height and the width in the Iframe. I need the width to be bigger than 100%, some images are being cut off. Or is my only option to turn on the scrollbars?

Thanks, Matt

[ddadmin]

This script actually only manipulates the iframe's height, not the width. To change the later then, try simply editing the style="width: 100%" portion inside the iframe. To change the former, these two lines inside the script need to be changed:

currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight+30; 

currentfr.height = currentfr.Document.body.scrollHeight+30;

I've added "30" to the end.

[hask23]

I modified the code to do what I needed with one exception, when I hit the back button the page remains at the same width as before. For example, I click on a image link in the Iframe, the image is 1200x1200. When I hit the back button my page is still 1200px wide, so now i have a scrollbar for the left and right. How can I get it to go back to its original size without the scrollbar? Plus, I'm sure I could simplify the code to do the same thing but I'm not that experienced with DHTML.

Thanks again, Matt

</***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library ([url]http://www.dynamicdrive.com[/url])
* 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 FFextraWidth=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.offsetWidth) //ns6 syntax
currentfr.width = currentfr.contentDocument.body.offsetWidth+FFextraWidth; 
else if (currentfr.Document && currentfr.Document.body.scrollWidth) //ie5+ syntax
currentfr.width = currentfr.Document.body.scrollWidth;
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>

<script type="text/javascript">

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library ([url]http://www.dynamicdrive.com[/url])
* 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 resizeCaller1() {
var dyniframe1=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe1(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 resizeIframe1(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", readjustIframe1, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe1) // Bug fix line
currentfr.attachEvent("onload", readjustIframe1)
}
}
}

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

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

if (window.addEventListener)
window.addEventListener("load", resizeCaller1, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller1)
else
window.onload=resizeCaller1
</script>>

[ddadmin]

Hmm I think I understand your question, but am missing a few pieces. Do you have an online example of the problem I can simply look at?

[hask23]

Here's a test page.

http://matthaskell.20m.com/main.htm

[ddadmin]

Ok, I see the problem, though I can't quite find the cause yet. One thing I noticed is that you have two copies of the script on the same page- there should only be one.

[anonymouse]

I think I'm having a similar problem. I can get the resize to work fine when the page is loaded, but if the page is expanded without being refreshed, the scrollbar shows up to make up for the extra space on the page. Then when page is contracted, the bar stays there. Is there a way that the iframe can resize actively without refreshing the page?

[ddadmin]

Well, the script actually does attempt to resize the iframe each time a new document is loaded into it. The problem is when you're using browser's back button to do so, the resize function seems to not always fire, specifically, when the iframe was previously stretched to create scrollbars.

[anonymouse]

I'm not talking about loading a new document into it. I'm talking about when a current frame gets bigger (for example, a popup expands the needed space in the frame)--the script doesn't know to resize in this case.

[hask23]

Ok, I see the problem, though I can't quite find the cause yet. One thing I noticed is that you have two copies of the script on the same page- there should only be one.

The reason I have two copies of the script on the same page is one is to resize the height and the other is to resize the width. Like I said earlier, I'm sure you could simplify the code to do the same thing but I don't know much about DHTML so I just did what worked.