[Javascript] dynamically hide an element

[Stephan Wehner]

Could you elaborate? What is the advantage of dynamically setting
classes over styles?

I can see within the HTML document itself, it's good to separate the
style. But in the dynamic case I don't see it.

Stephan

On 11/29/06, Aaron Bassett <aaronbassett at gmail.com> wrote:
> 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 at brunone.com> 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 at parade.com
> >
> >
> > 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 at LaTech.edu
> > https://lists.LaTech.edu/mailman/listinfo/javascript
> >
> >
> >
>
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>
>
>


-- 
Stephan Wehner
> http://stephan.sugarmotor.org
> http://stephansmap.org
> http://www.trafficlife.com
> http://www.buckmaster.ca