gotFusion.com....... Where your adventure begins
Full Service Web HostingNetObjects Fusion 7 Websites Portal

 


 


Go to code generator      

Iframes are inline frames which only work in late version browsers. But for many this doesn't stop them using them, and the ability to easily place a scrollable frame in a webpage is very tempting.

I've made a demo. Click here to see it in action. And I've also made a handy code generator to take most of the pain out of the process. (Click here to open it.)

To put one on your page, you have to insert the HTML for the iframe. The way you specify your iframe will depend on how your site is structured. I can't here describe every permutation, rather, I will describe how I constructed the iframe in my demo. If your site is structured differently to mine, you will need to play with the parameters, but this demo should give you a good head start.

What code do I have to insert?

Here's the code that made my iframe:

<p ALIGN=center>
<IFRAME SRC="i_content.html" WIDTH=582 HEIGHT=235 FRAMEBORDER=0 SCROLLING=auto></IFRAME>
</P>

It's quite simple. It specifies the content of the iframe, the size of the iframe, it makes the iframe have no borders, and it makes scrolling automatic (so if the content of your iframe is longer than the iframe can contain, the scrollbars will be there to let your user scroll down to view your content).

Note how I've bracketed the iframe with <p ALIGN=center>...</p>. This placed it in the center of my page.

Here are some parameters you can vary:

SRC=yourContent.html

URL of frame content

WIDTH=100

or whatever width you want in pixels

HEIGHT=100

or whatever height you want in pixels

ALIGN=top

or middle, bottom, left or right

FRAMEBORDER=0

or 1. Defaults to 1, so you can leave the whole parameter out if you want frameborders ON.

MARGINWIDTH=5

or whatever number of pixels you want

MARGINHEIGHT=5

or whatever number of pixels you want

SCROLLING=auto

or yes or no

allowTransparency="true"

[or "false", or leave it out entirely]

If you want to play with any of these, just put them in like I have put the WIDTH, HEIGHT, FRAMEBORDER and SCROLLING parameters into my code above.

Where do I put the code?

Here's how the relevant part of my page looks in NOF:

The code is placed After Tag when you click the HTML button for the text box that has the text that says "Here's an iframe". Note that my next text box is right up under the one that has the iframe code after its tag. I seem to have left no gap for my iframe. Placing the code after the tag will insert the iframe between these two text boxes. I also found that I had to manually center the text box that had the code after it, otherwise my iframe wouldn't center, despite my <p ALIGN=center> tag. I think this is because I was using dynamic layout which is table based, and my <p ALIGN=center> tag centred the iframe in the table cell that NOF created; it didn't centre it in my browser window. When I manually centred the textbox, I was centring its NOF-created table cell in the browser window, so then my iframe became centred in my browser window as well.

Here's how I inserted the code:

 

allowTransparency

In the second iframe example (see example page), for allowTransparency="true" to work, I added it to the parameters for the code that made the iframe, like this:

<p ALIGN=center>
<IFRAME SRC="icontent2.html" WIDTH=582 HEIGHT=235 SCROLLING=auto FRAMEBORDER=0 allowTransparency="true"></IFRAME>
</P>

I also had to put some transparency code in the iframe content page. I put this code Inside Body Tags:

STYLE="background-color: transparent"

However...
I've generally found allowTransparency to be a bit too tricky. You have to be very aware of which object is inheriting its tranparency from which other object. I recommend that you leave this one alone, and make the backgound of the content frame simply match the backgound of the parent frame. In NOF, this is very easy to do, so it's the easiest way to go. For this reason, I've left out allowTransparency from my code generator.

Borders

You can give your iframe a variety of borders. I won't explain the syntax here. Go to my code generator and play with them to see what they can do.

The iframe content

I made a page in my site that I called icontent1.html. (For my second example, the page was called icontent2.html). In it, I put the content that I wanted to show in my iframe. Make sure it is in a part of your site that won't show in any nav bars. (Or, the iframe content page could be created externally and uploaded separately.)

___________________________________________

The instructions here assume that you will be publishing Flat since the code for the iframe has a URL that is direct ie there is no path, only the name of the file which constitutes the content of the iframe. This assumes that the iframe file is in the same directory as the page that contains the iframe. If you have the iframe content file anywhere else, you will need to be able to work out the path to it and put that in the iframe code instead of the simple name of the file.

___________________________________________

Colouring your scrollbar

To get the iframe's scrollbar to match the colour scheme of my site, I used a little freeware tool called Cool Web Scrollbars. It lets you easily generate the code to get a colour scheme for your scrollbars. Once you have the code, just paste it between the Head tags in your iframe content page (in my case I pasted it to the Head of i_content.html).

I found the tool here:
http://www.harmonyhollow.net/

Here's the code, generated by the tool, that I pasted to the Head of i_content.html in order to make the scrollbar the colours you see:

<STYLE type="text/css">
<!--
BODY {
scrollbar-face-color:#C0D4E0;
scrollbar-highlight-color:#686898;
scrollbar-3dlight-color:#686898;
scrollbar-darkshadow-color:#686898;
scrollbar-shadow-color:#686898;
scrollbar-arrow-color:#686898;
scrollbar-track-color:#C0D4E0;
}
-->
</STYLE>

___________________________________________

Make an iframe scroller

 

To put one on your page:

Put an iframe on the page using this code:

<iframe id="datamain" src="external.html" width=150 height=150 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>

For the one above, I just had the cursor where I wanted the iframe to be, I hit Control T, and I inserted the above code. Change any of the parameters to suit yourself. The id and the src are critical and must match the instructions below, so you probably won't change them!

Make a new page in your site called "external.html". Make it a Zero Margins page. Put a text box on it. With the text box selected, select Size Layout to Text (so the text box fills the entire page). Make sure it is in the same directory as the page that has the iframe on it. Check in Publish View that it is. If it's not, then in Publish view, drag it there.

Post this at the Beginning of Body of the "external.html" page:

<SCRIPT LANGUAGE="JavaScript1.2">

//<iframe> script by Dynamicdrive.com
//Specify speed of scroll. Larger=faster (ie: 5)

var scrollspeed=cache=2

function initialize(){
marqueeheight=document.all? parent.document.all.datamain.height : parent.document.getElementById("datamain").getAttribute("height")
dataobj=document.all? document.all.datacontainer : document.getElementById("datacontainer")
dataobj.style.top=5
thelength=dataobj.offsetHeight
scrolltest()
}

function scrolltest(){
dataobj.style.top=parseInt(dataobj.style.top)-scrollspeed
if (parseInt(dataobj.style.top)<thelength*(-1))
dataobj.style.top=5
setTimeout("scrolltest()",50)
}

window.onload=initialize

</SCRIPT>

<div id="datacontainer" style="position:absolute;left:0;top:10;width:100%" onMouseover="scrollspeed=0" onMouseout="scrollspeed=cache">

Edit the content of the text box. This will be the content of your scrolling iframe.

That's it. Good luck!

 


|  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  | 

Problems with this page?  

All content copyright © 2002 gotFusion LLC.  The name gotFusion and the gotFusion ® logo are registered trademarks of gotFusion LLC
Copyright, legal notice & privacy statement