IFrame and height and width

[Crosis]

I am wondring if it possible to use an Iframe and have it do an "auto" height and "auto" width so that the dimensions of the page its loading is its, the Iframe's, dimensions?

I know just using "auto" in the "height="auto"" does not work and it would seem that it is possible to do but i don't see how.

If anyone has any ideas or suggestions about the correct code to do this please help me out. :)

[pb&j]

does 100% work for the value?

[Crosis]

well it does but it doesn't do what it needs to do....

what i have is for the Iframe height="100%" width="100%"

Mind you that the page looks fine, mostly, with a 1024x860 setting but when people visit with 800x600 - the iframe has 2 scroll bars, vertical and horizontal and it looks terrible.
I put just about every webpage that loads into the iframe at 750 so the width usually isnt an issue and i get no horizontal scrollbar.
When I have the height be 100% for the iframe and whatever for the webpage loading into it - it always has a vertical scrollbar since the page never loads the right height.

ill keep playing with it but any more suggestions would be great

[cg9com]

i dont think the iframe will format the page its displaying, if it needs vertical scrollbars, it will use them, lest you size the frame for the entire width

[Crosis]

Well the width i can control by having the webpage being loaded into the iframe be 750 pixels wide. For height its a diffrent story since your controling the width, the height will increase (The height will not always be constant).

I need to find a way to have the height of the iframe be equal with the height of the webpage so there is no scrollbars and in effect, no knowledge that an iframe is even there.

I just wish that when the iframe was constructed that there would have been an instruction to give to the iframe to say to "match" the dimensions of the webpage that it is showing.

any other ideas/suggestions are very welcome. :)

[Worf]

I'm working on the same problem too.

But until now, it appears that you can't adapt the IFRAME size to the actual page you want to display within, because the IFRAME is initiated in it's size BEFORE the webpage to be displayed therein is loaded.

I tried it with the OBJECT tag, but since I still didn't find out all the "finesses" of this tag, I didn't get a satisfying result yet.

Anyone, some other ideas?

Worf

[Crosis]

Well I found microsoft's site with different styles and things you can with html and specific properties. It had a good one with iframes and different things you can do with it.

Im not too familiar with the object tag but they give alot of what you can do with it. A curious property is "contentWindow" which seems promising but i dont know how to implement it. Any idea through what anyone finds at the link below (or anywhere) would be great.


http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/iframe.asp

(This might help you Worf.....son of mogh):thumbsup:

[cg9com]

Originally posted by Crosis

I need to find a way to have the height of the iframe be equal with the height of the webpage so there is no scrollbars and in effect, no knowledge that an iframe is even there.
why not use a frameset then? its more widely supported
this will create one big frame, displaying whatever page you want.
i think it will work, i havnt used frames in forever lol

<frameset rows="100%,*">
<frame name="main" src="main.html">
</frameset>

[Crosis]

Well i just tried frameset and what it did was make a small box for the iframe and suffice it to say - it didnt look good. i wonder if i put it in the wrong place - i put it before the iframe tags and then i closed it before the closing iframe tag so it looked like this...


<frameset rows="100%,*">
<IFRAME SRC="news.htm" scrolling=auto frameborder=0 NAME="rightcell" valign="top"></frameset></IFRAME>

the thing with frameset is it has to be in the index - from what i remember - and the thing with iframe is you put it in the body of a webpage and do not need any index. if im mistaken then someone please tell me.

any more ideas/suggestion please share!

[Crosis]

anyone? don't be shy.

[pb&j]

Regular frames will divide up the current window, iframes will produce a small window onto the current web page. Your last example is mixing the two together plus overlapping the codings.

CG9COM had given you the coding for a full page length frames setup which seems to be what you are after. Most people do put this type of setup as their "index" page considering it would be the first page loading by default, but it isn't required.

[cg9com]

iframes are different than framesets, (although i dont think you can use an iframe without a frameset dtd, which doesnt make sense at all)

your index.html page should look like this.

<html>
<head>
<title>This page displays another page inside a frame</title>
<frameset rows="100%,*">
<frame name="main" src="main.html">
</frameset>
</head>
</html>


this will make your index page display the main.html document, in <frameset rows="100%,*", this specifies that the frame will cover the entire page, and frame src="main.html" specifies what page the frame is displaying, so in this case when you open index.html it will interpret your frameset and actually just display the main.html page, thus adding a frame that no one knows exists, lest they view source.

in IE you can notice the 2 documents by right clicking the page and hitting view source, this will show the main.html source, and if you were to view source through the menu bar at the top, it would show you the source for the index.html page.

so remember, there are 2 pages, 1 is index.html which contains the frameset, and the other is main.html, the page the frameset from index.html is displaying, naturally you can change the file names to whatever you want.

hope this is what you needed, if you have more questions dont hesitate to ask

[Crosis]

yea that is what i am looking for and i did start to implement it... I am having somewhat of a difficulty though and its because there will be actually 2 frames. one on the top for navagation and then the one on the bottom for the webpage to be displayed...

When i had the Iframe, i made the entire webpage into tables and in one of the rows of the table i put in the iframe but with no auto height and auto width, its barely doing a decent job.


heres the code...

<html>

<head>
<title>index</title>
</head>

<frameset rows="*,*">
<frame name="top" src="top.htm" scrolling="no" marginheight="0">
<frame name="bottom" src="news.htm" margin width="0" scrolling="auto" noresize>

</frameset>

</html>

The issue is, is i need the top frame to have an auto height as well as the bottom frame to have an auto height. I thought by putting in the * for frameset rows it would auto both of them but obviously not. I relize it just makes each of the frame have 50% of the window and thats not what i want. When someone has a lower screen resolution - it will cover up half of the navigation page and that just aint good.

I apprectiate all the help everyone and boy am i asking for more!
:D

[Crosis]

nevermind - i got it - i have the left value at 260pixels and that works for all resolutions - thanks again!

[GoHF]

Just something silly I have done plenty (IE4+ only, although there isnt any reason why it shouldnt work on N6+ with the proper changes).

---------------------------------------------------------------
- Give your iframe an ID.

ex.: <iframe id=oIframe width=100%></iframe>

- Make your iframe scrolless: scrolling="no"
- Encapsulate all the html inside <body></body> of the page you want to load on the iframe in a <div></div> and give that <div> an ID as well (do this for all pages that will load on the iframe).

ex.: <html><body><div id=oDiv>Hello World!</div></body></html>

- Put this on the onload of the <body> tag of the pages that will load on the iframe:

"parent.document.all['oIframe'].style.height=window.document.all['oDiv'].offsetHeight";

---------------------------------------------------------------

And that should automatically resize your iframe to the full height of the page that just loaded in it. It only does this when the page loads completely, because that's the only time the browser knows the exact height of the rendered page.
It may, however, do some flickering when it resizes the Iframe, depending on your IE version and computer specs.

This solution may be a little more comfortable than using a frameset if you wish to hide the iframe in some ocasions or if you want to make something else with it (like make it move, roll up, jump, etc.) :)

If you dont control all the pages that will load on the iframe, this won't work and there is no practical way around it, as scripting is allowed "iframe document -> parent document" but not "parent document -> iframe document". It's a question of user security that browsers enforce.

[Crosis]

wow thanks alot. i will try this out a little later and test to see how well it goes.
Just a question though...will it work on other browsers besides IE or netscape? like oprah and some of the others..?

oh and should the <div> id tags be the same ID on every page i want to load in the iframe?

[GoHF]

As you noticed, what that bit of script really does is resize the iframe (oIframe) to the size (height only) of the div (oDiv).

Now, the iframe is on the parent document, which, by logic, won't change, so the ID of the iframe will always be the same.
The div on the child document, however, can change id from page to page. So, just make sure that when you put that bit of script on a certain page, you replace oIframe with the ID of the iframe on the parent document and replace the oDiv with the ID of the main div of that same child document (the one where you are putting the script)