Solved

display complete web page in iframe with scroll bars

Posted on 2011-02-25
9
644 Views
Last Modified: 2012-05-11
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?
0
Comment
Question by:kahvedzic
  • 6
  • 3
9 Comments
 
LVL 10

Expert Comment

by:Asim Nazir
ID: 34978539
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
 
LVL 1

Author Comment

by:kahvedzic
ID: 34978597
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
 
LVL 10

Expert Comment

by:Asim Nazir
ID: 34978658
changeIframeSrc closing } is missing :)
0
 
LVL 10

Expert Comment

by:Asim Nazir
ID: 34978669
You can also see 100% height problem solution over here http://www.amirharel.com/2009/07/28/implementing-iframe-toolbar/
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 1

Author Comment

by:kahvedzic
ID: 34978739
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
 
LVL 1

Author Comment

by:kahvedzic
ID: 34994847
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
 
LVL 1

Author Comment

by:kahvedzic
ID: 35015756
Is there any solution, suggestion, something this is really urgent to me? Thanks
0
 
LVL 1

Accepted Solution

by:
kahvedzic earned 0 total points
ID: 35084316
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
 
LVL 1

Author Closing Comment

by:kahvedzic
ID: 35126331
no expert provided me quality solution so I try by myself and there it is.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now