kvnirvana Posted June 2, 2010 Share Posted June 2, 2010 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? Quote Link to comment Share on other sites More sharing options...
F1Fan Posted June 2, 2010 Share Posted June 2, 2010 I believe you can assign its height to 100%. style="height:100%;" Quote Link to comment Share on other sites More sharing options...
kvnirvana Posted June 3, 2010 Author Share Posted June 3, 2010 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> Quote Link to comment Share on other sites More sharing options...
F1Fan Posted June 3, 2010 Share Posted June 3, 2010 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. Quote Link to comment Share on other sites More sharing options...
kvnirvana Posted June 3, 2010 Author Share Posted June 3, 2010 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> Quote Link to comment Share on other sites More sharing options...
F1Fan Posted June 3, 2010 Share Posted June 3, 2010 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; Quote Link to comment Share on other sites More sharing options...
kvnirvana Posted June 3, 2010 Author Share Posted June 3, 2010 I still can't get it to work. Can't it be done with something like this <style> BODY { overflow-x:hidden; overflow-y:scroll; } </style> Quote Link to comment Share on other sites More sharing options...
F1Fan Posted June 3, 2010 Share Posted June 3, 2010 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. Quote Link to comment Share on other sites More sharing options...
kvnirvana Posted June 3, 2010 Author Share Posted June 3, 2010 OK, but how should I do that? I'm pretty new to this, so please bare with me :=) Quote Link to comment Share on other sites More sharing options...
F1Fan Posted June 3, 2010 Share Posted June 3, 2010 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. Quote Link to comment Share on other sites More sharing options...
kvnirvana Posted June 3, 2010 Author Share Posted June 3, 2010 I can adjust the size by doing what you said, but still if the content exeeds the page I can't use the browsers scroll, it just doesn't show all the content no matter how how I set the height. Quote Link to comment Share on other sites More sharing options...
kvnirvana Posted June 6, 2010 Author Share Posted June 6, 2010 Anyone? Quote Link to comment Share on other sites More sharing options...
F1Fan Posted June 7, 2010 Share Posted June 7, 2010 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. Quote Link to comment Share on other sites More sharing options...
James25 Posted June 14, 2010 Share Posted June 14, 2010 I had a similar problem, thanks to all Quote Link to comment Share on other sites More sharing options...
Soldier Jane Posted June 15, 2010 Share Posted June 15, 2010 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.