HTML div tag visibility problem
Hi !
I have a problem with the HTML page below:
<html>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.all[id].style.visibility = visibility;
if (visibility == "hidden") {
document.all[id].style.position = "absolute";
}
else if (visibility == "visible") {
document.all[id].style.position = "relative";
}
}
function setParentVisibility(id, visibility) {
parent.document.all[id].style.visibility = visibility;
if (visibility == "hidden") {
parent.document.all[id].style.position = "absolute";
}
else if (visibility == "visible") {
parent.document.all[id].style.position = "relative";
}
}
</script>
<body>
<form name="Teste">
<div id="main" style="visibility:visible; position:relative">
Main
<input value="switch" type="button" onClick="setVisibility('main', 'hidden');setVisibility('sub', 'visible');">
</div>
<div id="sub" style="visibility:hidden; position:absolute">
Sub
<input value="switch" type="button" onClick="setVisibility('main', 'visible');setVisibility('sub', 'hidden');">
</div>
</form>
</body>
</html>
When I press the 'switch' button in the 'main' div layer, the 'main' div layer stays hidden and the 'sub' div layer is shown.
When I press the 'switch' button in the 'sub' div layer, the 'sub' div layer stays hidden and the 'main' div layer is shown.
The problem is when the layer to be displayed is shown, because the button of the layer do not appear directly. You have to resize the browser's window to view the button. How can I solve this problem ??
thanks,
mach15
