×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

*
*
*
*

Thanks. We have received your request and will respond promptly.

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

iFrame Scrolling Without Body Scrolling

thread215-1734297

iFrame Scrolling Without Body Scrolling

iFrame Scrolling Without Body Scrolling

(OP)
I just removed the obsolete frames from one of my very old legacy Web sites (created in the mid-'90s) and have it up and running with iFrames but I am unable to remove the body scrolling and show only the vertical iFrame scrolling. Is there a way to do it?

My CSS includes:

CODE --> CSS

html {
	min-height: 100%;
	padding-bottom: 1px;
}

body {
	background-image: url('/images/systemimages/background.gif');
	font-family: Tahoma, Verdana, Arial, Helvetica;
	font-size: 13px;
	overflow: hidden;
	margin: 0;
}

iframe {
	position: relative;
	width: 100%;
}

iframe#main {
	overflow-y: auto; 
	overflow: -moz-scrollbars-vertical;
}

. . . and the HTML, simplified for this posting (meta tags removed), is something like:

CODE --> HTML

<!DOCTYPE HTML>
<html>
<head>
<title>Site Name</title>
<script language="JavaScript" src="/functions/iframes.js"></script>
<script type="text/javascript">
window.onload = function () {
    setIframeHeight(document.getElementById('main'));
};</script>
</head>
<body>

<iframe src="/php/logo.php" name="logo" frameborder="0" scrolling="no" hspace="0" vspace="0" height="120"></iframe>
<iframe src="/php/main.php" id="main" name="main" frameborder="0" scrolling="auto" hspace="0" vspace="0">
Please update your browser to view this and most other sites properly.
</iframe>

</body>
</html>

In case it helps, the included Javascript contains:

CODE --> Javascript

function setIframeHeight(iframe) {
    if (iframe) {
        var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
        if (iframeWin.document.body) {
            iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
        }
    }
};

RE: iFrame Scrolling Without Body Scrolling

I tested your code in the latest versions of Firefox and Chrome and the only changes required are the addition/updating of CSS attributes (see below).

html, body {
    height 100%;
}

iframe#main {
    overflow-y: auto;
    overflow: -moz-scrollbars-vertical;
    height: 100%;
}

Outside of that the <iframe> works as expected.

M. Brooks
http://mbrooks.info

RE: iFrame Scrolling Without Body Scrolling

(OP)
Thank you, though I still have the two scroll bars: one on the body and the other on the iFrame. Since posting my original question, the styles have evolved a bit from what I posted and now include the elements that you added among others. Here is what I have now:

CODE --> CSS

html , body{
	height: 100%;
}

body {
	background-image: url('/images/systemimages/background.gif');
	font-family: Tahoma, Verdana, Arial, Helvetica;
	font-size: 13px;
	/*overflow: auto;*/
	overflow-x: hidden;
	margin: 0;
}

iframe {
	width: 100%;
}

iframe#main {
	position: relative;
	overflow-y: auto;
	overflow: -moz-scrollbars-vertical;
	height: 100%;
	top: 120px;
}

iframe#logo {
	position: fixed;
	height: 120px;
	top: 0px;
	left: 0px;
	z-index: 150;
}

When I disable the scrolling in the iFrame, it works on the "home" page but then many others are either cut off or there is excessive background showing at the bottom. As it is now, there are two scroll bars and both seems to be needed in order to view the entire page but I want only the iFrame scroll bar.

RE: iFrame Scrolling Without Body Scrolling

(OP)
I just simplified the styles a bit and, while it still has two scroll bars, at lease now one of them does not go up to the top of the browsewr window beside the logo iFrame:

CODE --> CSS

html, body {
	background-image: url('/images/systemimages/background.gif');
	font-family: Tahoma, Verdana, Arial, Helvetica;
	font-size: 13px;
	overflow-x: hidden;
	margin: 0;
	width: 100%;
    height: 100%;
}

iframe {
	width: 100%;
}

iframe#logo {
	position: fixed;
	height: 120px;
	top: 0px;
	left: 0px;
	z-index: 150;
}

iframe#main {
    overflow-y: auto;
    overflow: -moz-scrollbars-vertical;
	margin-top: 120px;
    height: 100%;
}

If I change overflow-x: hidden; to overflow: hidden; then there is no scrolling whatsoever either in the iFrame of in the browser window. The window scroll bar seems to be related to the iframe#main top padding as it scrolls just enough to view the page if it goes under the logo.

RE: iFrame Scrolling Without Body Scrolling

(OP)
Okay, this seems to work except that the main frame was cut off consistently mid-way through the footer except on short pages which showed completely until I added margin-bottom: 150px;. However, it seems more of a kludge than a fix so what did I miss?

CODE --> CSS

html, body {
	background-image: url('/images/systemimages/background.gif');
	font-family: Tahoma, Verdana, Arial, Helvetica;
	font-size: 13px;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
	width: 100%;
	margin-bottom: 150px;
}

iframe {
	position: fixed;
	width: 100%;
}

iframe#logo {
	height: 120px;
	top: 0px;
	left: 0px;
	z-index: 150;
}

iframe#main {
    overflow-y: auto;
    overflow: -moz-scrollbars-vertical;
	padding-top: 120px;
    height: 100%;
}

RE: iFrame Scrolling Without Body Scrolling

(OP)
I spoke too soon! The site works properly in Firefox and IE but in Safari on the iPad, the pages are not scrollable so I can see only the portion that fits the screen.

RE: iFrame Scrolling Without Body Scrolling

(OP)
I've tried everything I could find to try but yet the main iFrame does not scroll in an iPad of other iDevice. It is fine in IE, Firefox and even Safari on Windows - I do not have an OSX system for testing.

Some of the solutions I've tested use jQuery or a combination of jQuery and CSS but nothing works - and there are too many to post here but the most common is to add -webkit-overflow-scrolling: touch; to the styles. When I do this, though, the page is entirely blank and has only the background image.

Any ideas?

RE: iFrame Scrolling Without Body Scrolling

"I spoke too soon! The site works properly in Firefox and IE but in Safari on the iPad, the pages are not scrollable so I can see only the portion that fits the screen."

This is due to a known issue specific to the iPad. Adding the following CSS attributes should resolve the issue.

-webkit-overflow-scrolling: touch;
overflow: auto;



M. Brooks
http://mbrooks.info

RE: iFrame Scrolling Without Body Scrolling

(OP)
Yes, I've read just about everything I could find and saw that it was a known issue. As I mentioned a while ago, when I do that I get a blank screen with only the background image.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login
Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close