April 17th, 2001, 09:09 AM
|
|
Contributing User
|
|
Join Date: Apr 2001
Location: (Slave only) NY, NY USA
Posts: 34
Time spent in forums: < 1 sec
Reputation Power: 13
|
|
|
combo box/layer
try this. allows you to show & hide controls in the same space by manipulating visibility of the layers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE>How to Hide Form Elements</TITLE>
<style type="text/css">
<!--
#controlSection {
position:absolute;
width: 350px;
height: 250px;
top: 0;
left: 0;
visibility:visible;
font-size: 12pt;
background: Silver;
color : Maroon;
border : thin dotted Black;
}
#explainations {
background-color: Teal;
color: White;
font-size: 12pt;
border: medium outset Silver;
height : auto;
position: absolute;
top: 0;
width: auto;
left: 360;
height: auto;
visibility: visible;
}
#divtag1 { visibility:visible;
position:absolute;
top:300px;
left:10;
height:75;
width:300;
font-size: 10pt;
background:yellow;
border : thin dotted Black;
}
#divtag2 { visibility:hidden;
position:absolute;
top:300;
left:10;
height:75;
width:300;
font-size: 10pt;
background:red;
border : thin dotted Black;
}
#divtag3 { visibility:hidden;
position:absolute;
top:300;
left:10;
height:75;
width:300;
font-size: 10pt;
background:aqua;
border : thin dotted Black;
}
.heading { font-size: 14pt;
color: yellow;
}
// -->
</style>
<script type=text/javascript>
// identify Netscape or MSIE
var isIE = (document.all) ? true : false;
var isNS = (document.layers) ? true : false;
function toggleT( objName, swi ) {
if ( isIE ) {
( swi == "s" ) ? eval("document.all." + objName + ".style.visibility='visible';") :
eval("document.all." + objName + ".style.visibility='hidden';");
}
else {
( swi == "s" ) ? eval("document.layers['" + objName + "'].visibility='show';") :
eval("document.layers['" + objName + "'].visibility='hide';");
}
}
</script>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<span id="controlSection">
<form name="form0">
Controls for the first set of controls.<br />
Visible <input name="r1" type="radio" value="" onClick="toggleT('divtag1','s'); toggleT('divtag2','h'); toggleT('divtag3','h');"><br />
Hidden <input name="r1" type="radio" value="" onClick="toggleT('divtag1','h')">
<br />
<br />
Controls for the second set of controls.<br />
Visible <input name="r2" type="radio" value="" onClick="toggleT('divtag2','s'); toggleT('divtag1','h'); toggleT('divtag3','h');"><br />
Hidden <input name="r2" type="radio" value="" onClick="toggleT('divtag2','h')">
<br />
<br />
Controls for the third set of controls.<br />
Visible <input name="r3" type="radio" value="" onClick="toggleT('divtag3','s'); toggleT('divtag1','h'); toggleT('divtag2','h');"><br />
Hidden <input name="r3" type="radio" value="" onClick="toggleT('divtag3','h')">
</form>
</span>
<span id="divtag1">
<form name="form1">
This is initially visible<INPUT TYPE="text" NAME="textBox"><br />
<INPUT TYPE="submit"><INPUT TYPE="reset">
</form>
</span>
<span id="divtag2">
<form name="form2">
This is initially invisible<select name="selectBox" size="3">
</select><br />
<INPUT TYPE="submit"><INPUT TYPE="reset">
</form>
</span>
<span id="divtag3">
<form name="form3">
This is initially invisible
<textarea cols="25" rows="3" name="textArea">asdfasfafd</textarea><br />
<INPUT TYPE="submit"><INPUT TYPE="reset">
</form>
</span>
<span id="explainations">
<span class="heading">Hiding and Show Form Objects.</span><br />
For whatever reason, if you embed your form objects,<br />
no matter what they are, into seperate forms, you are<br />
then able to use style containers, defined to overlay one<br />
another, to hide or show the various element sets as you see fit.<br />
</span>
</BODY>
</HTML>
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
