How to use iframe? What is iframe? Why Iframe?

[emm]

I want to know, if anyone will, How to use iframe? What is iframe? And Why use Iframe?
_________________
“You might say reality is the result of complex negotiations between the observer and the observed. But that is simply a point of view…”
Digital Bangladesh

[dude]

Iframe is the webpage element that creates an inline frame that contains another document. Iframe functions as a document within a document, or like a floating FRAME. It just loads another html document within the <iframe> tags. Syntax <IFRAME>...</IFRAME>

Examples:
This example uses the IFRAME element and an HTML fragment to create a frame containing the page sample.htm.

Code:

<IFRAME ID=IFrame1 FRAMEBORDER=0 SCROLLING=NO SRC="sample.htm"></IFRAME>

Parameters of Iframe:

SRC=URI (URI of frame content)
NAME=CDATA (name of frame)
LONGDESC=URI (link to long description)
WIDTH=Length (frame width)
HEIGHT=Length (frame height)
ALIGN=[ top | middle | bottom | left | right ] (frame alignment)
FRAMEBORDER=[ 1 | 0 ] (frame border)
MARGINWIDTH=Pixels (margin width)
MARGINHEIGHT=Pixels (margin height)
SCROLLING=[ yes | no | auto ] (ability to scroll)

[quantum]

Dude, explains Iframe very nicely. I don't think, I can add anything more useful. Just one thing. Like Frames I do not recommend Iframes either. They are not good for search engine optimizations. Think, what would happen if someone reaches the iframe url from a search engine? Your page layout will totally break down. It will look very bad for your design. So my advice is to not use Iframe if possible at all. Iframes and Frames break down the basic structure of internet. Do not use them. Those are for kids.
_________________

Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.

[el_EdGaR]

Quantum, I'm asking you for help.

OK, I have this website and I use an account in a blogger.com to post the news there (i need that because the website is not only mine, and other people must be able to post their news easily). So I use an internal frame in the home page aiming to the blog site. This way, just as you enter my site you can read the latest news.

I know this is not the best method. The most important drawback is about the size of the iframe: I wish it was always as high as its contents, bearing in mind that the height of the contents may vary --suppose the blog shows only the latest post on the first page: but that post can be 5 to 500 lines long. But i am not allowed to give the iframe an attribute of height=100%. I am supposed to give it an absolute value.

So, iframes are no good solution. I understand. But, can you offer me any alternative?
_________________
el_EdGaR

[quantum]

A url would be helpful.

Why not let the content scroll vertically? The iframe height is fixed but if the content height is larger than the Iframe height the rest of the content can just scroll. Is there a problem using that?
_________________

Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.

[el_EdGaR]

I'll give you a URL as soon as I upload the whole thing.

Yeah, I could set the attribute "scrolling=yes" for the iframe. BUT then, the absolute size of the frame ought to be rather small (about 480 px) so it could be seen at once in every screen, even in those with the lowest resolutions. You'll see, the homepage itself is quite long, and it already has a scrollbar. Assume the internal frame is taller than the browser window, AND it has a scrollbar by its own. Then when browsing around, users have to scroll the homepage up or down in order to reach the up/down button of the iframe's scrollbar. That's too much confusion. I already tested it, and i got complaints.

There's another problem, but this one is probably my fault: "scrolling=yes" makes an horizontal scrollbar appear as well, and that's unnecessary. (Thing is, the frame is scrollable about two pixels horizontally, but no matter how many pixels bigger is the frame: it always can scroll two pixels further.)

(I don't know why this happens, but it's not the first time. I used to correct it by enclosing the text that appears in the iframe in a <DIV> tag whose width was slightly below 100% (say, 97% would do the trick). But that's just a patch, i don't even know why the problem appeared in the first place.)

Again, when I upload it you'll be the first to know.
_________________
el_EdGaR

[quantum]

hmm...the picture is not clear to me. Can you email me the page? Just a basic layout would suffice so that I can take a look. My email is quantumcloud<at>gmail.com

You can get rid of the horizontal scroll by assigning a stylesheet attribute for Iframe. I have not tested it, but it ought to work.

<style type="text/css">
iframe {
overflow: auto ;
}
</style>
Just put it in the header section.
_________________

Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.

[el_EdGaR]

Sorry, i didn't write the e-mail; i rather uploaded the homepage. You can see it at http://perso.wanadoo.es/fanzinemiserable/index.html

Don't try any links anyway, 'cause most of the rest of pages haven't been up'ped yet.

Now, THAT is what I want the page to look (more or less). The fact that the iframe is not visible at all was not intended, but it's fine to me. What I want is that all the current posts (i.e., the latest five) can be seen in the homepage.

If you open the source code, search for the iframe and set the frameborder attribute to 1, you'll be able to see where the iframe starts and ends. And yes, it's 5000 pixels high, so no matter how long the posts are, they will all be shown completely.

Cons: most of the time, it'll be way too much high and there's a lot of blank space. But that's a minor drawback to me, because many webpages have much extra space at the bottom.

The script you gave me didn't work :-( . The horizontal scrollbar kept appearing. Anyway, scrollbars are the least of my concerns: besides i don't like their looking, it's the iframe itself that worries me. But if you can't tell me about any other HTML structure or script (and I wish it's not a very complicated one), then an iframe shall be.
_________________
el_EdGaR

[quantum]

Alright, I took a thorough look into it. And the only solution to what you want is to use Frames, instead of IFrames. In that case, you have to write the html codes differently. What you want is to have three frames. One top frame holding the top banner and navigation. The bottom frame is split into two parts. Left side holds the navigation, right one loads the blog.

If the blog was in your server you could easily use a php include statement to load the blog file. But such is not the case.

But before you go using iframe or frame, you may want to read this article on Why not to use frames

In your case though, I do not see any alternative either.
_________________

Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.

[el_EdGaR]

Uh... considering that news are hosted in a different server, I think it's reasonable (or, at least, unavoidable) that they should be shown on a different frame. And, if that section of the website suffers the many disadvantages you talk about in your "Frames are evil" article... Well, can't help it.

But if I make 3 frames out of it, instead of one only iframe, then I've got to use a frameset doc, and two more sections in frames, which increases the possibilities of people getting from a search engine to one frame without possibility of browsing around... So I think the iframe is still the best... well, the less bad solution.

Thank you for your help!

[quantum]

hmm...but that does not solve your original problem. So now let us take on the horizontal scroll problem then. The horizontal scroll bar appears on your iframe because there are some long uninterrupted strings in there. That forces the horizontal scroll. And you cannot avoid it no matter how you try. Here is the string.

[http://www.ociojoven.com/ezimagecatalogue/catalogue/variations/150x300/28789-150x300.jpg]

Obviously this is wider than the iframe width that you assigned. If you can avoid using such long strings or wide images you will hopefully be able to avoid the dreaded horizontal scroll bar. Try and let me know if it works.
_________________

Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.

[quantum]

As you can see from the above post, we used to face the same problem. If someone posted a long url the main forum table would break down. So I had to implement a php code that would look for such long strings or wide images and will assign a div scroll property if needed just for the specific post.

Another thing you can and should try is to go for a free flowing/percentage table design instead of fixed pixel width. This way you will always get the maximum screen width available on the users' browser window. If the user is using a resolution more than 800 by 600 then you will be alright.

So this is what I recommend, design your main table with percentage. Load the blog in Iframe with auto scrolling enabled and a height of say, 500px. That will work out for you.
_________________

Dust fills my eyes / Clouds roll by / and I roll with them / Centuries cry / Orders fly / and I fall again
Afford best design, implement best solution. Outsource your web design.