Jump to content

Use browser scroll instead of Iframe scroll


kvnirvana

Recommended Posts

How do you get Iframe to disable the scrolling, so it's only the browser that can be used for scrolling? I know you can set scrolling="no", but that is not what I want. If the content exeeds the frameĀ  I want to use the browsers scroll instead of Iframe. How can that be done?

Link to comment
Share on other sites

It's already set to 100%

Here is my full code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>bib.com</TITLE>

</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<DIV style="position:absolute;left:0px;top:5px;width:100%;height:100%;z-index:1" align="left">
<TABLE width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<img src="logo.jpg" width=130" height="130" />
</TABLE></DIV>


<DIV style="position:absolute;center:0px;top:143px;width:100%;height:100%;z-index:1" align="left">
<TABLE width="100%" height="100%" border="0" cellpadding="0" cellspacing="1">
<TR>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="welcome.php" target="kasp">Welcome</B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="igen.php" target="kasp">igen</A></B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="bo.php" target="kasp">Bo map</B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="ord.php" target="kasp">Ord</B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="go.php" target="kasp">Go </B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="forum.php" target="kasp">Forum</B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="kon.php" target="kasp">Kon</B></FONT></TD>
</TR>
</TABLE></DIV>
<DIV style="position:absolute;center:0px;top:165px;width:100%;height:100%;z-index:1" align="left"><TABLE width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"><TR><TD align="left" valign="top" width="100%" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><hr></B></FONT></TD></TR></TABLE></DIV>

<IFRAME name="kasp" style="position:absolute;center:1px;top:203px;width:100%;height:100%;z-index:2" src="" scrolling="no" frameborder="0" >Your browser does not support inline frames or is currently configured not to display inline frames.</IFRAME>
</BODY>
</HTML>

Link to comment
Share on other sites

Ah, yeah, that won't work. Do you know how tall the page in the iframe will be? If so, you can assign it a height of that many pixels.

Ā 

Try this. Use JavaScript to get the height of the body element and assign it to the iframe.

document.getElementById('iframeID').style.height = document.body[0].offsetHeight;

Ā 

You'll need to either put that at the end of the page, or in a function that is called with the onload event AND on the onresize event. Also, you'll need to assign the ID to the iframe.

Link to comment
Share on other sites

I donā€™t now how high it will be it depends on what the user chooses.

Iā€™ve tried this, but it still doesnā€™t work. Canā€™t it be done without using java?

Ā 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>bib.com</TITLE>

</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000">
<DIV style="position:absolute;left:0px;top:5px;width:100%;height:100%;z-index:1" align="left">
<TABLE width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<img src="logo.jpg" width=130" height="130" />
</TABLE></DIV>


<DIV style="position:absolute;center:0px;top:143px;width:100%;height:100%;z-index:1" align="left">
<TABLE width="100%" height="100%" border="0" cellpadding="0" cellspacing="1">
<TR>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="welcome.php" target="kasp">Welcome</B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="igen.php" target="kasp">igen</A></B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="bo.php" target="kasp">Bo map</B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="ord.php" target="kasp">Ord</B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="go.php" target="kasp">Go </B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="forum.php" target="kasp">Forum</B></FONT></TD>
<TD align="left" valign="top" width="122" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><A href="kon.php" target="kasp">Kon</B></FONT></TD>
</TR>
</TABLE></DIV>
<DIV style="position:absolute;center:0px;top:165px;width:100%;height:100%;z-index:1" align="left"><TABLE width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"><TR><TD align="left" valign="top" width="100%" height="40"><FONT style="font-size:16px" color="#000000" face="Arial"><B><hr></B></FONT></TD></TR></TABLE></DIV>

<IFRAME id="new" name="kasp" style="position:absolute;center:1px;top:203px;width:100%;height:100%;z-index:2" src="" scrolling="no" frameborder="0" >Your browser does not support inline frames or is currently configured not to display inline frames.</IFRAME>
</BODY>
</HTML><script type="text/javascript">
document.getElementById('new').style.height = document.body[0].offsetHeight;
</script>

Link to comment
Share on other sites

Not Java, JavaScript. Completely different. And I don't believe you can do it without JS.

Ā 

Is there any other element in the page that will be the height that you want the iframe to be? If so, add an ID to it and try this:

document.getElementById('new').style.height = document.getElementById('otherID').offsetHeight;

Link to comment
Share on other sites

No. The problem is that the overflow-y: scroll is already how it will behave. The problem is not with the body, it is with the iframe. Assigning height to 100% sets its height to 100% of the window height, not the web page's height, which is why it's not working. I don't think there's anyway you'll be able to do it without assigning the height in pixels manually, either with JS or with CSS.

Link to comment
Share on other sites

Now that I think even more about it, you're actually going to need to use JS in the iframe page that resizes the iframe window.

window.parent.document.getElementById('new').style.height = some number;

Ā 

Something like that.

Link to comment
Share on other sites

Post your code for the page that is to be in the iframe. There should be something on that page that will have a height that you can extract to then assign to the iframe's height. If there isn't one, maybe one can be created.

Link to comment
Share on other sites

I noticed that in your code you have a large block of repetitive formatting. This can be eliminated and 'cleaned-up' using CSS, which is advantageous as you don't have to spend time copy/pasting too much, and it's easier to read/edit, besides being a more contemporary method. You've actually used a little CSS already which confuses me. Regardless, you might enjoy learning how to attach style sheets and simplify your future styling code :)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.