[Javascript] dynamically hide an element

[aaronbassett at gmail.com (Aaron Bassett)]

Why is everyone (well minus a few) so dedicated to adding styles 'inline'??
As we all know styles should be kept in the style sheet etc etc

so define a class

.hide {
 display: none; /* or visibility: hidden */
}

and then add and remove the class

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)

Element.addClassName(el, "hide");
Element.removeClassName(el, "hide");

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 :)



On 11/29/06, Peter Brunone <peter@xxxxxxxxxxx> wrote:
>
>  Hi Roland,
>
>    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).
>
> Cheers,
>
> Peter Brunone
>  * ______________
> EasyListBox.com *
>
>   *From*: "Dong, Roland" Roland_Dong@xxxxxxxxxx
>
>  Hello,
>
>    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?
>
>  .......
>  <tr id="id1">
>     <td>
>      <select name="first" onchange="check(this)">
>          <option>a</option>
>          <option>b</option>
>        </select>
>      <td>
>  </tr>
>  <tr id ="id2" style="visibility:hidden";>
>   <td>
>        <select name="second">         <option>c</option>
>         <option>d</option>
>       </select>
>    <td>
>  </tr>
>  ..............
>  rest of the form....
>
>
>  Thanks a lot,
>
>  Roland
>
> _______________________________________________
> Javascript mailing list
> Javascript@xxxxxxxxxx
> https://lists.LaTech.edu/mailman/listinfo/javascript
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: https://lists.LaTech.edu/pipermail/javascript/attachments/20061129/60dd3809/attachment.html