File Under: HTML

Floating Content in I-Frames


OK. Let’s talk frames…. No, wait! Where are you going? Come back! Perhaps I should’ve been a little more subtle. Chatted about the weather, or maybe the Green Bay Packers.

Instead, I came right out and used the “f” word. I understand your reluctance. Everybody, it seems, is sick of frames — including the W3C and other advocates of web standards. But frames still have a place in this world. So you just sit back and let me finish.

“So,” I say, “I’ve got these killer frames….”

“Sure, whatever,” you reply.

I look at you coyly. “But these frames, man … these frames, they float.”

Intrigued, you turn around and smile. “They float, huh? Tell me more.”

And I will. But first, for those who came in late:There’s a possibility that you missed Jill Atkinson’s treatise on frames — Create Simple HTML Frames — their structure, usage and relation to the four food groups. I don’t know, maybe you were sick that day, had to take the dog to the vet, whatever. Point being, you might be unaware of how frames work. So for those of you thus afflicted, I’d recommend that you take a peek at Jill’s piece, and I’ll also tell you this:Frames are used to “separate, contain, and present” content.

Everyone up to speed? Let’s go.


Contents

  1. IFRAME, I Saw, I Conquered
  2. Look Ma, They Float
  3. Loading and Positioning Content
  4. Defining Borders and Margins
  5. I Think I’ll Name it Fred
  6. Antiquated Browsers

IFRAME, I Saw, I Conquered

Frames, when used sensibly, can be a great tool for presenting a complex site. Unfortunately, they’ve always been sort of boxy and constraining, doomed as they are to dwell in and along the corners of a browser. But all that changed with the introduction of the inline frame, or iframe for short.

The iframe made its debut way back when Microsoft released Internet Explorer 3.0. For a while, they only existed on Intranets and Microsoft-optimized sites. Now that they are fully supported by all subsequent Microsoft browsers, Firefox, Safari and Opera (to name the biggies), iframes are commonplace in the real world.

What’s so special about iframes again? Ah, yes, the floating thing. An iframe isn’t bound to the side of a browser window. No way. Just like an image, a floating frame can sit anywhere on the page. It goes where it wants to go and calls in what it wants to call in. In every sense, a liberated frame for the new millennium.

Think of your website as a stack of magazines. Although it’s interesting to look at, and no doubt chock-full of hard-hitting, compelling content, some people will never know this because all they see is what’s at the very top. The only way for users to get at the rest of the content is to dig into the stack one page at a time.

Now imagine if you could give your viewers a magic mirror like the one Miss Cindy had on Romper Room – you know, the one she used to see you through the TV? Well, with this mirror, your readers could see what’s in the center of the pile, um, I mean your website. No more clicking and reloading, and clicking and reloading, and clicking and reloading to dredge up information. So you see, floating frames are magic – just like Miss Cindy’s mirror.

OK, not magic, exactly. Let’s look at how they really work.


Look Ma, They Float

You may remember that in normal frames pages, the <frameset> </frameset> tags define how the page should be divided. These tags replace or precede the <body> tag, and look something like this (each "?" would define the size and number of columns):

<frameset cols="?,?">

Then the <frame> tag is used to describe each frame and pull in the HTML source document. It looks something like this:

<frame src="blah.html" name="blah">

Now, iframes are obviously a little different than your run-of-the-mill frame. First of all, they’re defined entirely by the <iframe> tag, which fulfills the functions of both the <frame> and <frameset> tags. Second, the <iframe> tag can be placed directly inside the <body> </body> tags, like an image. (In fact, the <body> tag can define some iframe attributes, but I’ll get to that later.)

Let’s start off by defining the size of your iframe. The <iframe> tag can define the width and height using pixel values:

<iframe width="150" height="200"> </iframe>

Or percentages:

<iframe width="40%" height="60%"> </iframe>

Keep in mind that percentages will scale to accommodate the space available on the user’s monitor, while pixels are more restrictive and less responsive to the individual needs of a user. What’s perfect on a laptop screen may be far too small for a 21-inch workstation monitor, and vice versa.

Also, note that I’ve added the </iframe> tag after every <iframe>. This is necessary because it closes the floating frame.

Looks like to me like we’re off to a good start. But as my grandma used to tell me, “Son, if you ain’t got content, you ain’t got diddly.” Never being a fan of diddly, that never really bothered me. But in retrospect, the old girl had a point. Without content, you kinda just got yourself a blank page.

So next we’ll learn how to give the iframe some guts.


Loading and Positioning Content

Lucky for us, the <iframe> tag behaves just how we need it to — by assigning an HTML source document, we can fill the floating frame with whatever we deem proper. An iframe loads an HTML document onto the page the same way one would call up an image. It works like this:

<iframe width="150" height="200" src="blah.html"> </iframe>

Our floating frame will now display whatever’s included in blah.html.

Right about now, you’re probably asking yourself, “Yeah, that’s nice, but how in the heck do I ‘float’ the darn thing into the position I want?” Good question. After all, things that “float” aren’t usually all that stable.

Well, again, we need to think of the <iframe> tag in terms of the <img> tag. A floating frame will show up wherever you place it in the content of the page:If you stick the tag halfway down your HTML document, the iframe will show up halfway down your web page. Unlike regular frames, floating frames aren’t persistent. They will scroll up and down (and off) the page, just like the rest of the content.

If you want your frame to line up against either side of the browser window, you just need to place an align="left" or align="right" within the <iframe> tag, like so:

<iframe width="150" height="200" src="blah.html" align="left"> </iframe>

Now we have an inline frame that’s 150 pixels wide, 200 pixels tall, and aligned left.

Of course, if you want to actually float the frame above other elements within the page, you could use absolute positioning, a floating <div> layer, and stylesheet declarations to put the content anywhere you desire. That’s the beauty of iframes and DHTML.

Using a div, your basic code looks like this:

<div id="floatframe">



<iframe width="150" height="200" src="blah.html" align="left"> </iframe>



</div>

And your CSS positioning code looks like this:

<style type="text/css">



#floatframe {position:absolute;

	left:200px;

	top:200px;

	width:150px;

	height:200px;

	z-index:100

	}



</style>

Here’s an example where I’ve used absolute positioning to float an iframe over a picture. Feel free to study and admire it.

Once you’re familiar with the basics, you’re ready to tackle the frameborder and various margin attributes.


Defining Borders and Margins

Floating frames have borders by default — unless you instruct the browser to do otherwise, it will place a border around your frame. But you can alter border thickness by invoking the almighty frameborder attribute, which is defined in terms of pixels.

<iframe width="150" height="200" src="blah.html" align="left" frameborder="10"> </iframe>

So this floating frame would have a border 10 pixels thick. But if you set the frameborder to, say, zero, your frame border becomes virtually invisible.

<iframe width="150" height="200" src="blah.html" align="left" frameborder="0">

</iframe>

Think about that for a minute. If you have a frame with an invisible border smack dab in the middle of your content, how can you tell the difference between the content outside the frame and the content inside the frame? The answer is:You can’t.

Unless you want to alienate your users or create an digital art installation liberated from all sensible convention, you need to find some way of addressing this problem. One way to differentiate the iframe content is to use smart design techniques. For example, a slightly different background color in your blah.html document will make the iframe stand out from the rest of the page. Or you could try using a different font color or size. You can also set the content apart by surrounding it with a distinct margin.

There are two kinds of margins you can set. The external margin is the space that surrounds the frame. It’s set using the hspace and vspace attributes, which set the horizontal (left/right) and vertical (top/bottom) margins, respectively:

<iframe width="150" height="200" src="blah.html" align="left"

frameborder="10" hspace="10" vspace="10"></iframe>

Internal margins are quite different because they’re set, oddly enough, in the <body> tag of your document. Using the topmargin and the leftmargin attributes of the <body> tag, you can offset the internal margin of your frame window, like so:

<body topmargin="10" leftmargin="5">

Starting from the top left, your document’s content will now sit ten pixels down and five pixels over from the corner of the frame. Even if you don’t plan to offset the internal margins, it’s a good idea to define these attributes in the <body> tag anyway. You can do this by setting both values to zero. If you find your content is too long to fit comfortably within your frame, you can summon a scrollbar:

<iframe width="150" height="200" src="blah.html" align="left"

frameborder="10" hspace="10" vspace="10" scrolling="yes"></iframe>

Of course, you can also turn off the scrollbar (by setting it to scrolling="no") or just let the browser decide for itself when the scrollbar is necessary (by setting it to scrolling="auto").

Now all you have to do is name the elements and make the thing actually work.


I Think I’ll Name it Fred

Targeting within the <iframe> tag works exactly like it would in a typical <frame> tag (see Jill’s column on naming and targeting for a fuller explanation – Put Links in Framesets. In order to send a new page to the floating frame window, you have to give your frame a name:

<iframe width="150" height="200" src="blah.html" align="left" frameborder="10" hspace="10" vspace="10" name="fred"> </iframe>

Now that your frame has a name, you can address (or target) it whenever you want to send it new content. So you can place a link on your page that looks like this:

<a href="yackitysmackity.html" target="fred">Gimme!</a>

When you follow that link, it will send the contents of yackitysmackity.html to your floating iframe named fred.


Antiquated Browsers

So now you’ve got a really cool floating iframe that you can see with any modern browser. But what do people with older browsers see? Not much.

Older versions of Netscape Navigator don’t recognize the <iframe> tag. In fact, release 4.7 completely ignores it. You could repay the favor and just ignore them back, but if you prefer to be a good netizen and maintain total backwards compatibility, there’s a trick.

Well, the other iframe tutorials I’ve seen suggest you include a <frame> tag between <iframe> and </iframe> tags. Like this:

<iframe width="150" height="200" src="blahblah.html">

<frame src="blahblah.html">

</iframe>

But I’m more than a little bit skeptical about this solution since I’ve yet to see it work on every single browser out there.

Of course, the smart thing to do would be to set up a server-side browser detection script that serves pages with iframes to the newer browsers and boring vanilla pages to the older browsers. (See Detect Which Browsers Are Visiting Your Site)

The choice, as always, is yours.