iFrames

What’s an iFrame and what is it good for? Can we have one iFrame on a page but a different page loads in depending on the link that was clicked by the visitor? What I am trying to do is have a list of newspapers and upon clicking on a name that paper's page would load in the frame then another and so on.

Chapter 1: iFrames
1.1 What is an iFrame?
1.2 How does it work?
1.3 How can I customize the look of an iFrame?
1.4 How can I embed only a particular part of a page with an iFrame?

Chapter 2: Is it possible to have one iFrame and multiple pages loading in it?
2.1 Building the menu
2.2 Building the area where the content displays

Chapter 3: TextBox with vertical scrollbars without using iFrames

Chapter 1: iFrames

1.1 What is an iFrame?

An iFrame is used to embed content in a page which is not part of the content of the page itself but is stored elsewhere. As an example you could embed a Guestbook provided by a third party Guestbook service into one of your pages or a Forum, a document and more.

1.2 How does it work?

The way it works is pretty easy. All you need to do is copy the following code:

<iframe src="http://iwebfaq.org/site/iWeb_iframe_2.html"
style="width:370px; height:280px;
border-width:5px;
border-color:#990033;
border-style:solid;"
scrolling="auto" >
</iframe>

and change the URL, width and height, broder width (if any), border color (if any), border-style (if any), scrolling auto, to fit your case.

1.3 How can I customize the look of an iFrame?

Here’s how to customize the look of the iFrame:

Change the width and height parameters to fit the content. Since people generally don’t like to scroll horizontally the width of the iFrame should fit the width of the content you would like to embed (sizes have to be a bit larger when a scrollbar displays).

Change the number of pixel in the border-width if you want a border to display and have it larger or smaller. If set to zero no border will display.

Change the HTML color designation of the border. There’s a 6 character alpha-numeric code for the color. Remember to put # in front of it. You find those code at the following page:
http://www.w3schools.com/html/html_colors.asp

For different border-styles have a look at the following page:
http://www.w3schools.com/css/tryit.asp?filename=trycss_border-style

Set scrolling to “yes” if you want it, “no” if you don’t want it and “auto” to have it appearing only if needed.

1.4 How can I embed only a particular part of a page with an iFrame?

Copy the following code and paste it into your post or page

<style type="text/css">
#outerdiv
{
width:350px;
height:500px;
overflow:hidden;
position:relative;
}

#inneriframe
{
position:absolute;
top:-1150px;
left:-660px;
width:1280px;
height:2000px;
}
</style>
<div id='outerdiv'>
<iframe src="http://theurltothepage" id='inneriframe' scrolling=no></iframe>
</div>

width:350px;
height:500px;
Define width and height of the iFrame

top:-1150px;
left:-660px;
Define which part of the page will be displayed in the iFrame

Replace http://theurltothepage with the URL to the page you want to display in the iFrame.

Note that some websites have the ability to break out of the iFrame. For example putting Yahoo in an iFrame doesn't work since Yahoo breaks out of the iFrame and takes the entire window moving yours out of it.

Chapter 2: One iFrame and multiple pages loading in it?

That can be done by making a menu and an area in which the selected content displays.

2.1 Building the menu

<a href="http://iwebfaq.org/site/iWeb_iframe_2.html" target="Showframe1" class="class1">The clochard The vagabond</a><br>
<a href="http://iwebfaq.org/site/iWeb_iframe_3.html" target="Showframe1" class="class1">The sun only shines</a><br>
<a href="http://iwebfaq.org/site/iWeb_iframe_4.html" target="Showframe1" class="class1">She’s a princess</a><br>

If you want to have the links displaying horizontally instead of vertically all you have to do is remove the <br> tag at the end of the lines. You may also want to add “ - “ to increase the space between the links.

If you want to have an image displaying instead of the text for the links simply replace the text with:
<img src="urloftheimage">

urloftheimage: Put all the images you want to use for menus in a folder on your desktop. Upload the folder containing your images to your server (example: create a Folder named MenuImages. Upload the folder containing the images you want to use in the menu to the main location (root) of your server
Entering: http://yourbaseurl.com/MenuImages/filename.jpg in your browser should bring up this file.

2.2 Building the area where the content displays

<iframe name="Showframe1" src="http://iwebfaq.org/site/iWeb_iframe_2.html"
style="width:370px; height:280px;
border-width:0px;
border-color:#990033;
border-style:solid;"
scrolling="auto">
</iframe>

Choose a poem from the following menu:

The clochard The vagabond
The sun only shines
She’s a princess

Read Chapter 1.3 to know how to customize the iFrame.

Note: if you put in an iFrame a page of a website made by someone else the webmaster of that website will perceive it as if you were stealing his content which is something you should really avoid.

Chapter 3: TextBox with vertical scrollbars without using iFrames

iFrames are not search engines friendly. iFrames always involve having two pages: one containing the iFrame and one displaying in the iFrame. Search engines see them as completely independent pages. So the content displaying in the iFrame is not part of the page containing the iFrame. Here I will tell you how to have a TextBox with scrollbars without using an iFrame.

How to have a TextBox with scrollbars without using iFrames is described in my WPFAQ.org E-Book (sample)


This FAQ is also discussed in my WPFAQ.org E-Book (sample)


© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -




Now share it…

Share

Comments are closed.