display complete web page in iframe with scroll bars

Hi,

on one page have two iframes that displays two different web pages. Iframes hight is 900 px and width is set to 100%, scrolling is auto. Problem is that web pages are larger than size of iframe and they are not loading correctly. I want to have full size web page in iframe with scroll bars (horisontal and vertical if necessary, how to do that?
LVL 1
kahvedzicAsked:
Who is Participating?
 
kahvedzicConnect With a Mentor Author Commented:
Solution was to put iframe in div and then with div properties define size of an iframe and with iframe properties define page visibility properties (owerflow must be se to scroll). Anyway thanks for effort and help.

Cheers.
0
 
Asim NazirCommented:
This Javascript function works in FF and IE:

// Sets iframe src
        function changeIframeSrc(id, url) {
            var el = document.getElementById(id);
            el.src = url;
}

Following code is used to resize iframe and called at iframe's onresize="reSize();":

/* Resizes iframe height to 100%.
        iFrame was not filling whole available area.
        So had to introduce this logic.*/
        function reSize() {
            try {
                var ifrm = document.getElementById('feedDetail');

                ifrm.style.height = '100%';
            }
            catch (e) {
                //window.status = 'Error: ' + e.number + '; ' + e.description;
            }
        }
0
 
kahvedzicAuthor Commented:
I did not notice any change maybe I did something wrong, this is my code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Main2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        // Sets iframe src
        function changeIframeSrc(id, url) {
            var el = document.getElementById(id);
            el.src = url;
        /* Resizes iframe height to 100%.
        iFrame was not filling whole available area.
        So had to introduce this logic.*/
        function reSize() {
            try {
                var ifrm = document.getElementById('I21');

                ifrm.style.height = '100%';
            }
            catch (e) {
                //window.status = 'Error: ' + e.number + '; ' + e.description;
            }
        }
    </script>
    <style type="text/css">
        div.hideSkiplink
{
    background-color:#3a4f63;
    width:100%;
}

div.menu
{
    padding: 4px 0px 4px 8px;
}

div.menu ul
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}
        .style1
        {
            width: 100%;
        }
        .iframe
        {
            overflow: hidden;
        }
        .menu
        {
            font-family: Verdana;
        }
        </style>
</head>
<body >
    <form id="form1" runat="server">
        <table class="style1">
            <tr>
                <td class="clear hideSkiplink">                
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem Text="1" Value="1"/>
                        <asp:MenuItem Text="2" Value="2">
                        <asp:MenuItem Text="3" Value="3">
                    </asp:MenuItem>
                    </Items>
                </asp:Menu>
                </td>
            </tr>
        </table>
        <table align="center" class="style1">
            <tr>
                <td style="text-align: center">
                <iframe src="http://link1.asp" runat="server" 
                        onresize="reSize();" width="100%" 
                        height="900" id="I21" 
                        name="I21" marginheight="0" marginwidth="0" scrolling="auto" >
                       <p>Your browser does not support iframes.</p>
                </iframe>
                </td>
                <td style="text-align: center">
                    <iframe src="http://link2.aspx" runat="server" width="100%" 
                        height="900" id="I22" 
                        name="I22" marginheight="0" marginwidth="0" scrolling="auto" 
                        style="overflow: visible" >
  <p>Your browser does not support iframes.</p>
</iframe></td>
            </tr>
            <tr>
                <td style="text-align: center">
    <asp:ImageButton ID="popup6" runat="server" Text="Button" ImageUrl="~/link-48x48.png" />
                </td>
                <td style="text-align: center">
    <asp:ImageButton ID="popup7" runat="server" Text="Button" ImageUrl="~/link-48x48.png" />
                </td>
            </tr>
        </table>
    </form>
    </body>
</html>

Open in new window

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
Asim NazirCommented:
changeIframeSrc closing } is missing :)
0
 
Asim NazirCommented:
You can also see 100% height problem solution over here http://www.amirharel.com/2009/07/28/implementing-iframe-toolbar/
0
 
kahvedzicAuthor Commented:
I add missing } but now its working even worst than it was, iframe is smaller and everything is messy, and I cant see anything normal.
0
 
kahvedzicAuthor Commented:
Basically problem is that I cant see full size page in iframe. I have frame with this properties width="100%" height="900" but cant see complete page with scroll bar.
0
 
kahvedzicAuthor Commented:
Is there any solution, suggestion, something this is really urgent to me? Thanks
0
 
kahvedzicAuthor Commented:
no expert provided me quality solution so I try by myself and there it is.
0
All Courses

From novice to tech pro — start learning today.