<script type="text/javascript">
//<![CDATA[
function getWidth(/* Object */ el, /* boolean */ includePadding, /* boolean */ includeBorder) {
var width;
el = (typeof(el) == "string") ? document.getElementById(el) : el;
if(window.getComputedStyle) { // FF, Safari, Opera
var style = document.defaultView.getComputedStyle(el, null);
if(style.getPropertyValue("display") == "none")
return 0;
width = parseInt(style.getPropertyValue("width"));
if(navigator.userAgent.toLowerCase().indexOf("opera") != -1) {
// opera includes the padding and border when reporting the width/height - subtract that out
width -= parseInt(style.getPropertyValue("padding-left"));
width -= parseInt(style.getPropertyValue("padding-right"));
width -= parseInt(style.getPropertyValue("border-left-width"));
width -= parseInt(style.getPropertyValue("border-right-width"));
}
if(includePadding) {
width += parseInt(style.getPropertyValue("padding-left"));
width += parseInt(style.getPropertyValue("padding-right"));
}
if(includeBorder) {
width += parseInt(style.getPropertyValue("border-left-width"));
width += parseInt(style.getPropertyValue("border-right-width"));
}
} else { // IE
if(el.currentStyle["display"] == "none")
return 0;
var widthCSS = el.currentStyle["width"];
var bRegex = /thin|medium|thick/; // regex for css border width keywords
width = el.offsetWidth; // currently the width including padding + border
if(!includeBorder) {
var borderLeftCSS = el.currentStyle["borderLeftWidth"];
var borderRightCSS = el.currentStyle["borderRightWidth"];
var temp = document.createElement("DIV");
if(!bRegex.test(borderLeftCSS)) {
temp.style.width = borderLeftCSS;
el.parentNode.appendChild(temp);
width -= Math.round(temp.offsetWidth);
el.parentNode.removeChild(temp);
} else if(bRegex.test(borderLeftCSS)) {
if(el.offsetWidth > el.clientWidth && el.currentStyle["borderLeftStyle"] != "none") {
temp.style.width = "10px";
temp.style.border = borderLeftCSS + " " + el.currentStyle["borderLeftStyle"] + " #000000";
el.parentNode.appendChild(temp);
width -= Math.round((temp.offsetWidth-10)/2);
el.parentNode.removeChild(temp);
}
}
if(!bRegex.test(borderRightCSS)) {
temp.style.width = borderRightCSS;
el.parentNode.appendChild(temp);
width -= Math.round(temp.offsetWidth);
el.parentNode.removeChild(temp);
} else if(bRegex.test(borderRightCSS)) {
if(el.offsetWidth > el.clientWidth && el.currentStyle["borderRightStyle"] != "none") {
temp.style.width = "10px";
temp.style.border = borderRightCSS + " " + el.currentStyle["borderRightStyle"] + " #000000";
el.parentNode.appendChild(temp);
width -= Math.round((temp.offsetWidth-10)/2);
el.parentNode.removeChild(temp);
}
}
}
if(!includePadding) {
var paddingLeftCSS = el.currentStyle["paddingLeft"];
var paddingRightCSS = el.currentStyle["paddingRight"];
var temp = document.createElement("DIV");
temp.style.width = paddingLeftCSS;
el.parentNode.appendChild(temp);
width -= Math.round(temp.offsetWidth);
temp.style.width = paddingRightCSS;
width -= Math.round(temp.offsetWidth);
el.parentNode.removeChild(temp);
}
}
return width;
}
function getHeight(/* Object */ el, /* boolean */ includePadding, /* boolean */ includeBorder) {
var height;
el = (typeof(el) == "string") ? document.getElementById(el) : el;
if(window.getComputedStyle) { // FF, Safari, Opera
var style = document.defaultView.getComputedStyle(el, null);
if(style.getPropertyValue("display") == "none")
return 0;
height = parseInt(style.getPropertyValue("height"));
if(navigator.userAgent.toLowerCase().indexOf("opera") != -1) {
// opera includes the padding and border when reporting the width/height - subtract that out
height -= parseInt(style.getPropertyValue("padding-top"));
height -= parseInt(style.getPropertyValue("padding-bottom"));
height -= parseInt(style.getPropertyValue("border-top-width"));
height -= parseInt(style.getPropertyValue("border-bottom-width"));
}
if(includePadding) {
height += parseInt(style.getPropertyValue("padding-top"));
height += parseInt(style.getPropertyValue("padding-bottom"));
}
if(includeBorder) {
height += parseInt(style.getPropertyValue("border-top-width"));
height += parseInt(style.getPropertyValue("border-bottom-width"));
}
} else { // IE
if(el.currentStyle["display"] == "none")
return 0;
var heightCSS = el.currentStyle["height"];
var bRegex = /thin|medium|thick/; // regex for css border width keywords
height = el.offsetHeight; // currently the height including padding + border
if(!includeBorder) {
var borderTopCSS = el.currentStyle["borderTopWidth"];
var borderBottomCSS = el.currentStyle["borderBottomWidth"];
var temp = document.createElement("DIV");
if(!bRegex.test(borderTopCSS)) {
temp.style.width = borderTopCSS;
el.parentNode.appendChild(temp);
height -= Math.round(temp.offsetWidth);
el.parentNode.removeChild(temp);
} else if(bRegex.test(borderTopCSS)) {
if(el.offsetHeight > el.clientHeight && el.currentStyle["borderTopStyle"] != "none") {
temp.style.width = "10px";
temp.style.border = borderTopCSS + " " + el.currentStyle["borderTopStyle"] + " #000000";
el.parentNode.appendChild(temp);
height -= Math.round((temp.offsetWidth-10)/2);
el.parentNode.removeChild(temp);
}
}
if(!bRegex.test(borderBottomCSS)) {
temp.style.width = borderBottomCSS;
el.parentNode.appendChild(temp);
height -= Math.round(temp.offsetWidth);
el.parentNode.removeChild(temp);
} else if(bRegex.test(borderBottomCSS)) {
if(el.offsetHeight > el.clientHeight && el.currentStyle["borderBottomStyle"] != "none") {
temp.style.width = "10px";
temp.style.border = borderBottomCSS + " " + el.currentStyle["borderBottomStyle"] + " #000000";
el.parentNode.appendChild(temp);
height -= Math.round((temp.offsetWidth-10)/2);
el.parentNode.removeChild(temp);
}
}
}
if(!includePadding) {
var paddingTopCSS = el.currentStyle["paddingTop"];
var paddingBottomCSS = el.currentStyle["paddingBottom"];
var temp = document.createElement("DIV");
temp.style.width = paddingTopCSS;
el.parentNode.appendChild(temp);
height -= Math.round(temp.offsetWidth);
temp.style.width = paddingBottomCSS;
height -= Math.round(temp.offsetWidth);
el.parentNode.removeChild(temp);
}
}
return height;
}
function ShowWindowAndInnerWindow(nameOfWindow,nameOfInnerW indow)
{
var panel = document.getElementById(nameOfWindow);
//**Originally I had set the panel to be hidden while I dealt with moving the message box to the middle of the screen... see **comment continuation at the bottom.
//panel.style.visibility = 'hidden';
//Here I set the panel to have a display of 'block' because if the panel has a display of 'none' you cannot get the clientWidth or offsetWidth values
panel.style.display = 'block';
//I make sure that the panel is positioned absolute
panel.position = 'absolute';
//This inner stuff, just ignore...
var innerPanel = document.getElementById(nameOfInnerWindow);
innerPanel.style.display = 'block';
var widthOfPanel = getWidth(panel, true, true);
var heightOfPanel = getHeight(panel, true, true);
// for testing
alert("getWidth(panel, true, true): " + getWidth(panel, true, true) + " \n getHeight(panel, true, true): " + getHeight(panel, true, true));
/*
//determining how far from the left and the top that the browser should be drawn at in order to center it.
var left = Number(BrowserWidth())/2 - (widthOfPanel/2);
var top = Number(BrowserHeight())/2 - (heightOfPanel/2);
//Centering
if(document.documentElement)
{
var topOffset = document.documentElement.scrollTop + top;
var leftOffset = document.documentElement.scrollLeft + left;
panel.style.top = topOffset + "px";
panel.style.left = leftOffset + "px";
}
else if(document.body)
{
var topOffset = document.body.scrollTop + top;
var leftOffset = document.body.scrollLeft + left;
panel.style.top = topOffset + "px";
panel.style.left = leftOffset + "px";
}
else
{
}
//** comment continued from the above ** comment
//**Apparently when you set the panel to visibility of "hidden" then set it back to "visible", my buttons don't appear until I drag the message box
//panel.style.visibility = 'visible';
return false;
*/
}
//]]>
</script>[/javascript]
[code=html]
</head>
<body>
