PDA

View Full Version : Auto fit iframe to content



jitu78
December 5th, 2006, 05:27 AM
Hi All,
I am working on site where I am using iframes for dynamic html files.
Each html file having own length and my iframe height is fixed.
How can I set auto height for each page coming in iframe?

- Jits
globtier.com (http://www.globtier.com)

noTime
December 5th, 2006, 06:08 AM
You mean, you want to have iframe without scrollbar or smth?

jitu78
December 7th, 2006, 05:37 AM
You mean, you want to have iframe without scrollbar or smth?

No not really.

Sorry for not being clear!

When you put iframe somewhere to call any external file into that iframe, then you have to set iframe height. Right!

Now I want to set page height as per external page height so that no scroll appears around iframe.

And, my problem is that my contents are dynamic page height will vary page to page.

Is there any way to set iframe height on runtime automatically.

Thanks
Jits
globtier.com (http://www.globtier.com)

simplistik
December 7th, 2006, 09:26 AM
http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm

jitu78
December 8th, 2006, 08:16 AM
http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm


Sorry,

Link is not working...:hangover:

puppy
December 8th, 2006, 08:26 AM
Yes it does, and here is what it says (freaking copyright voilation, or fair use ?):

Step 1: Insert the below script into the HEAD section of your page:
<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(navigat or.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+FFextr aHeight;
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>Step 2: Having done the above, define the IFRAMEs you wish to be automatically resized, and insert them onto your page. An example looks like:
<iframe id="myframe" src="externalpage.htm" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>Last but not least, as shown in the demo above, you can actually use links on your main page to load a page into your IFRAME (with the IFRAME automatically resized to that page's height of course). To do so, the link should look like this:
<a href="javascript:loadintoIframe('myframe', 'external.htm')">Link</a>