iWeb FAQ - iFrames, TextBoxes with scrollbars (and “Frames”)

iWebFAQ.org

 

Chapter 1: (iFrames) How can I add a scroll bar in a textbox? Or how  can I embed a page in another page, thus how do iFrames work? How can I embed a particular part of a page in an iFrame?


Chapter 2: (Frames) 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.

La stessa pagina in italiano                             Die gleiche Seite auf Deutsch
 



CHAPTER 1: (iFrames) How can I add a scroll bar in a textbox? Or how  can I embed a page in another page, thus how do iFrames work?


Note: Everything is done straight out of iWeb. There’s no need for post-publish-html-editing.


You can’t put a scrollbar into a textbox but you can do what you’re asking for using an HTML Snippet and iFrames embedding another page in a page.






1) Build the page in which you want to embed the iFrame to.


  1. 2) To this page add an HTML Snippet and insert the following code to create an iFrame


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


  2. 3) Make another page (same site, this way you can easily know the url of iWeb_iframe_2.html) for your formatted text in the example we will call this page “iWeb_iframe_2.html”:

http://iwebfaq.org/site/iWeb_iframe_2.html


4) Open the Inspector go to the PageTab and uncheck the “Include page in navigation menu” and “Display navigation menu” boxes. Click on layout (still in Inspector=>PageTab=>Layout) and change Content Width and height on of iWeb_iframe_2.html to fit the content.


5) In the HTML code you pasted in the snippet change the

http://iwebfaq.org/site/iWeb_iframe_2.html

into the url of the page you want to display in the iFrame

(http://baseurl.com/sitename/pagename.html

or http://web.me.com/username/sitename/pagename.html).


6) Customizing the iFrame


  1. • Change the width and height parameters to fit iWeb_iframe_2.html. As people generally don’t like to scroll horizontally the width of the iFrame should fit the width of the page you display in the iFrame (sizes have to be a bit larger when a scrollbar displays).


  1. • 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.


  1. • Change the HTML color designation of the border


As Fabini suggested color designations can be found right in iWeb.

Here's how:

1. Show color window.

2. Select "Color Palettes" (third one from left).

3. From the pop-up menu select Web Safe Colors.

4. Scroll & find color desired.

5. Make note of & type into your snippet the 6 character alpha-numeric for that color. Remember to put # in front of it.


If you prefer you could also find those codes on the following page:

http://www.w3schools.com/html/html_colors.asp


  1. • For different border-styles have a look at the following page:

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-style


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


Thanks to Fabini who suggested to add the code with line break which makes it easier to read and follow instructions and thanks for having me searching for the border solution and suggesting how to find color designations in iWeb itself.


7) How can I embed a particular part of a page in an iFrame?


<html>

<head>

<title>

</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >

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

</head>

<body>

<div id='outerdiv'>

<iframe src="http://theurltothepage" id='inneriframe' scrolling=no></iframe>

</div>

</body>

</html>


Copy the code above and paste it in an HTML Snippet


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 URL to the page you want to display in the iFrame.


What is that good for?


For example if you want your homepage to be dynamically updated based on what other pages have on them. Any new blog entry you write, new albums you upload, links you add, will display in the iFrame on the homepage. That way, your homepage always shows people what is new on the site and no scroll bars are needed.


Is there a way to make the frame 'clickable' so clicking on it goes to the actual page that is being framed?


I don’t know if there’s a way to make the iFrame being a link. But I found two other solutions:


You could add a link to the Snippet in which you put the iframe

<a href="http://iwebfaq.org/site/Welcome.html" target="_top">Visit this page</a>

so people would click that link and get to the page.


Or (better) you could place a shape in front of the iFrame.

Go to Inspector=>Graphic Tab=>Set opacity to 0%

and use the shape to link it to the page which displays in the iFrame.



Chapter 2: (Frames) 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.


Note: Everything is done straight out of iWeb. There’s no need for post-publish-html-editing. And there’s no need to add anything to the other pages.


HTML SNIPPET 1 (The Menu)


<div style="width:120px; font-family: Trebuchet MS; font-size: 12px; color:#000000;">

<style type="text/css">

a:link {

color: #0000FF;

text-decoration: underline;

}

a:hover {

color: #0000FF;

text-decoration: none;

}

a:visited {

color: #0000FF;

text-decoration: underline;

}

</style>

<a href="http://iwebfaq.org/site/iWeb_iframe_2.html" target="Showframe" class="class1">The clochard The vagabond</a><br>

<a href="http://iwebfaq.org/site/iWeb_iframe_3.html" target="Showframe" class="class1">The sun only shines</a><br>

<a href="http://iwebfaq.org/site/iWeb_iframe_4.html" target="Showframe" class="class1">She&#8217;s a princess</a><br>

</div>


Customizing the links:



  1. • width:120px defines the width of the menu


  1. • font-family: tells which font is gonna be used for the links. Substitute it with the one that you want. Have a look at the following page to see which possibilities there are:

http://www.dev-archive.net/articles/examples/font-family.html

(take parameters without spaces after < and before >)


  1. • font-size: defines the size of the font


  1. • Link styles:


a:link refers to how the link displays normally

a:hover refers to how the link displays when someone gets the pointer (the mouse) over it

a:visited refers to how the link displays when it was visited


color: refers to the color, have a look at “Change the HTML color designation” in Chapter 1.6 on this page.


text-decoration: refers to the underlining of the link setting it to none will result in no underlining, setting it to underline will display the line instead.


  1. • 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.


  1. • 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.

- For MobileMe go to the Finder menu and select Go/iDisk/My iDisk/ or hit Schift+Command(Apple)+i and then go to /Web/Sites/. Drop your MenuImages folder into the Sites folder.

Entering: http://web.me.com/username/MenuImages/filename.jpg in your browser should bring up this file.

- If you're publishing to folder put it in the main location on your server using an ftp program

Entering: http://yourbaseurl.com/MenuImages/filename.jpg in your browser should bring up this file.


HTML SNIPPET 2 (Where the page will display)


<iframe

name="Showframe"

src="http://iwebfaq.org/site/iWeb_iframe_2.html"

style="width:650px; height:800px;

border-width:0px">

</iframe>




Example Follows... Snippet 1:


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

     

Click on the links and see how Snippet 2 changes:









































iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s presented by Cédric and hosted by HostExcellence.com


I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.



Thank you for visiting and supporting my website.


- Cédric -



 

iWebFAQ.org on Facebook

Share/Bookmark

Share/Bookmark