Why is everyone (well minus a few) so dedicated to adding styles 'inline'??<br>As we all know styles should be kept in the style sheet etc etc<br><br>so define a class<br><br>.hide {<br> display: none; /* or visibility: hidden */
<br>}<br><br>and then add and remove the class <br><br>there are several nice functions out there to do this already or if you use the prototype.js library (or even if you dont these methods are easy enough to remove and add to your own class or create as functions)
<br><br>Element.addClassName(el, "hide");<br>Element.removeClassName(el, "hide");<br><br>no need to worry if the default property value is inline of block as when you remove the class it will go back to what it was before, and has the added benefit of keeping your style away from your function :)
<br><br><br><br><div><span class="gmail_quote">On 11/29/06, <b class="gmail_sendername">Peter Brunone</b> <<a href="mailto:peter@brunone.com">peter@brunone.com</a>> wrote:</span><blockquote class="gmail_quote" style="border-left: 1px solid rgb(204, 204, 204); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;">
<font size="2">
<font face="Arial">Hi Roland,<br><br> Instead of using style.visibility = "hidden", use style.display="none". Then, to change it back, you set the display to "inline" (it might be "block", but I'm pretty sure the default is "inline" for select elements; you can look it up if necessary).
<br><br>Cheers,<br><br>Peter Brunone<br></font>
<font face="Arial">
<strong>
<font face="Verdana">______________<br>EasyListBox.com</font>
</strong>
<br>
<br>
</font>
</font>
<font face="Tahoma, Arial, Sans-Serif" size="2">
<b>From</b>: "Dong, Roland" <a href="mailto:Roland_Dong@parade.com" target="_blank" onclick="return top.js.OpenExtLink(window,event,this)">Roland_Dong@parade.com</a><br></font>
<br>
<div dir="ltr" align="left">
<font color="#0000ff" face="Arial" size="2">
<span>Hello,</span>
</font>
</div>
<div dir="ltr" align="left">
<font color="#0000ff" face="Arial" size="2">
<span>
</span>
</font> </div><div><span class="e" id="q_10f34b04b1723214_1">
<font color="#0000ff" face="Arial" size="2">
</font>
<font color="#0000ff" face="Arial" size="2">
</font>
<div>
<span>
<font color="#0000ff" face="Arial" size="2">I need to dynamically hide and unhide a selection box based on the value selected in the first selection box. So if a user selects "a" in selection box, element id2 should be visible else it should remain hidden. I can use
document.getElementByI("id2").style.visibility="visible" to make it visible and document.getElementById("ed1").style.visibility="hidden"; to make it disappear. The problem when element id2 disappears, it still keeps space there and it makes the form look bad. Is there a way to dynamically remove the space it occupies?
</font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2">
</font>
</span> </div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2">.......</font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"><tr id="id1"></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"> <td></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"> <select name="first" onchange="check(this)"></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"> <option>a</option></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"> <option>b</option></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"> </select> </font>
</span>
</div>
<div>
<span>
</span>
<span>
<font color="#0000ff" face="Arial" size="2"> <td></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"></tr></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"><tr id ="id2" style="visibility:hidden";></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"> <td></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"> <select name="second">
<div><span><font color="#0000ff" face="Arial" size="2"> <option>c</option></font></span></div><div><span><font color="#0000ff" face="Arial" size="2"> <option>d</option></font></span>
</div><div><span><font color="#0000ff" face="Arial" size="2"> </select> </font></span></div></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"> <td></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2"></tr></font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2">..............</font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2">rest of the form....</font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2">
</font>
</span> </div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2">
</font>
</span> </div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2">Thanks a lot,</font>
</span>
</div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2">
</font>
</span> </div>
<div>
<span>
<font color="#0000ff" face="Arial" size="2">Roland</font>
</span>
</div>
</span></div><br>_______________________________________________<br>Javascript mailing list<br><a onclick="return top.js.OpenExtLink(window,event,this)" href="mailto:Javascript@LaTech.edu">Javascript@LaTech.edu</a><br><a onclick="return top.js.OpenExtLink(window,event,this)" href="https://lists.LaTech.edu/mailman/listinfo/javascript" target="_blank">
https://lists.LaTech.edu/mailman/listinfo/javascript</a><br><br><br></blockquote></div><br>