NOTICE: This website is no longer updated or supported - as such many of the techniques used to build it may seem antiquated in the modern day. It is preserved for historical reasons only.

<!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" lang="en">
<head>
<title>Cross Browser Layer Visibility / Placement Routines</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
#test { position:absolute; top:260px;
left:300px;
background-color: yellow;}
-->
</style>

<script type="text/javascript">
<!--
/* test for objects */
(document.layers) ? layerobject=true : layerobject=false;
(document.all) ? allobject = true: allobject = false;
(document.getElementById) ? dom = true : dom = false;
function changeVisibility(id,action)
{
switch (action)
{
case "show":
if (layerobject)
document.layers[''+id+''].visibility = "show";
else if (allobject)
document.all[''+id+''].style.visibility = "visible";
else if (dom)
document.getElementById(''+id+'').style.visibility = "visible";
break;
case "hide":
if (layerobject)
document.layers[''+id+''].visibility = "hide";
else if (allobject)
document.all[''+id+''].style.visibility = "hidden";
else if (dom)
document.getElementById(''+id+'').style.visibility = "hidden";
break;
default:return;
}
return;
}
function changePosition(id,x,y)
{
if (layerobject)
{
document.layers[''+id+''].left = x;
document.layers[''+id+''].top = y;
}
else if (allobject)
{
document.all[''+id+''].style.left=x;
document.all[''+id+''].style.top=y;
}
else if (dom)
{
document.getElementById(''+id+'').style.left=x+"px";
document.getElementById(''+id+'').style.top=y+"px";
}
return;
}
//-->
</script>
</head>
<body>

<div id="test">
This is a test division</div>

<form action="#" name="testform" id="testform">

<input type="button" value="show" onclick="changeVisibility('test','show');" />
<input type="button" value="hide" onclick="changeVisibility('test','hide');" />
<br /><br />
X: <input type="text" name="xcoord" id="xcoord" size="4" maxlength="4" value="100" />
Y: <input type="text" name="ycoord" id="ycoord" size="4" maxlength="4" value="100" />
<input type="button" value="move" onclick="changePosition('test',document.testform.xcoord.value,document.testform.ycoord.value);" />
</form>

</body>

</html>


CLOSE WINDOW | VIEW RENDERED PAGE