Sami's Site: CSB - Trellix Support and Tests
previous    next
Test Index   ·   CSB4 Rollover Links   ·   Link Styles 1   ·   Link Styles 2   ·   Link Styles 3   ·   iFrame Tutorial - IFrames described in detail!   ·   Form sample in iFrame   ·   Arrowhead   ·   Excel   ·   Color Blind   ·   Websafe Fonts and tests   ·   Make an Alert Box   ·   Webgem Placeholder Images   ·   LINK HOVER TOOLTIP   ·   OverLIB tooltip   ·   Disguise Email   ·   Quote of the Month   ·   Map to your location!   ·   Link Border Test   ·    FORUM

iFrame Tutorial - IFrames described in detail!
    
Inline Frames (IFrames) are windows cut into your webpage that allow your visitor to view another page on your site or off your site without reloading the entire page.  

Put a linkable or scrolling iFrame window in your website today.


TWO EASY STEPS:   Shown below sample iframes.
1 - CREATE AN IFRAME with a simple one-line code
2 - CREATE LINKS TO CHANGE THE CONTENT using many different ways

FACTS about iFrames:
The contents of the pages shown in the window wrap to fit the window.
They are cross-browser compatible.  (Internet Explorer, Mozilla FireFox, Safari and Chrome!)
You can set either type to blend into your page or have a beveled edge border.
The iframe can be bordered or made a different color so it stands out from the page
The iframe can be borderlesss to blend into the page.  Use a matching the color to become invisible to the eyes.
Easy to update/change the link or content.
Many iFrames can be placed on the same page.   (There are eight on this page)  
Use links in one iFrame to change another.  Useful for samples, images, product descriptions.
Itouch, iphone and ipad and some other mobile equipment will show the entire length of the content, not just the size you define with scroll bar! So keep that in mind when you design.
You can float an iframe over the page contents to create interesting designs using layers.

purple arrow purple arrowYou can change 2 iFrames with a single link!
A simple additional code allows a link to change two iFrames at the same time!  
Click SPECIAL TARGET LINK  for practical demonstration and iframe code tutorial.

purple arrow purple arrowYou can make a transparent iframe - see the page background through it.
2 additional code snippets allow the original page background to be visible under the iframe.
Click HERE for a practical demonstration and iframe code tutorial.


SEE PRACTICAL USES FOR AN IFRAME:   
CONTACT FORM - Frame6 below demonstrates a form that is fed into the page using an invisible iframe.  Upon submit, the iframe fills with the response page, leaving the rest of the page intact. Try the form, to get a link to the instructions!
My main contact form is also seen through an iframe.  Make a content page that is totally plain, except for the form. Then make your  "contact us" page the same color, place your links to other pages, fax, phone, etc as necessary. Also include an iFrame with no border pointing to your plain form page. Your form will blend on the page and better yet, the thank you will show up inside the iFrame on the contact page letting your visitors still have access to your links!    
Display a Gallery of Photos:  Realtors can use this techinique to have images and property descriptions change in the window.  Also nice for groups pictures.  Check out sample in the Photo area using separate web page for each large image.

purple arrow purple arrowYou can make an iframe photo gallery - 2 ways this can be done!
Place a static iframe on your display page and make a content page for each link. See the link under Practical Uses for a sample.  Follow standard instructions for static iframe.
Second variation only uses ONE web page.  Links are made to the large images that appear within the iframe box, with no need for the additional code snippets allow the original page background to be visible under the iframe. Instructions and sample here:  Display Gallery of Photos

purple arrow purple arrowYou can add code to make sure your content pages ONLY appear in a frame.
Visit this test page and click the link to a page that should always appear in an iframe.  The page will not fully load.  Instead it will bounce you back to the main page with the iframe.  Click the link that says can't get there to read instructions on how to redirect your iframe content if accessed from any page other than the one you specify (with the iframe).

purple arrow purple arrowMake the iframe HOVER or FLOAT above page or above picture
Have the iframe hover over the existing page using code to fix position of iframe.
The blue center square is on another page, showcased in an iframe that floats over the collage image!  Click HERE for a demonstration and iframe code tutorial.

  Free PHP Scripts from the PHP Junkyard  



IFRAME EXAMPLES:

The table below actually demonstrates 2 different types of iFrames at the same time!
1. SCROLLING IFRAME:  scrolling content, only one page viewable
2. STATIC IFRAME: static (no scrolling movement), links change content.


STATIC IFRAME EXAMPLE WINDOW: "FRAME1"
 
Rollover: CNN                           Buttons:  click to see the two best search
         pages in the window above
The links above are outside the iframe but change the content of the iframe. See Step 2 below for code.



STATIC IFRAME EXAMPLE WINDOW: "FRAME2" - CHANGE SCROLL BAR COLORS
Works in Internet Explorer but not in Firefox.



STATIC IFRAME EXAMPLE WINDOWS: DOUBLE Iframes
"FRAME3"

"FRAME4"

(These two static iframes are borderless and the color of the content pages matches the table so they are invisible.  Click links in one iframe, open in second iframe)


 
STATIC "FRAME5" -  TEST FORM (survey)                               
Upon submit, the iframe fills with a simple response notice. No redirect page used.
No email generated. No stats shown. Just a way to collect data.
I do not use or sell your email address. The information is used for demo purpose only.
Try FRAME8 to get a link to the instructions!
= required field

 
STATIC "FRAME6" -  TEST FORM.                               
Upon submit, the iframe fills with the redirect response page, leaving the rest of this web page intact.
Email is sent to webmaster and copy to you too
I do not use or sell your email address. The information is used for demo purpose only.
Try the form, to get a link to the instructions!  Scroll down to see code below. made with PHP FormMail Generator.
= required field

STATIC "FRAME7" -  TEST LINKS INSIDE THE IFRAME.                               
Setting TARGET in link code determines where link opens!



STATIC "FRAME8" - THIS IFRAME HAS WIDE BORDER


 

Note:  This is a free user to user support  site. If you would like to contribute to the maintenance of this site, you can use the paypal button below.
DONATION.   No obligation





GENERAL STATIC IFRAME INSTRUCTIONS:

STEP 1: CREATE AN IFRAME

Each iFrame requires one simple code put into Insert > HTML (or webgem in Trellix)
You name the iframe, you define the size and you say what page you want to display. You can also define if you want a border, scrollbars or transparency, but those are not absolutely necessary. Each iframe needs a unique name.
On this page, I use eight names: FRAME1, FRAME2, FRAME3, FRAME4, FRAME5, FRAME6, FRAME7, FRAME8.  

Modify items highlighted in blue in code as necessary to fit your site.

Put this code where you want your frame to be.

FRAME1: borderless, shown in table above     
(Table settings for reference:  width: 740, height: 362 width includes room for scrollbar.)
<iframe name="FRAME1" src="id77.htm" width="730" height="360" frameborder="0" ></iframe>

FRAME2: with 3-d border, shown above with no table
<iframe name="FRAME2" src="static2.htm" width="500" height="280" frameborder="1" ></iframe>

FRAME8:  form placed inside the invisible iframe!
<iframe name="FRAME8" frameborder="0" src="/contact/form.php" allowTransparency="true" width="340" height="490"></iframe>

Understanding the basic iFrame code:
purple arrow purple arrow Basic code with standard 3d edge border:
<iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" ></iframe>

purple arrow purple arrow OR use this one:  Basic code with standard 3d edge border:
<iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" frameborder="0" ></iframe>

purple arrow purple arrow  If you want to define a heavy colored border as shown in frame6 above:
<iframe name="FRAMENAME" src="contentpage.htm" width="450" height="310" style="border: 10px solid #0415FB" ></iframe>


purple arrow purple arrow Basic code with no border. Has invisible edge, content and blends with web page.
<iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" frameborder="1" ></iframe>

purple arrow purple arrow Basic code with no border. Has invisible edge, content and blends with web page.
This code adds code to force no scroll bar and to allow transparency (but does require 2nd code to make it work. Scroll down to see more about this.)
<iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" frameborder="1" scrolling="no" allowautotransparency=true></iframe>



Code attributes:
Used in samples:
What is it?
name
FRAME1
FRAME2
FRAME3
FRAME4
FRAME5
FRAME6
FRAME7
FRAME8
Name of the frame (call it anything you want)
No spaces, no symbols except - and _
Multiple iframes: each iFrame needs a different name
I numbered the frames on this page.
NAME is valid for HTML 5.
XTML note:  NAME is depreciated in XHTML, use ID instead.
src
id77.htm
static 2.htm
special1.htm
special2.htm
cb.htm
http://www.google.com
frame4blank.htm
frame4spaz.htm
frame4si.htm
frame4oscar.htm
Address of the Contents page that you want to see in the iframe   (This is the other page seen through the iframe window when you load the page.)

The iframe will begin by displaying this page through the window.  

If you want to see a blank box until you click a link, use about:blank as your address.
Better choice: start with a basic page with an introduction, etc
width
740
40%
Wide: Enter number of pixels for the window
Or enter the percentage for the window size
height
360
60%
High: Enter number of pixels for the window
Or enter the percentage for the window size
frameborder
1 = show a 3d edge
0 = no border
3d edge on the iFrame window  (higher number = wider border)
Using 0 makes the edge invisible.
Default iframe has 3d edge on.
            same as frameborder = "1"
If you want the border, you can leave out frameborder attribute from code.
If no border is used, you must define
             frameborder = "0"
HTML 5: see seamless.  at this time, frameborder will not be supported
seamless
seamless
This attribute should cause the content of the iframe to blend with the iframe web page (parent document)
to have no borders or scrollbars.  
seamless="seamless" will replace frameborder ="0"

NOTE: Links inside the iframe: If seamless is used, the target of links will be set to "_parent"  replacing entire page, unless otherwise specified.
NEW in HTML 5 replaces frameborder
(My tests with it show it does not work yet....April, 2011)
scrolling
auto = browser decides
yes = always have
no = do not show
Scroll bar: if your content page is too long or wide to fit into the iFrame, then scroll bars appear automatically as needed, even without the scrolling="auto" code!
Adding scrolling="no" to your code will stop the scroll bar from showing. But be careful!  If you have content outside the window, your visitor will not be able to see it.
Not supported in HTML 5
rel
nofollow
Not recommended at this time. This is a statement that is discussed on many forums to stop search engines from leaving the current page to go to the content page. This is a LINK option and is not related to iframes so it will not have the desired effect at this time.
Transparent iframe codes:  (must use both!)
see transparent iframe demonstration and tutorial HERE
allowtransparency     true

<style type="text/css">
body {background-color: transparent}
</style>
This is the first part of the code.  Put into the iframe code

This is the second part of the code.  Put at the top of each content page you want to see through. Must use both codes! If this code is not placed on the content page, the iframe will be solid even though you allowed transparency.
Other iframe settings you can choose to use though I have no samples made with them:
<iframe name="FRAMENAME" src="contentpage.htm" width="100" height="280" frameborder="0" scrolling="no" hspace=10 vspace=5 ></iframe>
hspace
vspace
10
5
External Space AROUND the iframe.
Adust the hspace (horizontal-space on right and left) or
vspace (vertical-space above and below the iframe.
Not supported in HTML 5
<body topmargin=10 leftmargin=5>
Internal Space WITHIN the iframe.  This code is placed into the body of the content page to adjust the margin within the iframe.  On FRAME 5 sample, I set the margins to 0.  
In CSB, use Insert> HTML to place the code.
Not supported in HTML 5



STEP 2: CREATE LINKS TO CHANGE THE CONTENT
NOTES: Scrolling iframes using the code discussed in the table above will not allow linking!
                The links demonstrated below are for FRAME1.

Each Link to change the content must have a target defined.  
The target is the NAME OF THE FRAME where you want the link to open.  
On this page, I use five names, but all the sample codes use just one: FRAME1
Chose any one of these ways to make your link:


Standard link code:

The links across the top of the table around FRAME1 (except for "Static") were done this way.

SIMPLE TEXT LINK HTML CODE -  Relative link:     Scrolling iFrame
<a href="id67.htm" target="FRAME1">Scrolling iFrame</a>

SIMPLE TEXT LINK HTML CODE -  Absolute link:     Example 1
<a href="http://www.samisite.com/test-csb2nf/id58.htm" target="FRAME1">Example 1</a>

SIMPLE TEXT LINK HTML CODE -  Absolute link with a floating tooltip:     Google
<A href="http://www.google.com"  target="FRAME1" title="Google: the best search engine!">Google</A>

CSB/TRELLIX:  Code can be inserted manually with Insert > HTML  (webgem in Trellix)
My default placeholder is the webgem symbol.    Download it  here if you would like to use it also.


Code for specialty links can also be used by adding target="FRAME1"
These links (Rollovers, font change, color change, etc) are put in with Insert > HTML  (webgem in Trellix)

Group links - See General Instructions

Individual links - The CNN code under FRAME1 uses this rollover code:   CNN
<a href="http://www.cnn.com/" target="FRAME1" onmouseover="this.style.background='#FFFF80'" onmouseout="this.style.background='#BBBBBB'">CNN</a>


CSB/TRELLIX: Add target info to URL link properties as shown in this screen print
Leave off the final " because CSB/Trellix will add it for you.
(If using CSB3 or Trellix, disregard the _top setting shown in image below!)
links to iframe are shown as webgems



HTML Button link code    More instructions for this type of link is available here

Button code as seen under the Static iFrame FRAME1:      (updated Feb 2011)
<STYLE type=text/css>
#rollbutton2 a  {
     color: #C0DCC0;
     font-size:12px;
     font-weight: bold;
     text-decoration: none;
     border:2px outset #D3D3D3;
     background-color:#680098;
     display: block;
     width: 85px;
                height: 19px;
     padding: 0px;

}
#rollbutton2 a:hover {
     background-color: #C0DCC0;
     color:#680098;
     padding-left: 3px;
     border:2px inset #D3D3D3;
}
</STYLE>

<DIV id=rollbutton2>
<A href="http://www.google.com"  target="FRAME1" title="Google:the best search engine!" onfocus="this.blur()"><center>Google</center></A>
<A href="http://www.langenberg.com/" target="FRAME1" title="Langenberg:the second best search engine" onfocus="this.blur()" target="_top"><center>Langenberg</center></A>
</DIV>