[Javascript] DIV visibility

[Paul Novitski]

At 10/9/2006 09:46 AM, SkyScanner wrote:
>I have two DIVs on the same page, that overlap each other. One has 
>its style set to  visibility: visible; and the other's style is set 
>to visibility: hidden; After some javascript completes, I hide the 
>first DIV, and then show the second one.
>
>However, I have had a complaint that my method of hiding and then 
>showing is not working for one guy. Rather than show you my code, I 
>will instead ask the following:
>
>What is the best, absolutely bomb-proof method to change the 
>visibility from visible to hidden, and from hidden to visible, for 
>the following:
>
><div id="result"> blah blah blah </div>
>
>It should work for *nearly everybody* (haha)


Tim, it helps if you share a precise description of the problem 
you're asking us to help you solve!  For your user, did the 'collect' 
box disappear but the 'result' box not appear?

There are several ways to hide and show page elements, among them:

- toggling visibility (visible|hidden)
- toggling display (block|none)
- moving on & off screen {position: absolute; left: -1000em;}
- removing & inserting into the DOM

When you make an object non-visible it takes up the same space it 
originally did; you just can't see it.  I would expect a visible 
object that's behind something invisible to show, but knowing how 
quirky browsers are I wouldn't be surprised to learn that there's one 
that doesn't seem to support that.

(In Netscape 4 the properties for visibility were 'hide' and 'show' 
-- is it possible your user was running something that old?)

When you change display to none you actually remove the object from 
the rendering flow so other objects close in to fill the space it 
once occupied.  One problem with using it in DHTML is that some 
screen-readers fail to report content making the journey back from 
none to block.

Moving content off-screen works well for visual interfaces, but as I 
understand it screen-readers today aren't picky about location so 
even if you move an object far to the left out of view they will always see it.

Removing and inserting objects in the DOM is a sure bet.  In your 
case you could copy the desired content into a statically-displayed 
object (much as Ajax does) which I gather is a screen-reader-friendly approach.


Assigning style values in JavaScript means mixing the presentational 
and behavioral layers of your application, making it more awkward to 
modify later on.  As an alternative I suggest using JavaScript to 
toggle the class names of the objects in question, then defining the 
method of appearing & disappearing in your stylesheet.

Finally, I'd recommend that on a fundamental HTML level your page 
should change content by reloading from the server so that it doesn't 
break when scripting is disabled; then use JavaScript to speed up the 
transition when it's present.

Regards,
Paul