PDA

Click to See Complete Forum and Search --> : HTML div tag visibility problem

mach15
May 20th, 2002, 03:14 PM
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
SButler
May 21st, 2002, 01:30 PM
I believe you might want to just have a single "DIV" tag whose InnerHTML property changes with the click of a button. I also have the same issues you are having. I think it would be much more straightforward to just change your display rather than adjusting positions of your display.
ChrisWoyton
May 22nd, 2002, 06:42 PM
Mach,

You could just use the display property (instead of visibility) which doesn't allot space on the page when the display is set to "none".

Here's a rewrite which does what I think you want to do:

<html>
<script language="JavaScript">
function setVisibility(id, visibility) {
document.all[id].style.display = visibility;
}

</script>
<body>
<form name="Teste">
<div id="main" style="display:block">
Main
<input value="switch" type="button" onClick="setVisibility('main', 'none');setVisibility('sub', 'inline');">
</div>
<div id="sub" style="display:none">
Sub
<input value="switch" type="button" onClick="setVisibility('main', 'inline');setVisibility('sub', 'none');">
</div>
</form>
</body>
</html>

Hope this helps,

Chris