I
info
In the page below, you can reveal div elements. Once revealed, a you
can click a button to move the element, it becomes 'stuck' to the
pointer, and click the button again to leave the element where it is.
This behavior works as expected in current versions of Firefox and
Netscape.
On IE, the button to move seems to do nothing. The onclick event
fires, but then does not more. What do I need to add or find out about
to get this working similarly in IE? Thanks in advance.
The out and capture div elements are intended to show processes for
testing. Yes, I made up the "Latin"--I don't know any.
-- Kyle
<html>
<head>
<script type="text/javascript">
<!--
//
var top = 0;
var left = 0;
if( navigator.appName == 'Microsoft Internet Explorer' ) {
document.onmousemove = setCoords;
} else {
window.captureEvents( Event.MOUSEMOVE );
window.onmousemove = setCoords;
}
function setCoords( e ) {
if( !e ) {
top = window.event.clientY;
left = window.event.clientX;
} else {
top = e.clientY;
left = e.clientX;
}
if( top < 15 ) {top = 15;}
if( left < 262 ) {left = 260;}
if( left > document.documentElement.clientWidth - 44 ) {
left = document.documentElement.clientWidth - 44;
}
moveLayer( );
try{document.getElementById('mousecoords').innerHTML = top + ", " +
left;}
catch(e){document.getElementById('mousecoords').innerHTML = "error";}
}
//
var capture = false;
function moveLayer( ) {
if( capture ) {
document.getElementById( focusedLayer ).style.top = ( top - 16 ) +
"px";
document.getElementById( focusedLayer ).style.left = ( left - 260 )
+ "px";
document.getElementById( 'out' ).innerHTML = top + ", " + left;
}
}
function setCapture( obj ) {
capture = !capture;
if( capture ) {
obj.value = "STAY";
} else {
obj.value = "MOVE";
}
try{document.getElementById('capture').innerHTML = capture;}
catch(e){document.getElementById('capture').innerHTML = "error";}
}
//
function setActive( id ) {
focusedLayer = id;
}
//
var focusedLayer = "";
function showLayer( id ) {
if( document.getElementById( id ).style.display != 'inline' ) {
focusedLayer = id;
document.getElementById( id ).style.display = 'inline';
document.getElementById( id ).style.top = top + "px";
document.getElementById( id ).style.left = left + "px";
}
}
function hideLayer( id ) {
setActive( id );
capture = false;
document.getElementById( id ).style.display = 'none';
}
//
-->
</script>
<style>
<!--
body {
font-family:arial;
font-size:12px;
}
input {
background-color:white;
border-color:black;
border-style:solid;
border-width:1px;
color:black;
font-size:10px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
table.infoTable {
width:100%;
}
..info {
background-color:silver;
border-color:black;
border-style:solid;
border-width:2px;
display:none;
position:absolute;
text-align:justify;
width:300px;
}
..infotitle {
background-color:blue;
color:white;
font-weight:bold;
}
-->
</style>
</head>
<body>
<div id="mousecoords">mousecoords</div>
<div id="out">out</div>
<div id="capture">capture</div>
<br /><br />
<div onclick="showLayer( 'layer01' );">show 01</div>
<div class="info" id="layer01">
<div class="infotitle">
<table class="infoTable">
<tr>
<td class="infotitle">
Dinerum Rostrum 1
</td>
<td width="100" align="right">
<input type="button" value="MOVE"
onclick="setActive( 'layer01' );setCapture( this );" />
<input type="button" value="X"
onclick="hideLayer( 'layer01' );" />
</td>
</tr>
</table>
</div>
ex nostrum lex librum et cogitare eternum
ex nostrum lex librum et cogitare eternum
</div>
<br /><br />
<div onclick="showLayer( 'layer02' );">show 02</div>
<div class="info" id="layer02">
<div class="infotitle">
<table class="infoTable">
<tr>
<td class="infotitle">
Dinerum Rostrum 2
</td>
<td width="100" align="right">
<input type="button" value="MOVE"
onclick="setActive( 'layer02' );setCapture( this );" />
<input type="button" value="X"
onclick="hideLayer( 'layer02' );" />
</td>
</tr>
</table>
</div>
ex nostrum lex librum et cogitare eternum
ex nostrum lex librum et cogitare eternum
</div>
</body>
</html>
can click a button to move the element, it becomes 'stuck' to the
pointer, and click the button again to leave the element where it is.
This behavior works as expected in current versions of Firefox and
Netscape.
On IE, the button to move seems to do nothing. The onclick event
fires, but then does not more. What do I need to add or find out about
to get this working similarly in IE? Thanks in advance.
The out and capture div elements are intended to show processes for
testing. Yes, I made up the "Latin"--I don't know any.
-- Kyle
<html>
<head>
<script type="text/javascript">
<!--
//
var top = 0;
var left = 0;
if( navigator.appName == 'Microsoft Internet Explorer' ) {
document.onmousemove = setCoords;
} else {
window.captureEvents( Event.MOUSEMOVE );
window.onmousemove = setCoords;
}
function setCoords( e ) {
if( !e ) {
top = window.event.clientY;
left = window.event.clientX;
} else {
top = e.clientY;
left = e.clientX;
}
if( top < 15 ) {top = 15;}
if( left < 262 ) {left = 260;}
if( left > document.documentElement.clientWidth - 44 ) {
left = document.documentElement.clientWidth - 44;
}
moveLayer( );
try{document.getElementById('mousecoords').innerHTML = top + ", " +
left;}
catch(e){document.getElementById('mousecoords').innerHTML = "error";}
}
//
var capture = false;
function moveLayer( ) {
if( capture ) {
document.getElementById( focusedLayer ).style.top = ( top - 16 ) +
"px";
document.getElementById( focusedLayer ).style.left = ( left - 260 )
+ "px";
document.getElementById( 'out' ).innerHTML = top + ", " + left;
}
}
function setCapture( obj ) {
capture = !capture;
if( capture ) {
obj.value = "STAY";
} else {
obj.value = "MOVE";
}
try{document.getElementById('capture').innerHTML = capture;}
catch(e){document.getElementById('capture').innerHTML = "error";}
}
//
function setActive( id ) {
focusedLayer = id;
}
//
var focusedLayer = "";
function showLayer( id ) {
if( document.getElementById( id ).style.display != 'inline' ) {
focusedLayer = id;
document.getElementById( id ).style.display = 'inline';
document.getElementById( id ).style.top = top + "px";
document.getElementById( id ).style.left = left + "px";
}
}
function hideLayer( id ) {
setActive( id );
capture = false;
document.getElementById( id ).style.display = 'none';
}
//
-->
</script>
<style>
<!--
body {
font-family:arial;
font-size:12px;
}
input {
background-color:white;
border-color:black;
border-style:solid;
border-width:1px;
color:black;
font-size:10px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
table.infoTable {
width:100%;
}
..info {
background-color:silver;
border-color:black;
border-style:solid;
border-width:2px;
display:none;
position:absolute;
text-align:justify;
width:300px;
}
..infotitle {
background-color:blue;
color:white;
font-weight:bold;
}
-->
</style>
</head>
<body>
<div id="mousecoords">mousecoords</div>
<div id="out">out</div>
<div id="capture">capture</div>
<br /><br />
<div onclick="showLayer( 'layer01' );">show 01</div>
<div class="info" id="layer01">
<div class="infotitle">
<table class="infoTable">
<tr>
<td class="infotitle">
Dinerum Rostrum 1
</td>
<td width="100" align="right">
<input type="button" value="MOVE"
onclick="setActive( 'layer01' );setCapture( this );" />
<input type="button" value="X"
onclick="hideLayer( 'layer01' );" />
</td>
</tr>
</table>
</div>
ex nostrum lex librum et cogitare eternum
ex nostrum lex librum et cogitare eternum
</div>
<br /><br />
<div onclick="showLayer( 'layer02' );">show 02</div>
<div class="info" id="layer02">
<div class="infotitle">
<table class="infoTable">
<tr>
<td class="infotitle">
Dinerum Rostrum 2
</td>
<td width="100" align="right">
<input type="button" value="MOVE"
onclick="setActive( 'layer02' );setCapture( this );" />
<input type="button" value="X"
onclick="hideLayer( 'layer02' );" />
</td>
</tr>
</table>
</div>
ex nostrum lex librum et cogitare eternum
ex nostrum lex librum et cogitare eternum
</div>
</body>
</html>