[Javascript] [Beginner] What is going on with my show/hide function?

[Paul Novitski]

At 11/13/2006 10:51 AM, Matt Warden wrote:
>On 11/13/06, Roger Roelofs <rer at datacompusa.com> wrote:
>
>>Save yourself some debugging grief by changing the javascript to
>>manipulate the className attribute instead.
>>
>>See <http://onlinetools.org/articles/unobtrusivejavascript/> 
>>cssjsseparation.html> for an explanation of the whys and hows of this
>>technique.
>
>I'll second this. You really should be manipulating group membership
>which indirectly manipulates style, not directly manipulating style
>with JS. Granted, 'hidden' and 'shown' aren't exactly the best groups,
>but it's better than using the style object. Either user Christian's
>jscss function or something similar. If you're using YUI, you can use
>Dom.*class() functions:
>
>http://developer.yahoo.com/yui/dom/#class


With an eye to minimalist programming, I'd like to suggest that it's 
not necessary to use javascript to create or manipulate classes at 
all.  Just set up a static stylesheet:

         .showInline { display: inline; }
         .showBlock  { display: block; }
         .hidden     { display: none; }

...then change the element's className with javascript.  That way the 
methods of hiding & showing remain discretely in the presentational 
layer, separate from the mechanics of toggling, allowing these two 
aspects of your application to be modified more independently of one another.


To reiterate an earlier point, toggling display apparently breaks in 
some screen readers that don't report elements making the transition 
from none to block or inline.

Does your page remain usable if the div doesn't hide?  If so, you can 
toggle its visibility for sighted users by changing its position 
while leaving it readable by non-visual user agents:

         .shown
         {
                 position: static;
         }
         .hidden
         {
                 position: absolute;
                 left: -1000px;
         }

On the other hand, if your page breaks if the div remains visible, 
consider that your page will break when javascript is disabled or 
unsupported.  In this case I'd try an alternative method that lets 
everyone use your page and then enhances the experience when 
javascript is running.

Paul