The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you're not yet.



Create a free forum like this one.

iframe auto height

View previous topic View next topic Go down

iframe auto height

Post by jasonseabaugh on April 4th 2012, 1:53 am

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.

jasonseabaugh
New Member

Posts: 13
Language: English
Points: 8
Join date: 2012-04-03

Back to top Go down

Re: iframe auto height

Post by kirk on April 4th 2012, 2:36 am

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
Hyperactive

Male
Posts: 11037
Language: English,Vulcan,Klingon, Romulan,& Gorn
Points: 36555
Join date: 2008-09-18

Back to top Go down

Re: iframe auto height

Post by jasonseabaugh on April 4th 2012, 2:46 am

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.

jasonseabaugh
New Member

Posts: 13
Language: English
Points: 8
Join date: 2012-04-03

Back to top Go down

Re: iframe auto height

Post by kirk on April 4th 2012, 3:14 am

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 April 4th 2012, 3:21 am; edited 1 time in total

kirk
Hyperactive

Male
Posts: 11037
Language: English,Vulcan,Klingon, Romulan,& Gorn
Points: 36555
Join date: 2008-09-18

Back to top Go down

Re: iframe auto height

Post by rideem on April 4th 2012, 3:20 am

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

rideem
Hyperactive

Male
Posts: 8155
Language: English l CSS l HTML l JavaScript l PHP | Java
Location: United States of America
Points: 8956
Join date: 2009-05-11

http://www.malware-site.www/

Back to top Go down

Re: iframe auto height

Post by kirk on April 4th 2012, 3:24 am

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
Hyperactive

Male
Posts: 11037
Language: English,Vulcan,Klingon, Romulan,& Gorn
Points: 36555
Join date: 2008-09-18

Back to top Go down

Re: iframe auto height

Post by jasonseabaugh on April 4th 2012, 10:39 am

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.

jasonseabaugh
New Member

Posts: 13
Language: English
Points: 8
Join date: 2012-04-03

Back to top Go down

Re: iframe auto height

Post by rideem on April 4th 2012, 11:04 am

To define the width and height you simply put in the style attribute.

iFrames aren't meant to automatically re-size as they are inline frames. You must adjust the width and height manually.

rideem
Hyperactive

Male
Posts: 8155
Language: English l CSS l HTML l JavaScript l PHP | Java
Location: United States of America
Points: 8956
Join date: 2009-05-11

http://www.malware-site.www/

Back to top Go down

Re: iframe auto height

Post by LGforum on April 4th 2012, 11:22 am

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
Hyperactive

Male
Posts: 2245
Language: English
Location: UK
Points: 2664
Join date: 2011-03-05

http://www.avacweb.com/

Back to top Go down

Re: iframe auto height

Post by rideem on April 4th 2012, 12:46 pm

Oh, right I forgot about offsetHeight Razz

That code should be right Smile
Thanks LG Wink

rideem
Hyperactive

Male
Posts: 8155
Language: English l CSS l HTML l JavaScript l PHP | Java
Location: United States of America
Points: 8956
Join date: 2009-05-11

http://www.malware-site.www/

Back to top Go down

Re: iframe auto height

Post by jasonseabaugh on April 5th 2012, 10:38 am

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.

jasonseabaugh
New Member

Posts: 13
Language: English
Points: 8
Join date: 2012-04-03

Back to top Go down

Re: iframe auto height

Post by kirk on April 5th 2012, 12:14 pm

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
Hyperactive

Male
Posts: 11037
Language: English,Vulcan,Klingon, Romulan,& Gorn
Points: 36555
Join date: 2008-09-18

Back to top Go down

Re: iframe auto height

Post by LGforum on April 5th 2012, 12:15 pm

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
Hyperactive

Male
Posts: 2245
Language: English
Location: UK
Points: 2664
Join date: 2011-03-05

http://www.avacweb.com/

Back to top Go down

Re: iframe auto height

Post by kirk on April 5th 2012, 12:43 pm

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
Hyperactive

Male
Posts: 11037
Language: English,Vulcan,Klingon, Romulan,& Gorn
Points: 36555
Join date: 2008-09-18

Back to top Go down

Re: iframe auto height

Post by LGforum on April 5th 2012, 12:48 pm

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

LGforum
Hyperactive

Male
Posts: 2245
Language: English
Location: UK
Points: 2664
Join date: 2011-03-05

http://www.avacweb.com/

Back to top Go down

View previous topic View next topic Back to top


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