The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

iframe auto height

3 posters

Go down

iframe auto height Empty iframe auto height

Post by jasonseabaugh Tue 3 Apr - 18:53

Curious if anyone has tried this? I've got a website which I want my forumotion forum to be one of the subpages, in which case it should appear inside the centeral iframe. Now, my iframe is designed to auto-resize based on the contents of page loaded into the iframe, as a way to eliminate iframe scrollbars, which is pretty easy to do when parent and source are on the same domain. Since, forumotion is on a different domain I need to find another way to post the height of the loaded page, and to recalculate that height when the source page changes height.

I figure there's just a Javascript I need to add, but I'm a bit new to javascript and have gotten lost trying to do the leg work. If anyone has already overcome this issue and wouldn't mind sharing the code, that'd be great.
avatar
jasonseabaugh
New Member

Posts : 13
Reputation : 1
Language : English

Back to top Go down

iframe auto height Empty Re: iframe auto height

Post by kirk Tue 3 Apr - 19:36

here is a iframe you can adjust the height and width.

Code:
<iframe src='YOU URL LINK HERE' width='100%' height='825px' style='border: 0px solid #'></iframe>
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

iframe auto height Empty Re: iframe auto height

Post by jasonseabaugh Tue 3 Apr - 19:46

That's just a basic iframe tag. I'm looking for code (likely javascript) for an iframe that will auto-resize it's height information based on the contents of page loaded into the iframe.
avatar
jasonseabaugh
New Member

Posts : 13
Reputation : 1
Language : English

Back to top Go down

iframe auto height Empty Re: iframe auto height

Post by kirk Tue 3 Apr - 20:14

jasonseabaugh wrote:That's just a basic iframe tag. I'm looking for code (likely javascript) for an iframe that will auto-resize it's height information based on the contents of page loaded into the iframe.

yeah not sure, you can read this over here.
http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx

or try this, i have not tested it though.


Code:
<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=["maincntnt"]



//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++){
if (document.getElementById)
resizeIframe(iframeids)
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
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>



 

Other then that if those two scripts do not help above, I am sure someone will have one for you. I my self usually just use basic frames, here is a better one you can remove the scroll with. And yes i know you said it's not what your looking for just figured i would add it anyway in case you wanted to try it Smile
Code:

<iframe src="SITE URL HERE" width="100%"
height="100%" name="youriframe" frameborder="0" vspace="0" hspace="0"
marginwidth="0" marginheight="0" scrolling="no" noresize></iframe>
 


Last edited by kirk on Tue 3 Apr - 20:21; edited 1 time in total
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

iframe auto height Empty Re: iframe auto height

Post by kirk Tue 3 Apr - 20:24

Rideem3 wrote:How big do you want the iframe? To cover the whole page?

Yeah i think he wants it to basically open up and auto re-size the same way the content is presented on whatever site url he is using? If not he can explain more
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

iframe auto height Empty Re: iframe auto height

Post by jasonseabaugh Wed 4 Apr - 3:39

How big do you want the iframe? To cover the whole page?

Sort of. I want to be able to explicitly define the width, so it's fits in my website's visual shell, and I want the height to be dynamic, adjusting to the height of the source page.

This can be done if you have complete control over the HTML of both parent website (my website) and the child website (iframe content: my forum). For Forumotion I can only add javascripts, not control the contents of the HTML in the page.

I'm hoping someone has already figured out how to do this and has code to share.
avatar
jasonseabaugh
New Member

Posts : 13
Reputation : 1
Language : English

Back to top Go down

iframe auto height Empty Re: iframe auto height

Post by LGforum Wed 4 Apr - 4:22

Give the iframe an Name attribute of 'mainframe'
And try adding this right below it:

Code:

<script>
(function(){
var iframe = parent['mainframe'];
var height = iframe.document.body.offsetHeight;
iframe.setAttribute('height',height);
})();
</script>
LGforum
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

iframe auto height Empty Re: iframe auto height

Post by jasonseabaugh Thu 5 Apr - 3:38

That code snippet does not work cross-domain. There's a lot of information on the web about cross-domain iframe height setting, but it's a bit out of my depth... which is why I was hoping to find someone who crossed that bridge already and had code to share. Thanks for your input, tho.
avatar
jasonseabaugh
New Member

Posts : 13
Reputation : 1
Language : English

Back to top Go down

iframe auto height Empty Re: iframe auto height

Post by kirk Thu 5 Apr - 5:14

What about LG code, his stuff usually rocks?

whats that schools thing website a lot of people go to for coding and web designing, i forget the name of it but i bet you can find it there. it's something school????? lol i cant remember Sad

Someone will know what site i am talking about. Very good
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

iframe auto height Empty Re: iframe auto height

Post by LGforum Thu 5 Apr - 5:15

What do you meAn cross domain?
It's standard JavaScript and the domain does not affect it.

The problem may be that it is executing before the iframe content is loaded.
In which case do this:

Code:

<script>
function setIframeHeight(iframe) {
  iframe.setAttribute('height',parent.mainframe.document.body.offsetHeight);
}
</script>

You'll need to include that code snippet in your sites HTML somewhere.
And change your iframe to have an onload attribute.
onload="setIframeHeight(this)"

And also keep it with a name attribute of 'mainframe'

This DOES work, it's a simple task honestly. If it doesn't work you have done something wrong or missed something out.
LGforum
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

iframe auto height Empty Re: iframe auto height

Post by kirk Thu 5 Apr - 5:43

yeah jasonseabaugh i would not go getting side tracked with that link i posted,That's just something i found and dint know if it would help you or not. I just did a google search and found them few items on it. I was hoping you would know if thats what you needed or not..

So try what LG has said and take your time with it.

Oh by the way if someone knows the name of that site i was talking about can you please post the link Smile

Thanx
kirk
kirk
Forumaster

Male Posts : 11037
Reputation : 653
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

iframe auto height Empty Re: iframe auto height

Post by LGforum Thu 5 Apr - 5:48

I'm guessing you mean w3schools Wink
It can be a great resource, especially for people learning.
LGforum
LGforum
Hyperactive

Male Posts : 2265
Reputation : 264
Language : English
Location : UK

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum