|
| |
|
|
zaphod
Posts: 32
Joined: 7/12/2002
Status: offline
 |
iframes - auto resize to heigh of content? - 9/10/2002 6:54:25
Hi,
I have built a page which has an iframe in it. I also have a page header and footer displayed on the page, shown by way of include file statements. The iframe is between the header and footer and is set to display a page not on my website.
The inserted page has hyperlinks on the page which the user can click, and thus the height of the content to be displayed changes.
Is it possible to set up the iframe so that it will auto size the frame window page to the size of the inserted page to be displayed, if it changes. I have currently had to set the height of the iframe very large so that it will display the biggest page of content that the user can display using the frame (800). The only problem with this is that most pages to be shown in the frame are only small, so for the most part users dont get to see the page footer.
One last point, I dont want to use a scroll bar to achieve the above.
Is it possible to do this, and if so how?
love
Zaphod
|
|
|
|
zaphod
Posts: 32
Joined: 7/12/2002
Status: offline
|
RE: RE: iframes - auto resize to heigh of content? - 9/11/2002 9:05:07
Thanks for responding. What a bummer!
zaphod
http://3GNo1.com
| |
|
|
|
marsyas
Posts: 1
Joined: 9/22/2004
Status: offline
|
RE: iframes - auto resize to heigh of content? - 9/22/2004 6:23:37
Use this javascript function in your frame page..
"
function resizeIframe(iframeID) {
if(self==parent) return false; /* Checks that page is in iframe. */
else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/
var FramePageHeight = framePage.scrollHeight + 10; /* framePage
is the ID of the framed page's BODY tag. The added 10 pixels prevent an
unnecessary scrollbar. */
parent.document.getElementById(iframeID).style.height=FramePageHeight;
/* "iframeID" is the ID of the inline frame in the parent page. */
}
"
and run it on load
"<body id="framePage" onload="resizeIframe('idTopFrame')">"
| |
|
|
|
stevec
Posts: 27
Joined: 4/18/2002
From: Texas
Status: offline
|
RE: iframes - auto resize to heigh of content? - 4/14/2005 1:37:25
I have this same issue, ideintical as described in this post.
I tried this code above but I don't really know what I am doing. I put it above the php includes and the browser spits it out in the display.
Here is what my page looks like
quote:
function resizeIframe(iframeID) {
if(self==parent) return false; /* Checks that page is in iframe. */
else if(document.getElementById&&document.all) /* Sniffs for IE5+.*/
var FramePageHeight = framePage.scrollHeight + 10; /* framePage
is the ID of the framed page's BODY tag. The added 10 pixels prevent an
unnecessary scrollbar. */
parent.document.getElementById(iframeID).style.height=FramePageHeight;
/* "iframeID" is the ID of the inline frame in the parent page. */
}
<body id="framePage" onload="resizeIframe('idTopFrame')">
<?php include( 'head.php' ); ?>
<div id="idx">
<iframe src="http://idx.actris.marketlinx.com/custom/Templates/search_1.asp?pid=1407" height="100%" width="770px" scrolling="auto"></iframe>
</div>
<?php include( 'foot.php' ); ?>
Where is my mistake? Do I just need to add tags to the top as if it were an html page?
I thought FrontPage use to have a proprietary feature that allowed the inclusion of external pages. I forget what it was called. I never used it but think I remember seeing it. I haven't used FP in a couple of years, am I remembering wrong?
Thanks
Steve
| |
|
|
|
Nigel
Posts: 382
Joined: 7/24/2002
From: Wirral - UK
Status: offline
|
RE: iframes - auto resize to heigh of content? - 4/18/2005 15:37:38
This works fine for me:
<iframe src="http://www.yourwebsite.com/page.asp" width="100%"
height="100%" name="youriframe" frameborder="1" vspace="0" hspace="0"
marginwidth="0" marginheight="0" scrolling="yes" noresize></iframe>
Change the scrolling to no if you dont want it
you can see it in action here:
www.newhallcars.com
click on findacar
I'm placing the contents of an asp page in the iframe and the asp page is calling the data from a database based on the search criteria.
Nigel
_____________________________
Innerview
Web Design - Virtual Tours - 360 Panoramas - Shopping carts
| |
|
|
|
stevec
Posts: 27
Joined: 4/18/2002
From: Texas
Status: offline
|
RE: iframes - auto resize to heigh of content? - 4/19/2005 19:53:37
I figured out that some of the code required to let an IFrame stretch to content length must go into the code of the framed page. In this case, I don't have access to that content to be able to do that.
I ended up just using a regular frame with no footer. This was the easiest approach though not ideal.
Thanks
Steve
| |
|
|
|
collide007
Posts: 1
Joined: 2/19/2007
Status: offline
|
RE: iframes - auto resize to heigh of content? - 2/19/2007 20:11:38
Hi, i have a similar problem, only I have descovered a really good script for resizing my iframes and works excellently. however my problem is that, I have a iframe on the page contained within the main iframe using the same script, which too works, however, when the height of the second iframe changes, it doesnt resize the main iframe so cutting off the end of the 2nd iframe, any suggestions? Thanks. Here is the code I am using:
<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>
| |
|
|
|
aaronfjerstad
Posts: 8
Joined: 5/30/2008
Status: offline
|
RE: iframes - auto resize to heigh of content? - 5/30/2008 17:56:33
I have been faced with this problem before. Here is one method you might try, depending on the content of the page. You could load the content inside a hidden IFRAME, put its innerHTML into a string variable and set the value of that variable as the innerHTML of a DIV. DIV's, unlike IFRAME's, readily adapt to their content, so it should, in theory, work for most content that you would want to show in an IFRAME without the bothersome scroll bars.
| |
|
|
|
aaronfjerstad
Posts: 8
Joined: 5/30/2008
Status: offline
|
RE: iframes - auto resize to heigh of content? - 5/30/2008 19:05:53
Here is an example of what I mean:
<html>
<body>
<script>
function changeContent()
{
document.getElementById('contentDIV').innerHTML = window.frames['contentFRAME'].document.getElementsByTagName('html')[0].innerHTML;
}
</script>
<div id = "contentDIV"><br></div>
<iframe id = "contentFRAME" name = "contentFRAME" src ="somethingInMyDomain.html" onLoad = "changeContent()" style = "height:0; width:0; border-width:0;"></iframe>
</body>
</html>
This method does not apply to anything with its own header and body tags. somethingInMyDomain.html might look something like this:
<html>
<table>
<th>The content of my page.</th>
<tr>
<td>Cell 1</td><td>Cell 2</td>
</tr>
</table>
<script>
alert("Hello");
</script>
</html>
Scripts will work, but they must be contained like so. Browsers do not know how to handle extra body and head tags. Also, this method will not work for pages outside its domain, as this creates a security threat.
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
