This page contains the source for 2 of the 3 pages that make up this demo. The following is the source for the main page (ExamplePanel_page.htm). It defines a Javascript function, loadBody(), that initiates the download of a URL into the IFRAME with the the ID 'bodyContentDownload' (note its style propertues include 'allowtransparancy: true') and the content of the main panel. When the overlay page displays in the IFRAME the content of the main panel shows through.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="generator" content="Dreamweaver">
<meta name="producer" content="Object Forge">
<meta name="creator" content="Allan Clearwaters">
<meta name="author" content="Allan Clearwaters">
<meta name="date" content="2003-08-04">
<title>Javascript Bacground and Panels Example</title>
<script language="JavaScript">
var reIncrement = 1;
var isIE = false, isNS6 = false, isNS7 = false, isNS = false, isOpera = false;
var appversion;
var ignoreResize = false;
// Original: Gregor (legreg@legreg.de)
var useragent = navigator.userAgent;
var bName = (useragent.indexOf('Opera') > -1) ? 'Opera' : navigator.appName;
var pos = useragent.indexOf('MSIE');
var bVer = null;
if (pos > -1) {
bVer = useragent.substring(pos + 5);
pos = bVer.indexOf(';');
bVer = bVer.substring(0,pos);
isIE = true;
} else{
pos = useragent.indexOf('Opera');
if (pos > -1) {
bVer = useragent.substring(pos + 6);
pos = bVer.indexOf(' ');
bVer = bVer.substring(0, pos);
isOpera = true;
}else if (bName == "Netscape") {
isNS = true;
bVer = useragent.substring(8);
pos = bVer.indexOf(' ');
bVer = bVer.substring(0, pos);
if (parseInt(navigator.appVersion) >= 5) {
pos = useragent.lastIndexOf('/');
bVer = useragent.substring(pos + 1);
}
}
}
appversion = parseInt( bVer );
if( isNS ){
isNS7 = (appversion >= 7);
isNS6 = !isNS7 && (appversion >= 6);
}
//
//Load the new body header and page contents
function loadBody( contents ){
bodyContentDownload.document.getElementById("content").innerHTML = "<b>Content loading ... Please wait</b>";
bodyContentDownload.location.replace(contents);
}
//
function gotoSite( myUrl ){
top.location = myUrl;
}
</script>
<!--SED PROCESSED-->
<body class="ExamplePage" onload="changeContentDiv(); loadBody( 'examplePage1.htm' )">
<div class="ExampleSheet" style="position: absolute; left: 0px; top: 0px; width: 820px; height: 620px;">
<div class="ExampleObject" style="visibility: hidden">
<a href="examplePage1.htm"> </a>
<a href="examplePage2.htm"> </a>
</div>
<div class="ExampleObject" style="position: absolute; left: 0px; top: 0px; width: 118px; height: 58px;">
<a href="http://www.object-forge.com" target="_self" title="The Object Forge">
<img id="imgobzdhh6t" src="../Images/TOFLogo.jpg" alt="Object Forge" width="118" height="58" border="0">
</a>
</div>
<div class="ExampleObject" style="position: absolute; left: 231px; top: 25px; width: 152px; height:14 px;">
<img id="imgobzdhh6v" src="../Images/pageSpacer.gif" alt="" width="152" height="14" border="0">
</div>
<div class="ExampleObject" style="position: absolute; left: 578px; top: 25px; width: 152px; height: 14px;">
<img id="imgobzdhh6x" src="../Images/pageSpacer.gif" alt="" width="152" height="14" border="0">
</div>
<div class="ExampleObject" style="position: absolute; left: 25px; top: 80px; width: 750px; height: 450px;">
<img id="imgobzdhh6t" src="../Images/watermark.jpg" alt="Object Forge" width="750" height="450" border="0">
</div>
<iframe border="0" frameborder="0" scrolling="no" name="bodyContentDownload" allowtransparency="true" src="Contents.htm"
style="visibility: visible; overflow: hidden; position: absolute; left: 10px; top: 57px; width: 800px; height: 560px;">
</iframe>
<div class="ExampleObject" style="background: none; position: absolute; left: 382px; top: 18px; width: 199px; height: 18px; font-size: 14px; color: #00478E; font-family: Verdana, sans-serif;">
<div class="ExamplePara" style="text-align: center;line-height: 17px; font-weight: bold;">
Javascript Backgound and Panels Example</div>
</div>
</div>
</body>
</html>
The source code for the renedered page (examplePage1.htm) is an example of a typical overlay page. Overlay pages are normal in all respects with the added requirement that their body must have its 'background-color' style property set to 'transparent' to indicate transparent rendering. You should also notice that the content of the page is wrapped in a <div>...</div> layer whose id is 'content'. LoadBody() changes the content of th IFRAME to indicate a new page is loading; the 'content' layer marks the boundaries of the block where this substitution will occur. The block normally spans the entire content of the page (as in the case below) but it is not a requirement.
<html>
<head>
<title>Javascript Example Page 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background-color: transparent">
<div id="content" style="overflow: auto; border: groove darkred 3px; background: none; position: absolute; left: 0px; top: 0px; width: 794px; height: 554px; visibility: visible">
<div class="ExampleObject" style="position: relative; top: 10px; left: 10px">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="100" height="22">
<param name=movie value="Source.swf">
<param name=quality value=high>
<param name="BGCOLOR" value="">
<embed src="Source.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="22" bgcolor="">
</embed>
</object> </div>
<div class="ExampleObject" style="position: relative; top: 10; left:0; font-size: 14px; color: #00478E; font-family: Verdana, sans-serif;">
<hr>
... Text and other elements go here ...
</div>
</div>
</body>
</html>
Clicking on the 'Rendered' button will take you back to the first page.