Hidden Object But Still Have a Place Reserved
I'm trying to make two forms that aren't displayed at the same time. The first one stays visible when the page opens, but if the user select, the first one should be hidden and the second one might take it's place. So here is my CSS for this:
#switcher {
float: right;
font-size: 12px;
}
#web_upload {
visibility: hidden;
}
#local_upload {
visibility: visible;
}
Here is the HTML:
<form action="img_upload.php" id="local_upload" method="post" enctype="multipart/form-data">
<center>
<input type="file" name="file" id="file" />
<br />
<input type="image" name="submit" src="graphics/upload.png" />
</center>
</form>
<form action="url_upload.php" id="web_upload" method="post" method="post">
<center>
<input type="text" name="url" id="url" />
<br />
<input type="image" name="submit" src="graphics/upload.png" />
</center>
</form>
And here is my Javascript to do it:
function showHide(id, other)
{
if(document.getElementById(id)) {
if(document.getElementById(id).style.visibility != "hidden") {
document.getElementById(other).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";
} else {
document.getElementById(id).style.visibility = "hidden";
document.getElementById(other).style.visibility = "visible";
}
}
}
So, I'm having three problems:
- The second form has a reserved place on the page and I don't want this empty place
- The second form is displaying on that reserved place instead of taking place over the first one
- If the user select one of the options and try to select other aft开发者_Python百科er nothing happens
How I can solve this problems?
@Nathan Campos: I'd combine display
and visibility
like so --
CSS:
#web_upload {
display: none;
visibility: hidden;
}
#local_upload {
display: inline;
visibility: visible;
}
JavaScript:
function showHide(id, other)
{
var id1 = document.getElementById(id);
var id2 = document.getElementById(other);
if (id1.style.display == "none") {
id1.style.display = "inline";
id1.style.visibility = "visible";
id2.style.display = "none";
id2.style.visibility = "hidden";
} else if (id1.style.display == "" || id1.style.display == "inline") {
id1.style.display = "none";
id1.style.visibility = "hidden";
id2.style.display = "inline";
id2.style.visibility = "visible";
}
}
display: none/block;
Show the form / Totally hide and clear the space
visibility: hidden
; Hide the form, but keep the space preserved
The CSS visibility
property is not the right choice here.
The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether)
Reference: http://www.w3.org/TR/CSS21/visufx.html#visibility
Consider instead the CSS display
property - display:none
applied to an element will make it appear as if it is not present at all, it will be invisible and will not affect layout.
#switcher {
float: right;
font-size: 12px;
}
#web_upload {
display:none;
}
#local_upload {
display:block;
}
//
function showHide(id, other)
{
switch (document.getElementById(id).style.display) {
case 'block':
document.getElementById(id).style.display = 'none';
document.getElementById(other).style.display = 'block';
case 'none':
document.getElementById(id).style.display = 'block';
document.getElementById(other).style.display = 'none';
}
}
精彩评论