canadianjameson
05-30-2004, 06:04 PM
I was recently desperately looking for a method of making my IFRAME's height variable based on the height of the page loaded into it, because it was cutting off the tables i had loading into it... and like a gift from god, jfreak53 posted this for me. I figured i'd share it publically so that everyone could use it if needed.
Cheers,
-- Jameson
Ok, this took me almost all night to find on the net, but I found a site that had this in JavaScript, here it is:
In the main page that has the Iframe you put this:
<script type="text/javascript">
/*************************************************************************
This code is from Dynamic Web Coding at http://www.dyn-web.com/
See Terms of Use at http://www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/
function getDocHeight(doc) {
var docHt = 0, sh, oh;
if (doc.height) docHt = doc.height;
else if (doc.body) {
if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
if (sh && oh) docHt = Math.max(sh, oh);
}
return docHt;
}
function setIframeHeight(iframeName) {
var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if ( iframeEl && iframeWin ) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
if (docHt) iframeEl.style.height = docHt + 30 + "px";
}
}
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
</script>
That goes in the head of the doc, then this is put in every link, like this, example:
<a href="doc.html" loadIframe('main', this.href)">
The onclick is the thing that reloads the doc and tells it what name of iframe to use, but I have found out this onclick is not necesary, just use the normal target="framename", now in each document that you want to load inside the iframe:
<script type="text/javascript">
function goSetHeight() {
if (parent == window) return;
// arg: id of iframe element this doc is to be loaded into
else parent.setIframeHeight('main');
}
</script>
That's inside the head part of the docs then this is added to the body part like this:
<body >
Cheers,
-- Jameson
Ok, this took me almost all night to find on the net, but I found a site that had this in JavaScript, here it is:
In the main page that has the Iframe you put this:
<script type="text/javascript">
/*************************************************************************
This code is from Dynamic Web Coding at http://www.dyn-web.com/
See Terms of Use at http://www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/
function getDocHeight(doc) {
var docHt = 0, sh, oh;
if (doc.height) docHt = doc.height;
else if (doc.body) {
if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
if (sh && oh) docHt = Math.max(sh, oh);
}
return docHt;
}
function setIframeHeight(iframeName) {
var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if ( iframeEl && iframeWin ) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
if (docHt) iframeEl.style.height = docHt + 30 + "px";
}
}
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
</script>
That goes in the head of the doc, then this is put in every link, like this, example:
<a href="doc.html" loadIframe('main', this.href)">
The onclick is the thing that reloads the doc and tells it what name of iframe to use, but I have found out this onclick is not necesary, just use the normal target="framename", now in each document that you want to load inside the iframe:
<script type="text/javascript">
function goSetHeight() {
if (parent == window) return;
// arg: id of iframe element this doc is to be loaded into
else parent.setIframeHeight('main');
}
</script>
That's inside the head part of the docs then this is added to the body part like this:
<body >
Garadon
05-30-2004, 06:57 PM
one is of the assumption that you got an iframe tag in which case it would be easier just setting that tags onload event than adding code to every single document loaded in it
canadianjameson
05-30-2004, 09:38 PM
ahh but you see my good sir, while the logic is true... the application of said logic fails in practice. setting the iframe height="100%" does not actually work, as while it does set it to 100% of the page you see, if the page being loaded into it is more than 100% of the page you see, it cuts it off.
odd, but true. give it a shot.
oh, and your sphere3d post url doesnt work :(
odd, but true. give it a shot.
oh, and your sphere3d post url doesnt work :(
WA
05-31-2004, 01:21 AM
You should also take a look at the following two scripts, which auto resize an iframe's height to be that of the content contained within:
Iframe SSI script (http://www.dynamicdrive.com/dynamicindex17/iframessi.htm)
Iframe SSI script 2 (http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm)
Iframe SSI script (http://www.dynamicdrive.com/dynamicindex17/iframessi.htm)
Iframe SSI script 2 (http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm)
canadianjameson
05-31-2004, 05:19 AM
hmm, funfun.
would this script be more compatible than the one i'm using, or be prone to less errors?
i.e should i switch scripts?
would this script be more compatible than the one i'm using, or be prone to less errors?
i.e should i switch scripts?
Garadon
05-31-2004, 06:39 AM
didn't say anything about setting it to 100% I said use its onload event
<iframe >
<iframe >
ivy
05-31-2004, 04:28 PM
Hi guys,
Just been reading all the above. excellent stuff.
Looked at the recommended links from WA - great, but...
I need to be able to load external pages as well as my own into the iFrame. And of course would like the iFrame resized each time to accommodate the page being loaded into it. Also, I have PowerPoint presentations being loaded into the iFrame. I was looking at Garadon's reply but where would I put the onload? I guess in the <iFrame> tag but how to I write it correctly? I currently have:
<iframe src="http://www.mydomain.com/page1.shtml" name="if001" scrolling="yes" align="top" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>
which doesn't do what I require!!!
Look forward to hearing from you.
Just been reading all the above. excellent stuff.
Looked at the recommended links from WA - great, but...
I need to be able to load external pages as well as my own into the iFrame. And of course would like the iFrame resized each time to accommodate the page being loaded into it. Also, I have PowerPoint presentations being loaded into the iFrame. I was looking at Garadon's reply but where would I put the onload? I guess in the <iFrame> tag but how to I write it correctly? I currently have:
<iframe src="http://www.mydomain.com/page1.shtml" name="if001" scrolling="yes" align="top" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>
which doesn't do what I require!!!
Look forward to hearing from you.
WA
05-31-2004, 08:06 PM
Ivy: By external pages, do you mean pages from another domain? Unfortunately the two scripts I posted cannot resize the iframe once it contains a page from a different domain than the one it's on itself, due to inherent security limitations with JavaScript.
canadianjameson
05-31-2004, 09:29 PM
any word on whether i should switch scripts?
ivy
06-01-2004, 01:15 PM
Hi WA et al
Thank you for your reply. Yes, I did mean external pages on another domain. I'll have to ponder over this for a while. I'm wondering whether the iframe can have a class and css deal with it using overflow:inherit ???- not sure will look at it this afternoon and will post back if I sort it!
I know that the obvious solution is probably to use a target window for external links, but I am developing an educational site that requires the navigation panel to be visible always (makes it easier to navigate and know where you are) and also to cross reference using external site in the iframe and looking at what is available on the original domian. (Make sense?? I think so!)
I was really excited with canadianjamson's original post but I cannot, for obvious reasons, get the code onto all pages loaded into the iframe!
I tried using Garadon's solution, but couldn't get it to work... I used:
<iframe src="http://www.mydomain.com/page1.shtml" name="if001" align="top" marginwidth="0" marginheight="0" frameborder="0"></iframe>
Do I need to change the (this.name) to anything???? I am not sure what to do with that!
Thank you for help so far.... Look forwrad to receiving just a little more !!!
Thank you for your reply. Yes, I did mean external pages on another domain. I'll have to ponder over this for a while. I'm wondering whether the iframe can have a class and css deal with it using overflow:inherit ???- not sure will look at it this afternoon and will post back if I sort it!
I know that the obvious solution is probably to use a target window for external links, but I am developing an educational site that requires the navigation panel to be visible always (makes it easier to navigate and know where you are) and also to cross reference using external site in the iframe and looking at what is available on the original domian. (Make sense?? I think so!)
I was really excited with canadianjamson's original post but I cannot, for obvious reasons, get the code onto all pages loaded into the iframe!
I tried using Garadon's solution, but couldn't get it to work... I used:
<iframe src="http://www.mydomain.com/page1.shtml" name="if001" align="top" marginwidth="0" marginheight="0" frameborder="0"></iframe>
Do I need to change the (this.name) to anything???? I am not sure what to do with that!
Thank you for help so far.... Look forwrad to receiving just a little more !!!
canadianjameson
06-01-2004, 03:32 PM
i wonder if you can remotely execute a code
something like run blahblah
doubt it though.
well, perhaps you could load your external iframe content into a LAYER on a blank html page... have that blank page load into the iframe instead of the external page directly. that way you could set the LAYER's height & width to 100% (getting the exact effect of loading directly into the iframe), and you could add the necessary scripts into the <head> and <body> to use my iframe script :)
something like run blahblah
doubt it though.
well, perhaps you could load your external iframe content into a LAYER on a blank html page... have that blank page load into the iframe instead of the external page directly. that way you could set the LAYER's height & width to 100% (getting the exact effect of loading directly into the iframe), and you could add the necessary scripts into the <head> and <body> to use my iframe script :)
christine
10-06-2005, 12:10 AM
Can I get the iframe code as well, because the iframe code i have won't work unless I insert a height px
vBulletin® v3.7.3, Copyright ©2000-2009, Jelsoft Enterprises Ltd.