Hi,
I have written the DHTML file. It contents 1 layer (DIV) to handle mouse events:
1/ Click on the caption to move the layer.
2/ Click on the buttons to process specified works.
It works well with IE4 but has some problems with NS: the buttons are disappeared when moving. Please copy the code below and run on NS for more details.
<!--Code-->
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
document.writeln ("<STYLE TYPE=\"text/css\">"
;
document.writeln ("DIV {font-size:1pt}"
document.writeln (".Text {font-weight:Bold; font-size:10pt}"
document.writeln (".popper{position : absolute;visibility : hidden;z-index:110;}"
document.writeln("</STYLE>"
var skn = null;
</script>
</head>
<body bgcolor="#FFFFFF">
<DIV ID="topdeck" CLASS="popper" style="WIDTH:1px; HEIGHT:1px;" onMouseDown="mouseDown(event)"> </DIV>
<script language="JavaScript">
mStatus = 0;
oldX = 1;
oldY = 1;
newX = 1;
newY = 1;
sknX = 200;
sknY = 250;
var isIE = document.all? true: false;
function frameOnLoad(skn, doc){
EndDialog(skn, doc);
}
function mouseDown(e){
if(isIE){
var frame=window;
if(typeof frame!='object')return;
if (event.y - parseInt(skn.top) > 25) return;
oldX = frame.event.clientX + frame.document.body.scrollLeft;
oldY = frame.event.clientY + frame.document.body.scrollTop;
}else {
if (e.pageY - parseInt(skn.top) > 25) return;
oldX = e.pageX;
oldY = e.pageY;
}
mStatus = 1;
}
function mouseUp(e){
if (mStatus == 1){
EndDialog(skn, document);
}
}
function mouseMove(e){
var frame = window;
if(typeof frame != 'object')return;
var x = (!isIE) ? e.pageX : frame.event.clientX + frame.document.body.scrollLeft;
var y = (!isIE) ? e.pageY : frame.event.clientY + frame.document.body.scrollTop;
if( mStatus == 1){
skn.left = parseInt(skn.left) + x - oldX;
skn.top = parseInt(skn.top) + y - oldY;
sknX = parseInt(skn.left);
sknY = parseInt(skn.top);
oldX = x;
oldY = y;
}
newX = x;
newY = y;
}
function End(){
//parent.setEnableApplet(true);
alert("End!"
}
function Restart(){
//parent.setEnableApplet(true);
alert("Restart!"
}
function EndDialog(skn, doc) {
var strMsg = "You are at the en of the lesson. <br>Please choose the next action";
var strEndLesson = '<form name="form1" method="post" action="">\n'
+ '<table border="1" cellspacing="0" cellpadding="0">\n'
+ '<tr> <td>\n'
+ '<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC" width="295">\n'
+ '<tr> <td colspan="2" height="25" bgcolor="#3333FF"><font color="#FFFFFF">Test</font></td> </tr>\n'
+ '<tr> <td colspan="2" height="60" style="cursor:normal"> <p align="center">' + strMsg + '</p> </td> </tr>\n'
+ '<tr>\n'
+ '<td width="143" height="45" align="center"> <input type="button" name="RestartLesson" value="Restart Lesson" onclick="Restart()"> </td>\n'
+ '<td width="152" height="45" align="center"> <input type="button" name="EndLesson" value=" End Lesson " onclick="End()"> </td>\n'
+ '</tr>\n'
+ '</table>\n'
+ '</td> </tr>\n'
+ '</table>\n'
+ '</form>';
skn.left = sknX;
skn.top = sknY;
mStatus =0;
//alert("skn.left = " + skn.left + "skn.top = " + skn.top);
if (!isIE) {
//parent.setEnableApplet(false);
window.onfocus = false;
skn.document.write(strEndLesson);
skn.document.close();
skn.visibility = "visible";
}else {
//parent.setEnableApplet(false);
doc.all("topdeck".innerHTML = strEndLesson;
skn.visibility = "visible";
}
}
skn = (document.layers) ? document.topdeck : topdeck.style;
if (document.layers){
document.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
skn.document.captureEvents(Event.MOUSEDOWN);
skn.document.onmousedown=mouseDown;
}
else{
document.onselectstart=new Function("return false;"
}
document.onmouseup=mouseUp;
document.onmousemove = mouseMove;
setTimeout("EndDialog(skn, document)",1500);
</script>
</body>
</html>
Thanks for your support! Pls contact me via mail: tuyle@psv.com.vn
I have written the DHTML file. It contents 1 layer (DIV) to handle mouse events:
1/ Click on the caption to move the layer.
2/ Click on the buttons to process specified works.
It works well with IE4 but has some problems with NS: the buttons are disappeared when moving. Please copy the code below and run on NS for more details.
<!--Code-->
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
document.writeln ("<STYLE TYPE=\"text/css\">"
;document.writeln ("DIV {font-size:1pt}"
;document.writeln (".Text {font-weight:Bold; font-size:10pt}"
;document.writeln (".popper{position : absolute;visibility : hidden;z-index:110;}"
;document.writeln("</STYLE>"
;var skn = null;
</script>
</head>
<body bgcolor="#FFFFFF">
<DIV ID="topdeck" CLASS="popper" style="WIDTH:1px; HEIGHT:1px;" onMouseDown="mouseDown(event)"> </DIV>
<script language="JavaScript">
mStatus = 0;
oldX = 1;
oldY = 1;
newX = 1;
newY = 1;
sknX = 200;
sknY = 250;
var isIE = document.all? true: false;
function frameOnLoad(skn, doc){
EndDialog(skn, doc);
}
function mouseDown(e){
if(isIE){
var frame=window;
if(typeof frame!='object')return;
if (event.y - parseInt(skn.top) > 25) return;
oldX = frame.event.clientX + frame.document.body.scrollLeft;
oldY = frame.event.clientY + frame.document.body.scrollTop;
}else {
if (e.pageY - parseInt(skn.top) > 25) return;
oldX = e.pageX;
oldY = e.pageY;
}
mStatus = 1;
}
function mouseUp(e){
if (mStatus == 1){
EndDialog(skn, document);
}
}
function mouseMove(e){
var frame = window;
if(typeof frame != 'object')return;
var x = (!isIE) ? e.pageX : frame.event.clientX + frame.document.body.scrollLeft;
var y = (!isIE) ? e.pageY : frame.event.clientY + frame.document.body.scrollTop;
if( mStatus == 1){
skn.left = parseInt(skn.left) + x - oldX;
skn.top = parseInt(skn.top) + y - oldY;
sknX = parseInt(skn.left);
sknY = parseInt(skn.top);
oldX = x;
oldY = y;
}
newX = x;
newY = y;
}
function End(){
//parent.setEnableApplet(true);
alert("End!"
;}
function Restart(){
//parent.setEnableApplet(true);
alert("Restart!"
;}
function EndDialog(skn, doc) {
var strMsg = "You are at the en of the lesson. <br>Please choose the next action";
var strEndLesson = '<form name="form1" method="post" action="">\n'
+ '<table border="1" cellspacing="0" cellpadding="0">\n'
+ '<tr> <td>\n'
+ '<table border="0" cellspacing="0" cellpadding="0" bgcolor="#CCCCCC" width="295">\n'
+ '<tr> <td colspan="2" height="25" bgcolor="#3333FF"><font color="#FFFFFF">Test</font></td> </tr>\n'
+ '<tr> <td colspan="2" height="60" style="cursor:normal"> <p align="center">' + strMsg + '</p> </td> </tr>\n'
+ '<tr>\n'
+ '<td width="143" height="45" align="center"> <input type="button" name="RestartLesson" value="Restart Lesson" onclick="Restart()"> </td>\n'
+ '<td width="152" height="45" align="center"> <input type="button" name="EndLesson" value=" End Lesson " onclick="End()"> </td>\n'
+ '</tr>\n'
+ '</table>\n'
+ '</td> </tr>\n'
+ '</table>\n'
+ '</form>';
skn.left = sknX;
skn.top = sknY;
mStatus =0;
//alert("skn.left = " + skn.left + "skn.top = " + skn.top);
if (!isIE) {
//parent.setEnableApplet(false);
window.onfocus = false;
skn.document.write(strEndLesson);
skn.document.close();
skn.visibility = "visible";
}else {
//parent.setEnableApplet(false);
doc.all("topdeck"
.innerHTML = strEndLesson; skn.visibility = "visible";
}
}
skn = (document.layers) ? document.topdeck : topdeck.style;
if (document.layers){
document.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
skn.document.captureEvents(Event.MOUSEDOWN);
skn.document.onmousedown=mouseDown;
}
else{
document.onselectstart=new Function("return false;"
;}
document.onmouseup=mouseUp;
document.onmousemove = mouseMove;
setTimeout("EndDialog(skn, document)",1500);
</script>
</body>
</html>
Thanks for your support! Pls contact me via mail: tuyle@psv.com.vn