Help - Search - Members - Calendar
Full Version: iframe double scroll bar paradox
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
ronehrlich
Please help.
I have a set of web pages with a horiz nav bar across the top that has buttons that load various pages in the iframe target area on the lower 3/4 of the screen. We want the entire screen scrollable with one scrollbar as one solution, OR the entire iframe area scrollable with a single scroll bar as another possible solution, does not matter which. What we do not want is for the user to have two manipulate two scroll bars (the iframe one and the outside one) in order to view the bottom of the iframe area. Thanks in advance, Ron E.
Tom H.
Can you provide the address of a page which shows this problem? And what web browsers are affected? The solution may be quite difficult to achieve.
Christian J
QUOTE(ronehrlich @ Oct 3 2009, 01:14 AM) *

I have a set of web pages with a horiz nav bar across the top that has buttons that load various pages in the iframe target area on the lower 3/4 of the screen.

Frames are best avoided in most cases: http://htmlhelp.com/faq/html/all.html#frame-problems --it's far better to use server-side includes (SSI or PHP).

QUOTE

We want the entire screen scrollable with one scrollbar as one solution,

There are javascripts that resize an iframe to display all of its content so the user doesn't have to scroll, like this one: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm (doesn't work in Opera though).

QUOTE
OR the entire iframe area scrollable with a single scroll bar as another possible solution, does not matter which. What we do not want is for the user to have two manipulate two scroll bars (the iframe one and the outside one) in order to view the bottom of the iframe area.

To do that the iframe height together with the rest of the frame content must never exceed the user's browser viewport height, but you can't be sure of that. One way to make this work "more or less" might be to use a percentage height for the page's vertical sections, say 75% for the iframe and less than 25% for the non-framed content (nav etc), and provide enought space that there's "always" room for the other content even in low viewports.

CODE
html, body {margin: 0; padding: 0; height: 100%;}
div#top {height: 20%;}
iframe {height: 75%;}

<body>
<div id="top">Put all content except the iframe in here</div>
<iframe src="frame.html"></iframe>
</body>


But again, separate parent pages with server-side includes is much better... smile.gif
ronehrlich
QUOTE(Christian J @ Oct 3 2009, 05:29 AM) *

QUOTE(ronehrlich @ Oct 3 2009, 01:14 AM) *

I have a set of web pages with a horiz nav bar across the top that has buttons that load various pages in the iframe target area on the lower 3/4 of the screen.

Frames are best avoided in most cases: http://htmlhelp.com/faq/html/all.html#frame-problems --it's far better to use server-side includes (SSI or PHP).

QUOTE

We want the entire screen scrollable with one scrollbar as one solution,

There are javascripts that resize an iframe to display all of its content so the user doesn't have to scroll, like this one: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm (doesn't work in Opera though).

QUOTE
OR the entire iframe area scrollable with a single scroll bar as another possible solution, does not matter which. What we do not want is for the user to have two manipulate two scroll bars (the iframe one and the outside one) in order to view the bottom of the iframe area.

To do that the iframe height together with the rest of the frame content must never exceed the user's browser viewport height, but you can't be sure of that. One way to make this work "more or less" might be to use a percentage height for the page's vertical sections, say 75% for the iframe and less than 25% for the non-framed content (nav etc), and provide enought space that there's "always" room for the other content even in low viewports.

CODE
html, body {margin: 0; padding: 0; height: 100%;}
div#top {height: 20%;}
iframe {height: 75%;}

<body>
<div id="top">Put all content except the iframe in here</div>
<iframe src="frame.html"></iframe>
</body>


But again, separate parent pages with server-side includes is much better... smile.gif


Thanks for your reply. Unfortunately, none of the pages that can appear in the iframe will fit on a single screen, so I do need one scroll bar, but not two, as is happening now. I would not even mind two scroll bars as long as the user does not have to manipulate both in order to see the things at the bottom of the iframe. Our URL is dheconsl.brinkster.net/ftrfkron/indexnew.htm if you care to take a look. Each page may take 10-15 secs to load. Let me know if u c a solution and thanks.
Christian J
Don't the ideas I posted above work?
glenco
I just had this problem with the two scrollbars appearing after using an HTML page as the "src" inside an iFrame. I just wanted the inside page to scroll and the iFrame to be invisible. This worked in all browsers....

<style type="text/css">
body, html { height: 100%; padding: 0px; margin: 0px }
.onescrollbar { overflow: hidden; width: 100%; height: 100% }
</style>
</head>
<body>
<div class="onescrollbar">
<iframe width="100%" height="100%" src="http://www.???.com"></iframe>
</div>
</body>

Hopes this helps somebody...Glen
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.