|
-
May 20th, 2002, 03:14 PM
#1
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
-
May 21st, 2002, 01:30 PM
#2
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.
-
May 22nd, 2002, 06:42 PM
#3
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
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote
