What I'm trying to do is have two different sets of input elements
which occupy the same space on the page, only one of which is visible
at a time. You switch between the two with a bit of javascript. How
I've done it is to have one of the two sets be absolutely positioned.
Here is a short version:
<html>
<body>
<script>
function toggleAdvanced() {
var basic = document.getElementById("base.result");
var advanced = document.getElementById("advanced.result");
var advancedmode = false;
if (advancedmode)
{
basic.style.visibility="visible";
advanced.style.visibility="hidden";
advancedmode=false;
}
else
{
basic.style.visibility="hidden";
advanced.style.visibility="visible";
advancedmode=true;
}
}
</script>
<div style="position:relative;text-align:center">
<div class="input" id="base.result"
style="overflow:auto;width:100%;height:200px;min-height:200px;max-height:200px;margin-left:0;margin-right:0;text-align:center;visibility:visible">
<input type="text" name="first" value="start">
</div>
<div class="input" id="advanced.result"
style="overflow:auto;width:700px;min-width:700px;max-width:700px;height:200px;min-height:200px;position:absolute;top:0;text-align:center;max-height:200px;visibility:hidden">
<textarea style="width:560;height:160" name="advanced.result.text">
</textarea>
</div>
</div>
<a href="javascript:toggleAdvanced()">advanced</a>
</body>
</html>
It works, but I cannot get the absolutely positioned part to be
horizontally centered. I've tried "left:0;right:0",
"left-margin:0;right-margin:0", "left:50%;right:50%",
"text-align:center" etc. etc. etc.
I am viewing this using firefox 1.0 on Linux (red hat 9).
I have searched and searched and tried all kinds of things, but nothing
seems to work quite right. Any and all help would be greatly
appreciated! Thanks.
--J
