PDA

View Full Version : Iframe SSI script II



hask23
07-18-2005, 10:49 PM
Iframe SSI script II
http://www.dynamicdrive.com/dynamicindex17/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
07-18-2005, 11:41 PM
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
07-19-2005, 02:05 AM
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 (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 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 (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 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
07-19-2005, 03:51 AM
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
07-20-2005, 10:43 PM
Here's a test page.

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

ddadmin
07-21-2005, 07:59 PM
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
07-22-2005, 04:24 AM
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
07-22-2005, 06:29 PM
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
07-22-2005, 11:59 PM
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
07-24-2005, 10:32 PM
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.

anonymouse
08-03-2005, 04:35 AM
Is there a way to manually override the automatic nature of the script, (since it seems to have a few cases it won't work with) and manually tell the iframe what the height should resize to (in a link)?

I'm not sure if that's clear, so I'll try to rephrase it. Can I just put a javascript function (or anything else) in the link clicked that will override the auto resize and resize it manually.

If I could do this, I could manually insert the needed space for pages that I know will expand without loading a new page, causing a scroller to appear or to have content outside of the frame.

simoncullen
08-19-2006, 10:42 AM
I am having a similar problem to many --- only I can't find any way of fixing it. My iframe expands easily enough, but at certain points it will not *contract* ... usually when coming from a very long page.

You can see the problem here: http://discursively.org/gallery2.php


click on one of the larger galleries (say, "newyork"). Everything's working well, up to this point. Then, click on one of the images inside the gallery (e.g., "jack") and it wont shink back down to an appropriate size...

Any help would be appreciated! I have spent hours on this now...

Simon