IFRAME

IFRAMES are nothing more than a small window that you put on a page to display another page within this window.

There are four things you need to know about using IFRAME:

  1. BASIC IFRAME <-READ THIS SECTION FIRST!

  2. IFRAME FORMAT/ATTRIBUTES

  3. LINKING TO AN IFRAME

  4. SCROLLING IFRAME

  5. CSS TYPE IFRAME (Overflow)

BASIC IFRAME
or sometimes called inline frames, is a web page, element, that is embedded in another web page or HTML document. The embed web page is display within a sub-window of the page currently be display in the browser's window. This sub-window can be anyplace on the web page. Here is an example of an IFRAME.

If you would like to see the web page that is displayed in the above IFRAME, CLICK HERE!. Be sure to use your browser's BACK BUTTON to return to this page.

In order to have an IFRAME on your page you will need:

  1. The IFRAME code

    <iframe src="yourwebpagename.htm" width=300 height=70></iframe>

    Change the width=300 height=70 to suit your needs.

    If you are making your pages with PAGE BUILDER then you must add the IFRAME code using Page Builder's ADDONS.

  2. yourwebpagename.html - Another HTML page that will be displayed in the IFRAME. The file can also be a .htm extension.

The IFRAME simply displays another normal html page!

The other page referenced by the IFRAME can have any normal HTML, CSS, JAVASCRIPT code in it. What it looks like in the IFRAME is up to you. For example, by use the Colored Scroll Bars, you can make the IFRAME have colored scroll bars.

There are other methods that can be use to insert one document into another. Please see: Overflow (recommended), Dynamically Update A Page and Server Side Include.

Here is a simple example of an IFRAME. This IFRAME will not appear if you are using Netscape 4.76 or earlier or some other browser. If a message appears in BLUE below, then you should switch to another browser or upgrade your current one if possible. The one nice thing about IFRAME is that once it has been placed on the screen, the rest of the main document will flow around it as this text is flowing around the IFRAME to the right. This can make a very attractive looking page when the author wishes to show the visitor just a small section of a document or make a scrollable display for advising the visitor of other facts.

You can put the IFRAME inside a table to separate it from the text, i.e. text will not flow around it.

IMPORTANT NOTE: - each <IFRAME> must have a corresponding </IFRAME>


IFRAME FORMAT/ATTRIBUTES

<iframe src="URL" more attributes>
alternative content for browsers which do not support iframe
</iframe>

Below is a table of IFRAME attributes. This is extracted from the excellent web page article on IFRAME at INLINE FRAMES. You should read this article for more complete details on IFRAME. Addition information can be obtained by going to GOOGLE and searching for IFRAME.

name value meaning
allow transparency "TRUE" OR "FALSE" TRUE allows the page background to show through the IFRAME
src "URL" the address of the initial content for the inline frame
name "string" assigns a name to the inline frame, for use in target attribute
longdesc "URL" refers to a document containing a description (not supported yet)
width number of pixels or percentage (e.g. "20%") width of the inline frame
height height of the inline frame
align "top" aligns the inline frame vertically on the top of the surrounding content on its left and right
"bottom" aligns the inline frame vertically on the bottom of the surrounding content on its left and right
"middle" aligns the center of the inline frame vertically with the current baseline
"left" places the inline frame at the left margin so that subsequent page content flows on the right of it
"right" places the inline frame at the right margin so that subsequent page content flows on the left of it
frameborder "1" specifies that a border is to appear around the frame; this is the default
"0" suppresses the border
marginwidth number of pixels size of the top and bottom margin inside the inline frame
marginheight size of the left and right margin inside the inline frame
scrolling "auto" scrollbars appear if and only if they are needed to see all the content; this is the default
"yes" scrollbars appear in any case
"no" scrollbars do not appear, which may cause part of the content to be inaccessible


Here is another example of the use of IFRAME but this time we use a .txt document. I believe that with the table above and a little trial and error, just about anyone can use IFRAME in their web page.

 

 

  One more note - if you use a HTML document in the IFRAME then there will only be vertical scrolling. But if you use a .txt document then depending upon how the .txt file was made, it may require a horizontal scroll bar as well. The above IFRAME is just such a .txt file.

LINKING TO AN IFRAME
is very easy. All you have to do is name the iframe and then use the target="iframename" in your link code.

<iframe name="myiframe" src="iframesample.htm" width=300 height=70 align=right></iframe>
</iframe>

<a href="somepage" target="myiframe">Go to some page</a>

Click here to see another document in the iframe to the right

Click here to see the original document in the iframe.

This is the iframe.

SCROLLING IFRAME
, by
Dynamicdrive.com, is a great way to get more information on many pages on your site quickly and update the information easily by editing one file. The concept is a normal IFRAME but the information within the IFRAME comes from another html file, which can use all the normal html code such as links.

You will need to use their file, external.htm, as it has the necessary javascript in it. Just replace their scrolling text with yours. You can if you wish, re-name the file. If you do be sure the name is changed in the src="external.htm" in the <iframe> tag.

I recommend that you change the style settings to left:5;top:10;width:90% so the text will fit better in the IFRAME.

You can control the scrolling speed in the external.htm file script code, which is below where your scrolling text goes.