This can not be found on http://www.digitalzen.org at this time. An HTML version will be published on The DigitalZen in the near future.

I suspect it's not as well refined as it seems to me at the moment. I'm rather spaced out, so if you notice any errors please let me know so I can correct them. Also, the section on resizing iFrames to fit their content was written much later than the surrounding information - so if it seems like it's written differently than the rest, there's a reason for that.
And now, without further ado...
  • Tutorial: Inline Frames

This tutorial deals with Inline Frames, which are also known as “iframes.”

Firstly, let’s discuss how to create a basic iframe. First, we’ll start with an example:
Code:
<iframe name=”iframe1” width=”100” height=”100” frameborder="1" scrolling=”yes” align=”center” src=”content.html”>
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
The above is a basic iframe. The name is important for referencing links to pages you wish to appear within the iframe. That will be discussed in a moment. The “src” link will be the default page for the iframe to load initially. The message between the iframe opening and closing tags will not appear in most instances, but will be displayed if a user is viewing your site in a browser that is not iframe compatible.

Now let’s demonstrate how one would link “page.html” to appear within the iframe. This can be done as follows:
Code:
<a target="iframe1" href="page.html">Click Here</a>
As you can see, the target is defined as “iframe1” which matches the name of the iframe as defined above. Now when “Click Here” is clicked on, the “page.html” will open within “iframe1.” Simple, eh?

Resizing Inline Frames

  • Resizing an iFrame to fit the height of the screen

Now there are a few problems with iFrames. One of these is the fact that you cannot set them to resize height and width to fit the screen using normal HTML. There is a way around this. However, it involves a little javascript. Insert the following script into the <head> of your HTML document:
Code:
<script language="javascript">
<!--
function resize_iframe()
{
document.getElementById("frsize").height=document.body.offsetHeight-document.getElementById("frsize").offsetTop-0;
}
window.onresize=resize_iframe; 
-->
</script>
To change the distance of the iFrame from the bottom of the screen (Don't ask), change the "offsetTop" number. In this example it is set to "0" but that can be changed to whatever fits your needs.
"window.onresize=resize_iframe;" will resize the iFrame with the “frsize” id every time you change the size of the window. To cause this code to alter a different iframe, simply change the id “frsize” for both “document.getElementById” lines.

This next segment is the tag that begins the body:
Code:
<body onload='resize_iframe()'>
And this code goes anywhere in the body of your document:
Code:
<span id=info></span>

<iframe id="frsize" width="100%" frameborder="1" name="iframe" scrolling="yes" align="center" src="content.html">
Your browser does not support inline frames or is currently not configured to display inline frames.
</iframe>
Note that the iframe id needs to be the same as the identifiers in the javascript.

  • Resizing an iFrame to fit content

Okay, I figured this out because someone asked me if I knew how. I didn't, so I learned. However, in the process I discovered that there are a lot of people out there looking to do exactly the same thing and there are very few simple answers given. So I figured I might share my solution with everybody. Who knows, maybe it will help someone.

This section will deal with two pages. The Main page (which is where the iFrame is located) and the Content page (which is where the content to fit within the iframe is located [it's what the "src" links to]).

- The Main page -

This page is most often going to be "index.html" so that's what we will think of it as for our purposes.

This script goes into the page header:
Code:
<script language=JavaScript> 
<!-- 
function resize_iframe() 
{ document.getElementById("frsize").height=document.body; } 
window.onresize=resize_iframe; 
//--> 
</script>
This next segment is the tag that begins the body:
Code:
<body onLoad='resize_iframe()'>
And the last piece of code needed is the iFrame code. This goes wherever you want it to be within the body of the document:
Code:
<iframe id=frsize frameborder=0 width=100% scrolling=no src=content.html> 
Your browser does not support inline frames or is currently configured not to display inline frames. 
</iframe>
The iframe id (frsize) is necessary to the proper workings of this. Do not alter it unless you really know what you're doing with it.
Simple enough? Now on to the content page...

- The Content page -

For this demonstration we're calling the content page "content.html."

This tag is to replace the typical <body> tag in the content page:
Code:
<body onLoad='top.document.getElementById("frsize").style.height = 666'>
Note: "666" is actually variable. You need to set it manually to match the overall height of the content page's content. If you use the iFrame for multiple content pages, each content page will need to have the height set manually.

- Example -

Below is a basic example of how all the code will work:

Index.html (The Main Page)
<html>
<head>
<script language=JavaScript>
<!--
function resize_iframe()
{ document.getElementById("frsize").height=document.body; }
window.onresize=resize_iframe;
//-->
</script>
</head>
<body onLoad='resize_iframe()'>
<!--
The below iFrame will be 390 pixels tall for this example. Note the "style.height" in "content.html" is "390"
-->
<iframe id=frsize frameborder=0 width=100% scrolling=no src=content.html>
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
<!--
Note that I have eliminated the frameborder. Delete "frameborder=0" if you wish to see the edges of the frame
-->
</body>
</html>
Content.html (The Content Page)
<html>
<head>
</head>
<body onLoad='top.document.getElementById("frsize").style.height = 390'>
<p>01</p>
<p>02</p>
<p>03</p>
<p>04</p>
<p>05</p>
<p>06</p>
<p>07</p>
<p>08</p>
<p>09</p>
<p>10</p>
</body>
</html>
As you can see - the content page has 10 numbers - each on their own line. The iFrame in the Main page will fit those 10 numbers no matter what else happens to the Main page. However be sure to remember that any changes in the content page (or

pages if you're working with multiple pages) may change the height necessary to allow users to view all the content properly.

Inline Frame Borders

Another inherent problem with iframes is that they only come with the default style border and no real options to alter the border color or style. However there is an easy way around this. Simply set the iframe’s border to “0” and place the iframe in a table with a border that matches your specifications. This is demonstrated as follows:
Code:
<table width="650" border="1" bordercolor="#87CEFA" cellspacing="1" cellpadding="0">
<tr><td><span id=info></span>
<iframe id="iframe1" width="100%" frameborder="0" name="iframe1" scrolling="yes" align="center" src="content.html">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></td></tr>
</table>
The above example will be an iframe that is 650px wide, and whose height will resize as specified by the javascript. However because it is placed in a table, you can set the frameborder to “0” and set the table border to “1” and alter the table bordercolor to whatever color you wish. And the appearance will be that of the iframe’s border being that color.

That’s all there is to it. Inline Frames are typically very simple objects to work with, and can be used to create a very efficient layout if done properly. I hope you learned something from this (not-so) little tutorial.

-Zen




This Tutorial ©2003 FallenZen. If you wish to use this tutorial on your site, please leave this credit intact.
Check out The DigitalZen (http://www.digitalzen.org).