March 18, 2012
resize automatically iframe hieght
Question by adilahmed
i include a iframe in master page and i want to resize iframe height according to its contents inside.
when ever iframe content increase iframe height should be increase.
<div id="div_NotificationOuter" style="position: fixed; bottom: 0px; right: 15px;
padding: 5px; background-color: White; background-image: url('../images/content_fixed_downup.png');
background-repeat: no-repeat; min-height: 130px; text-align: left; display: block;
border: 1px solid gray; width: 280px; overflow: hidden;">
<asp:ImageButton ID="img1b" runat="server" ImageUrl="../images/close.png"
Style="margin-right: 2px;float:right;" OnClientClick="Hide_NotifyPopUp()" />
ALERTS
Your browser does not support iframes.
and iframe page is
<div id="iframe_content">
<div style="overflow: auto;font-weight:bold " >
<label id="lblNotifyMessage" runat="server" style="margin-left:15px;">
</label>
</div>
<div style="font-size: 14px;margin-left:15px;">
<asp:Label ID="lblCount_Followups" runat="server" Text=""
Style="margin: 2px"></asp:Label><br />
<asp:Label ID="lblCount_Workflow" runat="server" Text=""
Style="margin: 2px"></asp:Label><br />
<asp:Label ID="lblCount_Inbox" runat="server" Text=""
Style="margin: 2px"></asp:Label><br />
<asp:Timer ID="Timer1" runat="server" Interval="111115000">
</asp:Timer>
<asp:Label ID="Label1" runat="server" Text="Notification Message"
Style="margin: 2px"></asp:Label><br />
<asp:Label ID="Label2" runat="server" Text="Notification Message"
Style="margin: 2px"></asp:Label><br />
<asp:Label ID="Label3" runat="server" Text="Notification Message"
Style="margin: 2px"></asp:Label><br />
<asp:Label ID="Label4" runat="server" Text="Notification Message"
Style="margin: 2px"></asp:Label><br />
<asp:Label ID="Label5" runat="server" Text="Notification Message"
Style="margin: 2px"></asp:Label><br />
<asp:Label ID="Label6" runat="server" Text="Notification Message"
Style="margin: 2px"></asp:Label><br />
<asp:Label ID="Label7" runat="server" Text="Notification Message"
Style="margin: 2px"></asp:Label><br />
<asp:Label ID="Label8" runat="server" Text="Notification Message"
Style="margin: 2px"></asp:Label><br />
<asp:Label ID="Label9" runat="server" Text="Notification Message"
Style="margin: 2px"></asp:Label><br />
</div>
</div>
Answer by Starx
You have to call a function on the parent page from the iframe to do this.
On parent page, create a similar function like this
function resizeIframe(var) {
$("iframeid").height(var);
}
Now, from inside the iframe call the following snippet
$(window).load(function() {
// ^ Once everything load. You can change this any event suitable
parent.resizeIframe($(window).outerHeight());
});
