Dynamically change Iframe or Table [Archive]

Click to See Complete Forum and Search --> : Dynamically change Iframe or Table

yagi

February 8th, 2006, 03:51 PM

Hello everyone,

Im am using an Iframe as my main window for information with a java menu with links that target the iframe. On almost my entire site Ive been using % instead of set numbers so pages can expand with the size of the person's screen, but now I've run into some trouble. After putting in the Iframe I can not get that part to have the height change, it stays set at some unkown number. I'm pretty sure I got the width down, but the height wont expand with the page Im sending to the Iframe. Below is my code so far, any help would be greatly appreciated.

<link rel=StyleSheet href="corporatestyle.css" type="text/css" media="screen"><script language="JavaScript">

</script>

<script language="JavaScript" src="javascripts.js"></script>

<style>

</style>

</head><BODY BGCOLOR="#FFFFFF" background="picts/background-main.gif" TEXT="#000000" LINK="#339966" VLINK="#663399" ALINK="#666666" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0"><TABLE cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"><tr><td ALIGN="LEFT" VALIGN="TOP"><script language="JavaScript" src="header.js"></script>

<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="picts/main.jpg">
<IMG SRC="picts/spacer.gif" border="0" width="700" height="80"><br></td></tr></table><img src="picts/stretchbar.jpg" width="100%" height="28"><br><script language="JavaScript" src="menu.js"></script>

<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="picts/shadow1.gif"><tr><td width="227"><IMG SRC="picts/corner.gif" height="40" width="227"><br></td><td><IMG SRC="picts/spacer.gif" height="40" width="10" border="0"><br></td></tr></table><TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="left" VALIGN="top"><TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td ALIGN="LEFT" VALIGN="TOP"><br></td><td ALIGN="LEFT" VALIGN="TOP" width="150"><script language="JavaScript" src="sidebar.js"></script>

<IMG SRC="picts/spacer.gif" height="5" width="150" border="0"><br></td><td ALIGN="LEFT" VALIGN="TOP" width="30"><IMG SRC="picts/spacer.gif" height="400" width="30" border="0"><br></td><td ALIGN="CENTER" VALIGN="TOP"><TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="LEFT" VALIGN="TOP"><p class="just">

<IFRAME name="Frame" src="main.html" width="100%" height="100%" frameborder="0" scrolling="no">
</IFRAME>

<br><br></p></p></p></p></p> </span></td></tr><tr><td ALIGN="LEFT" VALIGN="TOP"> </td></tr><tr><td ALIGN="LEFT" VALIGN="TOP"> </td></tr></table></td></tr></table></td></tr></table></TD></TR><TR><TD VALIGN="BOTTOM"><img src="picts/stretchbar.jpg" width="100%" height="28"><br><TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="picts/bottom-shade.gif"><tr><td width="10"><IMG SRC="picts/spacer.gif" height="45" width="10" border="0"><br></td><td ALIGN="left" VALIGN="middle"><script language="JavaScript" src="copyright.js"></script>

</td><td ALIGN="right" VALIGN="middle"><script language="JavaScript" src="lastUpdated.js"></script>

</TD><td width="10"><IMG SRC="picts/spacer.gif" height="10" width="10" border="0"><br></td></tr></table></td></tr></table></BODY></HTML><script language="JavaScript">

</script>

PeejAvery

February 8th, 2006, 04:39 PM

Please enclose your code with code tags. This (http://www.codeguru.com/forum/misc.php?do=bbcode#code) will help to do so. I am working but will take a look at the code tonight. Maybe someone else will before I get a chance. Either way, we will do our best to solve your problem.

yagi

February 8th, 2006, 04:49 PM

Lets see if this works:

<link rel=StyleSheet href="corporatestyle.css" type="text/css" media="screen"><script language="JavaScript">

</script>

<script language="JavaScript" src="javascripts.js"></script>

<style>

</style>

</head><BODY BGCOLOR="#FFFFFF" background="picts/background-main.gif" TEXT="#000000" LINK="#339966" VLINK="#663399" ALINK="#666666" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0"><TABLE cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"><tr><td ALIGN="LEFT" VALIGN="TOP"><script language="JavaScript" src="header.js"></script>

<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="picts/main.jpg">
<IMG SRC="picts/spacer.gif" border="0" width="700" height="80"><br></td></tr></table><img src="picts/stretchbar.jpg" width="100%" height="28"><br><script language="JavaScript" src="menu.js"></script>

<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="picts/shadow1.gif"><tr><td width="227"><IMG SRC="picts/corner.gif" height="40" width="227"><br></td><td><IMG SRC="picts/spacer.gif" height="40" width="10" border="0"><br></td></tr></table><TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="left" VALIGN="top"><TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td ALIGN="LEFT" VALIGN="TOP"><br></td><td ALIGN="LEFT" VALIGN="TOP" width="150"><script language="JavaScript" src="sidebar.js"></script>

<IMG SRC="picts/spacer.gif" height="5" width="150" border="0"><br></td><td ALIGN="LEFT" VALIGN="TOP" width="30"><IMG SRC="picts/spacer.gif" height="400" width="30" border="0"><br></td><td ALIGN="CENTER" VALIGN="TOP"><TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="LEFT" VALIGN="TOP"><p class="just">

<IFRAME name="Frame" src="main.html" width="100%" height="100%" frameborder="0" scrolling="no">
</IFRAME>

<br><br></p></p></p></p></p> </span></td></tr><tr><td ALIGN="LEFT" VALIGN="TOP"> </td></tr><tr><td ALIGN="LEFT" VALIGN="TOP"> </td></tr></table></td></tr></table></td></tr></table></TD></TR><TR><TD VALIGN="BOTTOM"><img src="picts/stretchbar.jpg" width="100%" height="28"><br><TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="picts/bottom-shade.gif"><tr><td width="10"><IMG SRC="picts/spacer.gif" height="45" width="10" border="0"><br></td><td ALIGN="left" VALIGN="middle"><script language="JavaScript" src="copyright.js"></script>

</td><td ALIGN="right" VALIGN="middle"><script language="JavaScript" src="lastUpdated.js"></script>

</TD><td width="10"><IMG SRC="picts/spacer.gif" height="10" width="10" border="0"><br></td></tr></table></td></tr></table></BODY></HTML><script language="JavaScript">

</script>

PeejAvery

February 9th, 2006, 01:06 AM

Okay, I am really tired so I only have a few free moments. In a nutshell, here is your problem.

A browser can use percents easily working with width because there is a more distiguishable difference of width. With height, there could be scrollbars. Therefore if you set a table to 100% height, what it does could vary. The browser is going to think, "Is that 100% of the window? Or is that 100% of the screen? Or should I just be infinite in height?"

Pretty much, when using percentages for sizes it is never good unless you have that inside a table or some other object that is static in size.

I don't have time to test it now but try putting a <table> around the IFRAME.
<table cellpadding=0 cellspacing=0 border=0><tr><td>
<IFRAME name="Frame" src="main.html" width="100%" height="100%" frameborder="0" scrolling="no"></IFRAME>
</td></tr></table>

yagi

February 9th, 2006, 01:15 PM

Unfortunately that didnt work, it actually made the box smaller. And if you notice from the code there is a table already surrounding the Iframe that I had in there.

PeejAvery

February 9th, 2006, 04:07 PM

Yes, I did see that table but that table has other elements in it. This would cause the whole attempt I was doing to be a waste.

Okay, I was afraid of this. You will have to use offsetHeight and set the IFRAME's height to this.

yagi

February 9th, 2006, 04:11 PM

Ok, If you're afraid of this then Im scared s**tless of this then. What is offsetHeight and what do I have to do?

PeejAvery

February 9th, 2006, 04:47 PM

Well, it isn't that hard, it is just kind of annoying. The property offsetHeight returns the value of a properties height.

In short, you will have to write a JavaScript function that will get the height of the object it is within, then assign that returned value to the IFRAME. If you put it in a table and name that table, the JavaScript can get the height and do it but that is extra coding on every page.

Basically you want is to use regular frames, not iframes.

yagi

February 10th, 2006, 11:13 AM

Regular frames at this point will just be way too much of a hastle. How much extra coding on each page will be required? And when you say each page, you mean each page being displayed in the Iframe? Because the rest of the page is set to stay and only thing changing is what's in the Iframe.

yagi

February 10th, 2006, 11:28 AM

PeejAvery

February 10th, 2006, 01:08 PM

Peejavery, I found the following link, http://www.javascripter.net/faq/browserw.htm, and am pretty sure this is what I need and what you were talking about. Now how would I implement it the way you were talking about?
Yes, this link is what I was talking about.

Concerning where to put it, you need this one only in the page that contains the IFRAME not every page.

Now, what you need to do is put the following at the bottom of your HTML. Note the bolded part names TAKEN. This is the pixel height of the part of your document that is not the IFRAME. Also, make sure you assign an ID to the IFRAME.
<script language="JavaScript">
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth-16;
winH = window.innerHeight-16;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth-20;
winH = document.body.offsetHeight-20;
}
}

document.getElementById('IFRAMEID').style.height = winH - TAKEN;
</script>

yagi

February 10th, 2006, 02:04 PM

Yes, this link is what I was talking about.

Concerning where to put it, you need this one only in the page that contains the IFRAME not every page.

Now, what you need to do is put the following at the bottom of your HTML. Note the bolded part names TAKEN. This is the pixel height of the part of your document that is not the IFRAME. Also, make sure you assign an ID to the IFRAME.
<script language="JavaScript">
if (parseInt(navigator.appVersion)>3) {
if (navigator.appName=="Netscape") {
winW = window.innerWidth-16;
winH = window.innerHeight-16;
}
if (navigator.appName.indexOf("Microsoft")!=-1) {
winW = document.body.offsetWidth-20;
winH = document.body.offsetHeight-20;
}
}

document.getElementById('IFRAMEID').style.height = winH - TAKEN;
</script>

So I change IFRAMEID to Frame since that is the name of my IFrame. Then I do what with Taken? Is Taken the value I put under height? Im a little confused now.

PeejAvery

February 10th, 2006, 03:38 PM

So I change IFRAMEID to Frame since that is the name of my IFrame.
Well, did you change the FRAMEID to your iframe's name or create an id for the iframe? Below will help you to see what I mean.

<iframe id="ID GOES HERE"...
Then I do what with Taken?
So we want the iframe to have a height that covers the "rest" of the available browser window. Right?

Example: Say we have a table that is 100 pixels in height. If we set the iframe to be the whole height of the page, we will be 100 pixels over because of the table.

Adjust the taken to the total pixels of the heights of all other objects above or below the iframe.

yagi

February 10th, 2006, 04:14 PM

I did put the iframe id in there, I used the wrong terminiology above. Sorry. And as forAdjust the taken to the total pixels of the heights of all other objects above or below the iframe. How do I do that? The code for the page in question is above so maybe if you show me off that Id understand a little bit better.

PeejAvery

February 11th, 2006, 12:56 AM

And as for How do I do that?
You will have to get the height of each item through scripting and add those heights together and then subtract them from the offsetHeight.

Okay, back to the frameset instead of iframe. I am wondering why do you think that it cannot be done? I have done a lot to break up the code for you. I even moved the JavaScript to a JS file so that you can work with it in any frame. You should be able to make the transfer now.

Just keep changing the TOPFRAMEHEIGHT and BOTTOMFRAMEHEIGHT to the correct height pixels until it looks right. The * means that the middle frame will take whatever is not used.

index.html
<html>
<frameset rows = "TOPFRAMEHEIGHT,*,BOTTOMFRAMEHEIGHT">
<frame src ="top.html" name="top">
<frame src ="home.html" name="Frame">
<frame src ="bottom.html" name="bottom">
</frameset>
</html>

top.html
<link rel=StyleSheet href="corporatestyle.css" type="text/css" media="screen">

<script language="JavaScript" src="scripts.js"></script>
<script language="JavaScript" src="javascripts.js"></script>

<style>

</style>

</head><BODY BGCOLOR="#FFFFFF" background="picts/background-main.gif" TEXT="#000000" LINK="#339966" VLINK="#663399" ALINK="#666666" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0"><TABLE cellpadding="0" cellspacing="0" border="0" width="100%" height="100%"><tr><td ALIGN="LEFT" VALIGN="TOP"><script language="JavaScript" src="header.js"></script>

<TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td background="picts/main.jpg">
<IMG SRC="picts/spacer.gif" border="0" width="700" height="80"><br></td></tr></table><img src="picts/stretchbar.jpg" width="100%" height="28"><br><script language="JavaScript" src="menu.js"></script>

<TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="picts/shadow1.gif"><tr><td width="227"><IMG SRC="picts/corner.gif" height="40" width="227"><br></td><td><IMG SRC="picts/spacer.gif" height="40" width="10" border="0"><br></td></tr></table><TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="left" VALIGN="top"><TABLE cellpadding="0" cellspacing="0" border="0" width="100%">
<tr><td ALIGN="LEFT" VALIGN="TOP"><br></td><td ALIGN="LEFT" VALIGN="TOP" width="150"><script language="JavaScript" src="sidebar.js"></script>

<IMG SRC="picts/spacer.gif" height="5" width="150" border="0"><br></td><td ALIGN="LEFT" VALIGN="TOP" width="30"><IMG SRC="picts/spacer.gif" height="400" width="30" border="0"><br></td><td ALIGN="CENTER" VALIGN="TOP"><TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td ALIGN="LEFT" VALIGN="TOP"><p class="just">

bottom.html
<br><br></p></p></p></p></p> </span></td></tr><tr><td ALIGN="LEFT" VALIGN="TOP"> </td></tr><tr><td ALIGN="LEFT" VALIGN="TOP"> </td></tr></table></td></tr></table></td></tr></table></TD></TR><TR><TD VALIGN="BOTTOM"><img src="picts/stretchbar.jpg" width="100%" height="28"><br><TABLE cellpadding="0" cellspacing="0" border="0" width="100%" background="picts/bottom-shade.gif"><tr><td width="10"><IMG SRC="picts/spacer.gif" height="45" width="10" border="0"><br></td><td ALIGN="left" VALIGN="middle"><script language="JavaScript" src="copyright.js"></script>

<script language="JavaScript" src="scripts.js"></script>

</td><td ALIGN="right" VALIGN="middle"><script language="JavaScript" src="lastUpdated.js"></script>

</TD><td width="10"><IMG SRC="picts/spacer.gif" height="10" width="10" border="0"><br></td></tr></table></td></tr></table></BODY></HTML>

scripts.js
function SymError()
{
return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

var SymRealOnLoad;
var SymRealOnUnload;

function SymOnUnload()
{
window.open = SymWinOpen;
if(SymRealOnUnload != null)
SymRealOnUnload();
}

function SymOnLoad()
{
if(SymRealOnLoad != null)
SymRealOnLoad();
window.open = SymRealWinOpen;
SymRealOnUnload = window.onunload;
window.onunload = SymOnUnload;
}

SymRealOnLoad = window.onload;
window.onload = SymOnLoad;