Example
Keywords: javascript, DHTML, Div, layer, mobile
This article provides a layer that can be dragged by the mouse by using the javascript+dhtml script to display in IE browser. This layer can be automatically scrolled or closed, just like my z-tips:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<script language=javascript>
Bigin Fly Bar
var biscatchflybar = false;
var Dragclickx = 0;
var dragclicky = 0;
function Hideflybar () {
divFlyBar.style.visibility = "hidden";
MyFlyBarRestorButton.style.display = ';
}
function Openflybar () {
Myload_flybar ();
divFlyBar.style.visibility = "visible";
MyFlyBarRestorButton.style.display = "None";
}
function Catchflybar (e) {
Biscatchflybar = true;
var x=event.x+document.body.scrollleft;
var y=event.y+document.body.scrolltop;
Dragclickx=x-divflybar.style.pixelleft;
Dragclicky=y-divflybar.style.pixeltop;
Divflybar.setcapture ();
Document.onmousemove = Moveflybar;
}
function Releaseflybar (e) {
Biscatchflybar = false;
Divflybar.releasecapture ();
Document.onmousemove = null;
}
function Moveflybar (e) {
if (Biscatchflybar) {
DivFlyBar.style.left = Event.x+document.body.scrollleft-dragclickx;
DivFlyBar.style.top = Event.y+document.body.scrolltop-dragclicky;
}
}
function Myload_flybar () {
Divflybar.style.top=document.body.scrolltop;
Divflybar.style.left=document.body.offsetwidth-divflybar.clientwidth-30+document.body.scrollleft;
}
Window.onresize = Myload_flybar;
Window.onscroll = Myload_flybar;
Window.onload = Openflybar;
End Fly Bar
</script>
</HEAD>
<BODY>
<div id=divflybar style= ' position:absolute;top:0;left:1;visibility:hidden;cursor:move;z-index:100 ' >
<table style= "Filter:alpha (opacity=90) Background-color: #9A9A9A;" width=192 border= "0" cellspacing= "1" cellpadding= "0" ><tr><td><table width=100% border=0 cellpadding=0 cellspacing=0><tr valign= Middle style= "Background-color: #212121;" ><td> </TD><TD style= "Font-size:12px;color: #F4F4F4; font-weight:bold" width=100% align=left> Z-Tips</td ><TD align=right valign=top></td></tr></table ></td></tr>
<tr id=flytailertr name=flytailertr><td id=flytailerholder name=flytailerholder style= ' background-color:# Eeeeee;color:black;font-weight:bold;font-size:12px;font-family:courier New; ' align=center>
Place the things you want to put in here <br>
Place the things you want to put in here <br>
Place the things you want to put in here <br>
Place the things you want to put in here <br>
Place the things you want to put in here <br>
</td></tr>
</table>
</div>
<div Id=myflybarrestorbutton Name=myflybarrestorbutton align=center valign=middle><input Type=button ' ▲ show ▲ ' Onclick=javascript:openflybar () ></div>
</BODY>
</HTML>