Scroll Bars In Middle Of Browser

How Is It Done

[Funfone]

Hi

Does anyone know how to have a page with say a box in the middle where I want all the text to go into, however the scroll bar must be on the box in the middle so that the page borders are the same but you can view all of the text in the middle box by using the scroll bar on the page.

Thanks

[Knowles]

<iframe></iframe> This will work it will set your box to the default size. YOu can then add attributes to it to make it larger or smaller.

You could also set up a CSS with overflow:scroll; for a div tag but I think this is frowned apon. But I could be wrong.

[BlobFisk]

It is also possible to create, using javascript and a containing and content layer, a scrolling layer without setting the overflow to scroll.

StickyMail me and I can send you a URL where I have this implemented.

[OhMyPixel]

What, if there are any, are the compatibility issues with using IFRAME? I've seen it used but I only use IE to browse other peoples websites (I don't check them often for b.c.).

I might need to use this in the future - I'm assuming you would position the IFRAME using CSS?

[Knowles]

errr It doesnt work with NN4.x and I cant remember if it did with NN6 or not. I dont think it worked with Opera 5.x but its been so long since I checked on those I forget. I havent seen one in awhile so I am not sure about it working with Mozilla 1.x or Opera 6.x. I would say use at your own risk.

[BlobFisk]

iLayer is the Netscape version of iFrame. IE doesn't read iLayer and Netscape doesn't understand iFrame.

By placing one within the other you can get a similar look in both IE and Netscape.

eg:

<iFrame>
<iLayer>
-- Content --
</iLayer>
</iFrame>

I'm fairly sure that this is how you get around the problem... I never use either iLayers or iFrames so I'm not 100% sure. No doubt someone who is will be along shortly!

[Axacta]

This is what I am using:

<form name="A" method="post" action="none">

<p align="center">

<textarea style="WIDTH: 100%; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; font-family:Verdana,Arial,Helvetica; FONT SIZE: 13; COLOR: #000000; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #E6E6FA" name="S1" rows="8" cols="45">

"content"

</textarea>

</form>

There are a couple of drawbacks to using a form. You can define the text overall, but you can't add bold or italics or change fonts or add graphics, etc. And although the form looks great as defined in IE it does not look as good in Opera or Netscape. On the other side of the coin I am pretty sure the content is spidered as part of the current page, unlike an iFrame, or possibly javascript.

To be sure this is a compromise, and I would like to hear of a better way if possible.

I'm not sure about this, but I think I heard someone talk about doing this with Cold Fusion. Anyone familiar with it?

[rewboss]

The cheap-and-nasty quick-fix solution is to use a good old-fashioned frameset. It's a horrible, horrible thing to do, but at least it works on all major browsers.

The frameset would work a bit like this:

<frameset rows="30%,*,30%" cols="30%,*,30%">
<frame src="topleft.html" scrolling="no" />
<frame src="topmid.html" scrolling="no" />
<frame src="topright.html" scrolling="no" />
<frame src="midleft.html" scrolling="no" />

<frame src="main.html" scrolling="auto" /><!-- This is the frame for the text -->

<frame src="midright.html" scrolling="no" />

...etc for the bottom row...

</frameset>

[Knowles]

Dats just nastyyyyyy. How many frames you saying to use there 6? My gawd man thats to many! But when nothing else can be done play dirty and use it.

[rewboss]

It would be 9 frames in all. Nasty. But it works.

[kris]

nine frames?!!

I think I am getting sick...

lol

[Knowles]

Your right it is 9 it scared me so bad I forgot how to ADD! lolz But if it works it works.

[Axacta]

You could do it with five:

AAAAAAAAAAAAAAAA
BBBBBCCCCCCDDDDD
EEEEEEEEEEEEEEEE

But I still don't see that as a solution.

[rewboss]

Five frames, but two framesets.

Well, if you're passionately opposed to frames (and, heaven knows, there are good reasons to be so), it certainly wouldn't be an acceptable solution. But, to be honest, I wouldn't recommend trying to put a box with a scrollbar in the middle of the screen at all. But if you are going to do it, <iframe> isn't supported by Netscape 4, CSS overflow property isn't supported by Netscape 4 or (if memory serves) Opera -- what choice is there?

[scotty]

Another way to do the inner-frames is to use CSS1 overflow. It allows you to place a frame virtually anyway in the document, if it is combined with the absolute position. For example,

<div style="width: 500px; height: 300px; overflow: auto">
 ... content goes to here ...
</div>

[rewboss]

:: points to his previous post on the subject of CSS overflow ::

[ggrot]

I thought I'd throw this out:
[developer.netscape.com...]

You can make the same effect as an iframe for nn4.x, scrollbars and everything. All the scrollbar buttons are images though. Its a really nasty large peice of j/s code. And its not that well written, so good luck working out how it works. I've had someone spend over a week rewriting it so I can use it for some more custom stuff. But it CAN be done.