Super cool floating window inside the page

Floating | Floating Window | page <title>_xWin</title>
<style type= ' text/css ' >
<!--
A:visited{text-decoration:none;color:slategray;}
A:hover{text-decoration:underline;color:slategray;}
A:link{text-decoration:none;color:slategray;}
-->
</style>
<script language=jscript>
<!--
Can be packaged as JS file;
var x0=0,y0=0,x1=0,y1=0;
var offx=6,offy=6;
var Moveable=false;
var hover= ' Orange ', normal= ' slategray ';//color;
var Index=10000;//z-index;
Start dragging;
function StartDrag (obj)
{
if (event.button==1)
{
Lock the title bar;
Obj.setcapture ();
Define the object;
var win = Obj.parentnode;
var sha = win.nextsibling;
Record mouse and layer position;
x0 = Event.clientx;
y0 = Event.clienty;
X1 = parseint (win.style.left);
Y1 = parseint (win.style.top);
Record color;
normal = Obj.style.backgroundColor;
Change style;
Obj.style.backgroundColor = hover;
Win.style.borderColor = hover;
Obj.nextSibling.style.color = hover;
Sha.style.left = x1 + offx;
Sha.style.top = y1 + offy;
moveable = true;
}
}
Drag
function drag (obj)
{
if (moveable)
{
var win = Obj.parentnode;
var sha = win.nextsibling;
Win.style.left = x1 + event.clientx-x0;
Win.style.top = y1 + event.clienty-y0;
Sha.style.left = parseint (win.style.left) + offx;
Sha.style.top = parseint (win.style.top) + offy;
}
}
Stop dragging;
function Stopdrag (obj)
{
if (moveable)
{
var win = Obj.parentnode;
var sha = win.nextsibling;
var msg = obj.nextsibling;
Win.style.borderColor = normal;
Obj.style.backgroundColor = normal;
Msg.style.color = normal;
Sha.style.left = Obj.parentNode.style.left;
Sha.style.top = Obj.parentNode.style.top;
Obj.releasecapture ();
moveable = false;
}
}
Get focus;
function GetFocus (obj)
{
if (Obj.style.zindex!=index)
{
index = index + 2;
var idx = index;
Obj.style.zindex=idx;
Obj.nextsibling.style.zindex=idx-1;
}
}
minimized;
function min (obj)
{
var win = Obj.parentNode.parentNode;
var sha = win.nextsibling;
var tit = Obj.parentnode;
var msg = tit.nextsibling;
var flg = msg.style.display== "None";
if (FLG)
{
Win.style.height = parseint (msg.style.height) + parseint (tit.style.height) + 2*2;
Sha.style.height = Win.style.height;
Msg.style.display = "block";
obj.innerhtml = "0";
}
Else
{
Win.style.height = parseint (tit.style.height) + 2*2;
Sha.style.height = Win.style.height;
obj.innerhtml = "2";
Msg.style.display = "None";
}
}
Close
function cls (obj)
{
var win = Obj.parentNode.parentNode;
var sha = win.nextsibling;
win.style.visibility = "hidden";
sha.style.visibility = "hidden";
}
Create an object;
function Xwin (id,w,h,l,t,tit,msg)
{
index = index+2;
This.id = ID;
This.width = W;
This.height = h;
This.left = l;
This.top = t;
This.zindex = index;
This.title = tit;
This.message = msg;
This.obj = null;
This.bulid = Bulid;
This.bulid ();
}
Class
function Bulid ()
{
var str = ""
+ "<div id=xmsg" + this.id + ""
+ "Style= '"
+ "Z-index:" + This.zindex + ";"
+ "width:" + this.width + ";"
+ "Height:" + this.height + ";"
+ "Left:" + This.left + ";"
+ "Top:" + This.top + ";"
+ "Background-color:" + normal + ";"
+ "COLOR:" + normal + ";"
+ "font-size:10px;"
+ "Font-family:verdana;"
+ "Position:absolute;"
+ "Cursor:default;"
+ "border:2px solid" + normal + ";"
+ "' "
+ ">"
+ "<div"
+ "Style= '"
+ "Background-color:" + normal + ";"
+ "width:" + (this.width-2*2) + ";"
+ "HEIGHT:20;"
+ "Color:white;"
+ "' "
+ " "
+ " "
+ "onmousemove= ' drag" (This) ' "
+ "ondblclick= ' min (this.childnodes[1]) '"
+ ">"
+ "<span style= ' width:" + (this.width-2*12-4) + ";p adding-left:3px; ' > "+ this.title + </span>"
+ "<span style= ' width:12;border-width:0px;color:white;font-family:webdings"; ' >0</span> '
+ "<span style= ' width:12;border-width:0px;color:white;font-family:webdings"; ' >r</span> '
+ "</div>"
+ "<div style= '"
+ "width:100%;"
+ "Height:" + (this.height-20-4) + ";"
+ "Background-color:white;"
+ "LINE-HEIGHT:14PX;"
+ "Word-break:break-all;"
+ "PADDING:3PX;"
+ "' >" + this.message + "</div>"
+ "</div>"
+ "<div style= '"
+ "width:" + this.width + ";"
+ "Height:" + this.height + ";"
+ "Top:" + This.top + ";"
+ "Left:" + This.left + ";"
+ "Z-index:" + (this.zindex-1) + ";"
+ "Position:absolute;"
+ "Background-color:black;"
+ "Filter:alpha (opacity=40);"
+ "' >by wildwind</div>";
Document.body.insertAdjacentHTML ("BeforeEnd", str);
}
-->
</script>

<script language= ' JScript ' >
<!--
Function Initialize ()
{
var a = new Xwin ("1", 160,200,200,200, "message", "Xwin <br> a cool Pop Div window<br>version:1.0<br>2002 -8-13 ");
var B = new Xwin ("2", 240,200,100,100, "Wildwind ' Msgbox", "Welcome to visited my personal website:<br><a P://www.webjx.com/target=_blank>http://www.webjx.com</a><br>and u can also sign my guestbook at:<br ><a Href=http://www.webjx.com/gbook target=_blank>http://www.webjx.com/gbook</a><br><br >THX!!! =)...");
var c = new Xwin ("3", 200,160,250,50, "copyright", "Copyright by <a href= ' mailto:web@webjx.com ' >Wildwind</a> !");
}
Window.onload = Initialize;
-->
</script>
<body onselectstart= ' return false ' oncontextmenu= ' return false ' scroll= ' no ' >
</body>

Microsoft-style Buttons

<style>

. button2
{
border-right:1px solid buttonhighlight;
border-left:1px solid Buttonshadow;
border-bottom:1px solid buttonhighlight;
BORDER-TOP:1PX Solid Buttonshadow
}

Td
{
Cursor:hand; font-size:9pt; Font-family: Song body; Text-align:center; Text-valign:middle
}

. Handin
{
height:18px;
width:2px;
border-left:1px solid Buttonshadow;
BORDER-RIGHT:1PX Solid Buttonhighlight
}

. Handout
{
height:18px;
width:2px;
border-left:1px solid buttonhighlight;
border-right:1px solid Buttonshadow;
}
. into
{
width:100%;
border-right:1px solid buttonhighlight;
border-left:1px solid Buttonshadow;
border-bottom:1px solid buttonhighlight;
BORDER-TOP:1PX Solid Buttonshadow
}

. outto,.button1
{
Background-color:buttonface;
Background-repeat:repeat;
Background-attachment:scroll;
border-left:1px solid buttonhighlight;
border-right:1px solid Buttonshadow;
border-top:1px solid buttonhighlight;
border-bottom:1px solid Buttonshadow;
background-position:0% "
}

. button0
{

}

</style>

<body topmargin= "0" leftmargin= "0" bgcolor= "#E0E0E0" >
<script>
function Change_button (num)
{
if (event.srcelement.tagname== "TD" &&event.srcelement.value== "button")
Event.srcElement.className = "button" +num;
}
</script>

<div class= "into" style= "width:100%; Height:25 ">
<table class= "Outto" border= "0" width= "100%" height= "a" cellspacing= "1" >
<tr>
<TD width= "1%" height= "><span class=" ></span></td>
<TD width= "9%" height= "button" > button value=
<TD width= "1%" height= "><span class=" ></span></td>
<TD width= "9%" height= "button" > button value=
<TD width= "1%" height= "><span class=" ></span></td>
<TD width= "9%" height= "button" > button value=
<TD width= "1%" height= "><span class=" ></span></td>
<TD width= "69%" height= "></td>"
</tr>
</table>

</div>

</body>

<ptml><pead><title>_xwin</title><style type= ' text/css ' ><!--a:visited{ Text-decoration:none;color:slategray;} A:hover{text-decoration:underline;color:slategray;} A:link{text-decoration:none;color:slategray;} --></style><script language=jscript><!--//Can be packaged as JS file; var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6; var moveable=false;var hover= ' Orange ', normal= ' Slategray ';//color;var index=10000;//z-index;//start dragging; function StartDrag (obj) {if (event.button==1) {//Lock title bar; Obj.setcapture (); Define the object; var win = Obj.parentnode; var sha = win.nextsibling; Record mouse and layer position; x0 = Event.clientx; y0 = Event.clienty; X1 = parseint (win.style.left); Y1 = parseint (win.style.top); Record color; normal = Obj.style.backgroundColor; Change style; Obj.style.backgroundColor = hover; Win.style.borderColor = hover; Obj.nextSibling.style.color = hover; Sha.style.left = x1 + offx; Sha.style.top = y1 + offy; moveable = true; }}//drag; function drag (obj) {if (moveable) {var win = OBJ.PARentnode; var sha = win.nextsibling; Win.style.left = x1 + event.clientx-x0; Win.style.top = y1 + event.clienty-y0; Sha.style.left = parseint (win.style.left) + offx; Sha.style.top = parseint (win.style.top) + offy; }}//stops dragging; function Stopdrag (obj) {if (moveable) {var win = Obj.parentnode; var sha = win.nextsibling; var msg = obj.nextsibling; Win.style.borderColor = normal; Obj.style.backgroundColor = normal; Msg.style.color = normal; Sha.style.left = Obj.parentNode.style.left; Sha.style.top = Obj.parentNode.style.top; Obj.releasecapture (); moveable = false; }}//gets focus; function GetFocus (obj) {if (obj.style.zindex!=index) {index = index + 2; var idx = index; Obj.style.zindex=idx; Obj.nextsibling.style.zindex=idx-1; }}//minimization; function min (obj) {var win = Obj.parentNode.parentNode; var sha = win.nextsibling; var tit = Obj.parentnode; var m sg = tit.nextsibling; var flg = msg.style.display== "None"; if (FLG) {win.style.height = parseint (msg.style.height) +parseint (tit.style.height) + 2*2; Sha.style.height = Win.style.height; Msg.style.display = "block"; obj.innerhtml = "0"; else {win.style.height = parseint (tit.style.height) + 2*2; Sha.style.height = Win.style.height; obj.innerhtml = "2"; Msg.style.display = "None"; }}//shutdown; function cls (obj) {var win = Obj.parentNode.parentNode; var sha = win.nextsibling; win.style.visibility = "hidden"; sha.style.visibility = "hidden";} Create an object; function Xwin (id,w,h,l,t,tit,msg) {index = index+2; this.id = id; this.width = w; this.height = h; this.l EFT = l; This.top = t; This.zindex = index; This.title = tit; This.message = msg; This.obj = null; This.bulid = Bulid; This.bulid ();} initialization, function bulid () {var str = "" + "<div id=xmsg" + this.id + "" + "style=" "+" Z-index: "+ This.zindex +"; " + "width:" + this.width + ";" + "Height:" + this.height + ";" + "Left:" + This.left + ";" + "Top:" + This.top + ";" + "Background-color:" + normal + ";" + "COLOR:" + NOrmal + ";" + "font-size:10px;" + "Font-family:verdana;" + "Position:absolute;" + "Cursor:default;" + "border:2px solid" + normal + ";" + "'" + ">" + "<div" + "style= '" + "Background-color:" + normal + ";" + "width:" + (this.width-2*2) + ";" + "HEIGHT:20;" + "Color:white;" + "' +" "+" "+" onmousemove= ' drag (This) ' "+" ondblclick= ' min (this.childnodes[1]) ' "+" > "+" <spa n style= ' width: + (this.width-2*12-4) + ";p adding-left:3px; > "+ this.title +" </span> "+" <span style= ' width:12;border-width:0px;color:white;font-family:webdings; Gt;0</span> "+" <span style= ' width:12;border-width:0px;color:white;font-family:webdings; ' >r</span > "+" </div> "+" <div style= ' "+" width:100%; " + "Height:" + (this.height-20-4) + ";" + "Background-color:white;" + "LINE-HEIGHT:14PX;" + "Word-break:break-all;" + "PADDING:3PX;" + "' >" + this.message + "</div>" + "</div>" + "<div style= '" + "width:" + this.width + ";" + "Height:" + this.height + ";" + "Top:" + This.top + ";" + "Left:" + This.left + ";" + "Z-index:" + (this.zindex-1) + ";" + "Position:absolute;" + "Background-color:black;" + "Filter:alpha (opacity=40);" + "' >by wildwind</div>"; Document.body.insertAdjacentHTML ("BeforeEnd", str); --></script><script language= ' JScript ' ><!--function Initialize () {var a = new Xwin ("1") 160,200,200,200, "message", "Xwin <br> A cool Pop Div window<br>version:1.0<br>2005-7-12"); var B = new Xwin ("2", 240,200,100,100, "Wildwind ' Msgbox", "Welcome to visited my personal website:<br><a P://www.webjx.com/target=_blank>http://www.webjx.com</a><br>and u can also sign my guestbook at:<br ><a HREF=HTTP://WWW.WEBJX.COM/TARGET=_BLANK&GT;HTTP://WWW.WEBJX.COM&LT;/A&GT;&LT;BR&GT;&LT;BR&GT;THX!!! =)..."); var c = new Xwin ("3", 200,160,250,50, "copyright", "Copyright by <a href= ' maIlto:web@webjx.com ' >wildwind</a>! ');} window.onload = Initialize;//--></script></pead><body onselectstart= ' return false ' oncontextmenu= ' Return false ' scroll= ' no ' ></body></ptml> Microsoft-style button <ptml> <pead> <style>. button2 { border-right:1px solid buttonhighlight; border-left:1px solid Buttonshadow; border-bottom:1px solid buttonhighlight; border-top:1px Solid Buttonshadow} TD {cursor:hand; font-size:9pt; font-family: Song Dynasty; text-align:center; text-valign:m Iddle}. Handin {height:18px; width:2px; border-left:1px solid buttonshadow; border-right:1px solid buttonhighlight}. Ha ndout {height:18px; width:2px border-left:1px solid buttonhighlight; border-right:1px solid Buttonshadow}. into {Widt h:100%; border-right:1px solid buttonhighlight; border-left:1px solid Buttonshadow; border-bottom:1px solid buttonhighlight; border-top:1px solid Buttonshadow}. outto,.button1 {background-color:buttonface; background-repeat:repeat; backgrOund-attachment:scroll; border-left:1px solid buttonhighlight; border-right:1px solid Buttonshadow; border-top:1px solid buttonhighlight; border-bottom:1px solid Buttonshadow; background-position:0% "}. Button0 {} </style> </pead> <body topmargin=" 0 "leftmargin=" 0 "bgcolor=" #E0E0 E0 ' > <script> function Change_button (num) {if (event.srcelement.tagname== "TD" && event.srcelement.value== "button") event.srcElement.className = "button" +num; } </script> <div class= "into" style= "width:100%; Height:25 "> <table class=" outto "border=" 0 "width=" 100% "height=" "cellspacing=" 1 "> <tr> <td Widt H= "1%" height= "><span class=" Handout "></span></td> <td width=" 9% "height=" "value=" Button "> button td</td> <td width=" 1% "height=" "><span class=" Handin "></span></td> &LT;TD width= "9%" height= "value=" button > button td</td> <td width= "1%" height= "><span class=" Handin "></span></td> <td width= "9%" height= "" value= "button" > button td</td> <td "width=" height = "" ><span class= "Handin" ></span></td> <td width= "69%" height= "></td> </tr" > </table> </div> </body> </ptml>