[Javascript] dynamically hide an element

[Aaron Bassett]

The advantages are much the same as separating them from the HTML.
By setting classes rather than styles you can then keep all style
information within the stylesheet.

Using the div toggle as an example, say you have multiple methods all of
which control the visibility of different divs throughout a site. Each one
is setting an elements style.display = "none" or similar

Then someone has the bright idea that instead of any of the elements being
hidden they should all have their background changed to bright pink with
purple dots (or whatever, have their alpha set to 50% etc etc) instead

If you are applying the styles directly to the element within your different
methods you have to dig through your js file changing each one

If your toggling a class on/off you simply go to your style sheet and change

.toggled {
 display: none;
}

to

toggled {
 background: url(pinkdots.gif);
}

and your done :)



On 11/30/06, Stephan Wehner <stephanwehner at gmail.com> wrote:
>
> 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
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20061130/e602c021/attachment.htm>