RapidWeaver FAQ - iFrame







Share/Bookmark


What’s an iFrame and what is it good for? How can I add an iFrame to RapidWeaver? 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? How to add an iFrame to any page you want
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: Having an iFrame-only page
Chapter 3: Is it possible to have one iFrame and multiple pages loading in it?
3.1 Building the menu
3.2 Building the area where the content displays
3.3 Example
Chapter 4: How to have a TextBox with vertical scrollbars without using an iFrame



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? How to add an iFrame to any page you want


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:0px;
border-color:#990033;
border-style:solid;"
scrolling="auto" >
</iframe>



and change the URL, width and height, border 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: Having an iFrame-only page


If you want to have an iFrame-only page you can use RapidWeaver’s iFrame page. Add => iFrame => Page Info => Page and enter the url of the page you want to iFrame and the size (in pixels or percentage).

Chapter 3: Is it possible to have 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.

3.1 Building the menu


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



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.

3.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>



3.3 Example


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 4: How to have a TextBox with vertical scrollbars without using an iFrame


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
RapidWeaverFAQ.org E-Book (15$).


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

RapidWeaverFAQ.org - Tutorials, Tips & Tricks is made with RapidWeaver and for RapidWeaver.
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