It can be moved around, resized, minimized and maximized.
What for? Eh, I was bored.
Here is some more text so that
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>slayeroffice | fake window</title>
<style type="text/css">
#windowContainer {
position:absolute;
top:10px;
left:10px;
background-color:#C0C0C0;
border-style:solid;
border-width:1px;
border-top-color:#E0E0E0;
border-left-color:#E0E0E0;
width:300px;
height:300px;
}
#windowContainerBorder1 {
position:absolute;
top:0px;
left:0px;
width:298px;
height:298px;
border-style:solid;
border-width:1px;
border-top-color:#FFFFFF;
border-left-color:#FFFFFF;
border-bottom-color:#808080;
border-right-color:#808080;
}
#windowTitle {
position:absolute;
top:3px;
left:3px;
width:292px;
height:18px;
background-color:#000080;
font-family:ms sans serif;
font-size:8pt;
padding-left:2px;
font-weight:bold;
color:#FFFFFF;
cursor:default;
vertical-align:middle;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#000080', EndColorStr='#96C8FF');
}
#controlBox {
position:absolute;
top:5px;
left:243px;
}
body {
background-color:#FFFFFF;
}
#contentArea {
position:absolute;
padding:5px;
top:23px;
left:3px;
width:282px;
height:250px;
background-color:#FFFFFF;
border-style:inset;
border-width:2px;
overflow:auto;
}
#resizeCapture {
position:absolute;
top:283px;
left:285px;
width:12px;
height:16px;
cursor:nw-resize;
background-image:url("resizeArea.gif");
}
</style>
<script language="javascript" type="text/javascript">
var WIN_HEIGHT = 300;
var WIN_WIDTH = 300;
var WIN_TITLE = "slayeroffice | fake window";
var WIN_TOP = 10;
var WIN_LEFT = 10;
var y,x;
var mDown = false;
var mResize = false;
var originalWidth = WIN_WIDTH;
var originalHeight = WIN_HEIGHT;
var originalTop = WIN_TOP;
var originalLeft = WIN_LEFT;
var isMaximized = false, isMinimized = false;
function init() {
if(document.all)document.body.style.height = "100%";
document.getElementById("windowContainer").style.height = WIN_HEIGHT;
document.getElementById("windowContainer").style.width = WIN_WIDTH;
document.getElementById("windowContainer").style.top = WIN_TOP;
document.getElementById("windowContainer").style.left = WIN_LEFT;
document.getElementById("windowTitle").innerHTML ="<img align=middle src=\"icon.gif\"> " + WIN_TITLE;
// event handlers
if(!document.all)document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);
document.onmousedown=handleMouseDownEvents;
document.onmousemove=handleMouseMoveEvents
document.onmouseup=handleMouseUpEvents;
document.getElementById("windowTitle").onmouseup = windowTitleMouseUp
document.getElementById("windowTitle").onmousedown = windowTitleMouseDown;
document.getElementById("resizeCapture").onmousedown = resizeCaptureOnMouseDown;
}
function resizeCaptureOnMouseDown(e) {
mResize=true;
captureClientXY(e);
}
function windowTitleMouseUp() {
mDown = false;
}
function windowTitleMouseDown(e) {
mDown=true;
captureOffsetXY(e);
}
function initDrag(e) {
if(!mDown)return;
if(document.all) {
x2 = window.event.clientX-(x+5);
y2 = window.event.clientY-(y+5);
} else {
x2 = e.clientX - (x+5);
y2 = e.clientY - (y+5);
}
document.getElementById("windowContainer").style.top = y2 + "px";
document.getElementById("windowContainer").style.left = x2 + "px";
originalLeft = x2;
originalTop = y2;
}
function doResize(nX,nY) {
nWidth = nX - x;
nHeight = nY- y;
cWidth = originalWidth; cHeight = originalHeight;
cWidth+=nWidth; cHeight+=nHeight;
if(cWidth<=75 || cHeight <= 75) return;
document.getElementById("windowContainer").style.width = cWidth + "px";
document.getElementById("windowContainer").style.height = cHeight + "px";
//resize/move children
document.getElementById("windowTitle").style.width = (cWidth -8) + "px";
document.getElementById("windowContainerBorder1").style.width = (cWidth - 2) + "px";
document.getElementById("windowContainerBorder1").style.height = (cHeight-2) + "px";
document.getElementById("contentArea").style.width = (cWidth-18) + "px";
document.getElementById("contentArea").style.height = (cHeight-50) + "px";
document.getElementById("resizeCapture").style.top = (cHeight-17) + "px";
document.getElementById("resizeCapture").style.left = (cWidth-13) + "px";
document.getElementById("controlBox").style.left = (cWidth - 57) + "px";
}
function handleMouseUpEvents() {
if(mDown) {
mDown=false;
return;
}
if(mResize) {
mResize=false;
document.body.style.cursor = "default";
originalWidth = parseInt(document.getElementById("windowContainer").style.width);
originalHeight = parseInt(document.getElementById("windowContainer").style.height);
}
}
function doClose() {
document.getElementById("windowContainer").style.display = "none";
}
function doMinimize() {
if(!isMinimized) {
markCoordinates();
document.getElementById("windowContainer").style.height = 24 + "px";
minTop = document.all?document.body.clientHeight:window.innerHeight;
document.getElementById("windowContainer").style.top = (minTop-25) + "px";
document.getElementById("contentArea").style.display = "none";
document.getElementById("windowContainerBorder1").style.display = "none";
document.getElementById("resizeCapture").style.display = "none";
isMinimized = true;
} else {
document.getElementById("windowContainer").style.top = originalTop + "px";
document.getElementById("windowContainer").style.left = originalLeft + "px";
document.getElementById("windowContainer").style.height = originalHeight + "px";
document.getElementById("contentArea").style.display = "block";
document.getElementById("windowContainerBorder1").style.display = "block";
document.getElementById("resizeCapture").style.display = "block";
isMinimized = false;
}
}
function doMaximize() {
x=0;y=0;
if(!isMaximized) {
markCoordinates();
document.getElementById("windowContainer").style.top = 0;
document.getElementById("windowContainer").style.left = 0;
doResize(screen.width - originalWidth,screen.height - originalHeight);
document.getElementById("contentArea").style.display = "block";
document.getElementById("windowContainerBorder1").style.display = "block";
document.getElementById("resizeCapture").style.display = "block";
isMaximized = true;
} else {
doResize(0,0);
isMaximized = false;
document.getElementById("windowContainer").style.top = originalTop + "px";
document.getElementById("windowContainer").style.left = originalLeft + "px";
}
}
function handleMouseDownEvents(e) {
if(mResize) {
document.body.style.cursor = "nw-resize";
}
}
function markCoordinates() {
originalLeft = parseInt(document.getElementById("windowContainer").style.left);
originalTop = parseInt(document.getElementById("windowContainer").style.top);
}
function handleMouseMoveEvents(e) {
if(mDown) {
initDrag(e);
return;
}
if(mResize) {
if(document.all) {
doResize(window.event.clientX,window.event.clientY);
} else {
doResize(e.clientX,e.clientY);
}
}
}
function captureOffsetXY(e) {
if(document.all) {
x=window.event.offsetX;
y=window.event.offsetY
} else {
x = e.pageX - e.clientX;
y = e.pageY - e.clientY;
}
}
function captureClientXY(e) {
if(document.all) {
x = window.event.clientX;
y = window.event.clientY;
} else {
x = e.clientX;
y = e.clientY;
}
}
</script>
<map name="ctrlBox">
<area alt="Minimize" title="Minimize" coords="1,0,16,15" href="javascript:doMinimize();">
<area alt="Maximize" title="Maximize" coords="16,0,34,16" href="javascript:doMaximize();">
<area alt="Close" title="Close" coords="33,0,53,16" href="javascript:doClose();"">
</map>
</head>
<body onload="init();">
<div id="windowContainer" unselectable=on>
<div id="windowContainerBorder1"></div>
<div onSelect="return false" id="windowTitle"></div>
<div id="controlBox"><img src="control_box.gif" width="52" height="15" border="0" usemap="#ctrlBox" /></div>
<div id="contentArea">
<h1>Fake Window</h1>
This window is done completely with CSS/Javascript and it behaves more or less like a normal window.
<p>
It can be moved around, resized, minimized and maximized.
</p>
<p>
What for? Eh, I was bored.
</p>
Here is some more text so that<br /> the scroll bar for the content div will appear...blah blah blah.
</div>
<div id="resizeCapture"></div>
</div>
</body>
</html>
