If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

* iFrames - From the Basics to Dynamic Resizing *

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:

&lt;iframe name=”iframe1” width=”100” height=”100” frameborder="1" scrolling=”yes” align=”center” src=”content.html”&gt;
Your browser does not support inline frames or is currently configured not to display inline frames.
&lt;/iframe&gt;

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:

&lt;a target="iframe1" href="page.html"&gt;Click Here&lt;/a&gt;

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 &lt;head&gt; of your HTML document:

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.

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.

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)

&lt;html&gt;
&lt;head&gt;
&lt;script language=JavaScript&gt;
&lt;!--
function resize_iframe()
{ document.getElementById("frsize").height=document.body; }
window.onresize=resize_iframe;
//--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body onLoad='resize_iframe()'&gt;
&lt;!--
The below iFrame will be 390 pixels tall for this example. Note the "style.height" in "content.html" is "390"
--&gt;
&lt;iframe id=frsize frameborder=0 width=100% scrolling=no src=content.html&gt;
Your browser does not support inline frames or is currently configured not to display inline frames.
&lt;/iframe&gt;
&lt;!--
Note that I have eliminated the frameborder. Delete "frameborder=0" if you wish to see the edges of the frame
--&gt;
&lt;/body&gt;
&lt;/html&gt;

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:

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.

Are you referring to my tutorial or are you referring to a problem you're having with implimenting the code I've presented?

If you mean "is that supposed to be in the tutorial" then yes - I put it there for a reason (which leads me to my second point).

If you mean "I'm putting the code into my website and getting that in my browser window instead of an iFrame" then your browser isn't configured to view iFrames. If this is true - I'll need to know which browser you're using if I'm to try and fix the problem for you.