Download Project: WebPepperFrameset.zip (5.47 kb)
Still Using Framesets?
Framesets were a valuable tool a few years back, but now, Master Pages are starting to take over this functionality. However, many sites still implement framesets and do not have the time to upgrade the entire site. So what we have here is a very simple way to toggle the size of the content area of with a very simple javascript function. The function will be placed on the page which defines the frameset and a button on one page within a frame.
This will allow the user to focus in on what they are interested in without all the other clutter. Let's say it is a report and within this report the user can drill down to other linked reports to view the details, or it an item, a sketch, drawing that can be enlarged to view its detail. Whatever the case, it is so simple to do, you just may find this very handy.
We Start With This:
Add the Javascript
The function Toggle() is added to the page defining the frameset: default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="default.aspx.cs" Inherits="ourNameSpace._default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:lang="en" lang="en" >
<head runat="server">
<title>the WebPepper</title>
<script type='text/javascript'>
function toggle(n)
{
var fs1 = document.getElementById('fsPage');
var fs2 = document.getElementById('fsBody');
if (fs1)
{
if (fs1.rows == "100,*,50") // "frHeader,fsBody,frFooter"
{
fs1.rows = "23,*,0";
fs2.cols = "0,*";
fs1.frameSpacing = "1"
fs2.frameSpacing = "0"
}
else
{
fs1.rows = "100,*,50";
fs2.cols = "275,*";
fs1.frameSpacing = "3"
fs2.frameSpacing = "3"
}
}
}
</script>
</head>
<frameset id="fsPage" rows="100,*,50" bordercolor="silver" framespacing="3">
<frame id="frHeader" src="ourHeader.aspx" runat="server"
frameborder="0" marginheight="0" marginwidth="0" noresize="noresize" scrolling="no" />
<frameset id="fsBody" cols="275,*" framespacing="3">
<frame id="frMenu" runat="server" src="ourMenu.aspx"
marginheight="0" marginwidth="0" frameborder="1" />
<frame id="frContent" runat="server" src="ourContent.aspx"
marginheight="0" marginwidth="0" frameborder="1" bordercolor="silver" scrolling="auto" />
</frameset>
<frame id="frFooter" src="ourFooter.aspx" runat="server"
frameborder="0" marginheight="0" marginwidth="0" noresize="noresize" scrolling="no" />
</frameset>
</html>
Add code to OnClientClick Event:
The button is added to the page which is the header: ourHeader.aspx
<asp:Button ID="Button1" runat="server" Text="Toggle Content Area"
OnClientClick="javascript:parent.toggle(this)" />
We Now Are Able To Show This:
Download Project: WebPepperFrameset.zip (5.47 kb)
Hope this helps!
the WebPepper team