Monday, August 07, 2006

HTML STYLE: Menu or Layer will orverlapping Form Element

This will dynamic create a new iframe to cover the 'div'. So Form object won't be in the front.


<div id="DivReviewPurpose" style="position:absolute;display:none;z-index:104;
background-color:white;border:solid 1px gray;
border-style:double; z-index:100;">
<table border="0" cellpadding="2" cellspacing="0" bordercolor="#111111" >
&amp;lttr><td>
&ltcenter><b>&ltu>Purpose
Provide
objective criteria for employee performance evaluations on a standard basis
within our company;


<tr>&lttd align="center"><div id="closeButtonPurpose">&ltbr>
<a href="JavaScript:showDiv('DivReviewPurpose', false);">
Close Window


In Script

function showDiv(sDivID, bState, tableWidth, tableHeight, p) {
var oDiv = document.getElementById(sDivID);
/*@cc_on @if (@_jscript_version >= 5)
try {
var oIframe = document.getElementById('HelpFrame');
oIframe.scrolling = 'no';
} catch (e) {
var oIframe = document.createElement('iframe');
var oParent = oDiv.parentNode;
oIframe.id = 'HelpFrame'; oParent.appendChild(oIframe);
}
oIframe.frameborder = 0;
oIframe.style.position = 'absolute';
oIframe.style.top = 0;
oIframe.style.left = 0;
oIframe.style.display = 'none'; @end @*/
if (bState) {
//oDiv.style.margin = "0px";
//oDiv.style.padding = "0px";
oDiv.style.width = tableWidth + "px";
oDiv.style.height = tableHeight + "px";

oDiv.style.top = p.y + "px";
oDiv.style.left = p.x + "px";
oDiv.style.display = 'block';
/*@cc_on @if (@_jscript_version >= 5)
oIframe.style.top = oDiv.style.top;
oIframe.style.left = oDiv.style.left;
oIframe.style.zIndex = oDiv.style.zIndex - 1;
oIframe.style.width = parseInt(oDiv.offsetWidth);
oIframe.style.height = parseInt(oDiv.offsetHeight);
oIframe.style.display = 'block'; @end @*/
} else {
/*@cc_on @if (@_jscript_version >= 5)
oIframe.style.display = 'none'; @end @*/
oDiv.style.display = 'none'; }
} //