/    Sign up×
Community /Pin to ProfileBookmark

Iframe w/o scrolling or similar?

I want to put a frame around my forum but I don’t want there to be any scroll bars- instead I wand the frame height to adjust to the forum’s size.

Perhaps Iframe are not the correct thing to use, but I need something that will give the same effect.

So, (1) no scroll bars and (2) I want the height to autostrech according to the forum’s size (while maintaining a constant defined width).

See example: (Forum is cyan part, white is the frame I want to put around it)

[img]http://i10.photobucket.com/albums/a112/romanemp/example.jpg[/img]

If clarification is needed, just let me know.

to post a comment
HTML

21 Comments(s)

Copy linkTweet thisAlerts:
@ray326Dec 02.2006 — Looks like a div with a defined width to me.
Copy linkTweet thisAlerts:
@thoerauthorDec 02.2006 — Thanks for the reply!

I'm familiar with the dir tag, but didn't know it could be used for something such as this ? Perhaps you could elaborate? What would be the code for it?

Thanks for the help!
Copy linkTweet thisAlerts:
@jakemanDec 02.2006 — Try right clicking on frame and then on "Inline Frame Properities". Uncheck "Show borders", then select "Never" Scrollbars". This may work - good luck.
Copy linkTweet thisAlerts:
@thoerauthorDec 02.2006 — Hmmm, what HTML software are you using? I use Nvu and it's not possible to do what you say ? If you know the code though, I could use that.

If not, perhaps the div thing will still work (if someone can post the code)
Copy linkTweet thisAlerts:
@yitzleDec 03.2006 — W3.org!

http://www.w3.org/TR/html4/present/frames.html#h-16.5
frameborder (1|0) 1 -- request frame borders? --
scrolling (yes|no|auto) auto -- scrollbar or none --

And try height=100% ?
Copy linkTweet thisAlerts:
@blakeeliasDec 03.2006 — Try this inside of your framed page:

<div style="width:---px"></div>

Replace --- with the width that you want (in pixels). The height should auto-adjust.
Copy linkTweet thisAlerts:
@yitzleDec 03.2006 — That will set the height to a constant pixel size.
Copy linkTweet thisAlerts:
@ray326Dec 03.2006 — <div style="width:500px; border:1px solid black">

your content

</div>
Copy linkTweet thisAlerts:
@blakeeliasDec 03.2006 — Rather than using IFRAME, surround your content with this:

[CODE]<div style="WIDTH:120px; border-style: inset; border-color: lightgray; border-width: 2px;">

and

</div>
[/CODE]


Change the width from 120px to any width you want. The DIV element will automatically resize, unlike IFRAME.
Copy linkTweet thisAlerts:
@thoerauthorDec 03.2006 — Thanks for the replies! One question though- how do I get the div to display my forum inside it? All I can manage to do is put some of my own content right now- I want my forum (hosted on invisionfree's server) to fill the div area like displayed in the picture.

Thanks again for the help!
Copy linkTweet thisAlerts:
@thoerauthorDec 05.2006 — *bump*
Copy linkTweet thisAlerts:
@ray326Dec 05.2006 — I think that will be pretty tough given the forum will actually be a form posting back to the host.
Copy linkTweet thisAlerts:
@WebJoelDec 06.2006 — The only way you're going to get content from 'point B' inserted into document page 'point A' [I]without a scrollbar[/I], and have it expand to accomodate increasing content from 'point B', might be to use a *php include. That way, the content from 'B' is referanced to appear in 'A' and if 'B' gets taller, if you style 'A' correctly, it should accomodate.

Anything else (like a iFRAME maybe or <object> of sure, is going to by default always add at least a vertical scrollbar... even if it is 'shadowed out'.

Esp. true for IE6, which tends to put a scrollbar on <object> and nothing willl prevent this.
Copy linkTweet thisAlerts:
@mtm1Dec 06.2006 — you can recalculate the iframe size using an "onLoad" javascript event. i just had to do this recently on one of my sites as well and it works great. the iframe tag looks like this:

[CODE]<iframe src="whatever.htm" name="ThisFrame" width="500" height="100%" scrolling="no" frameborder="0" onLoad="calcHeight()">
Your browser does not support inline frames.</iframe>[/CODE]


particularly pay attention to the onLoad="calcHeight()" function. your javascript then looks like this:

[CODE]function calcHeight()
{
var the_height=
document.getElementById('ThisFrame').contentWindow.document.body.scrollHeight;
document.getElementById('ThisFrame').height=the_height;
}[/CODE]


notice that the name of the iframe must correspond to the "getElementByID()" in the javascript.
Copy linkTweet thisAlerts:
@WebJoelDec 06.2006 — wow... I might have to use this. ?
Copy linkTweet thisAlerts:
@thoerauthorDec 09.2006 — Thanks for the reply! I tried your code, but unfortunately it didn't work for some reason ? It still doesn't auto-calculate the height of the forum. This is a simple test using the code (what I did to see if it would work). Did I do something wrong?

&lt;html&gt;
&lt;head&gt;
&lt;script language='Javascript' type='text/javascript'&gt;
function calcHeight()
{
var the_height=
document.getElementById('ThisFrame').contentWindow.document.body.scrollHeight;
document.getElementById('ThisFrame').height=the_height;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;iframe src="http://s12.invisionfree.com/Roman_Empire/index.php?act=idx" name="ThisFrame" width="760" height="100%" scrolling="no" frameborder="0" onLoad="calcHeight()"&gt;
Your browser does not support inline frames.&lt;/iframe&gt;
&lt;/body&gt;
&lt;/html&gt;


That is the forum I want to display just so you know too.
Copy linkTweet thisAlerts:
@thoerauthorDec 12.2006 — *bump*
Copy linkTweet thisAlerts:
@mtm1Dec 12.2006 — ahh you know i forgot to say that this only works in IE... not sure if that's the problem for you.
Copy linkTweet thisAlerts:
@mtm1Dec 12.2006 — oh and it appears your problem is getting a webpage from a different domain than the one you are calling the page from... it's a built-in security measure. looking for a work-around right now.
Copy linkTweet thisAlerts:
@thoerauthorDec 12.2006 — Thanks, I'll be watching to see if you find a solution!

ahh you know i forgot to say that this only works in IE...[/quote]

I'm assuming there's no way to make it firefox compatible?
Copy linkTweet thisAlerts:
@thoerauthorDec 17.2006 — Any luck?
×

Success!

Help @thoer spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...