Preferred command?

@JMRKERJan 06.2007

Which is the better javascript/CSS combination to use to hide a <div> section in the most number of browsers.

Should I use:
1. style.display=”none” and style.display=”block”

2. style.visibility=”hidden” and style visibility=”visible”

Both seem to work, I’m asking which is the better method?

to post a comment

@yodasw16Jan 06.2007 — #I might be wrong, but [code=html]display:none[/code] in your stylesheet should work in any browser to hide anything.

@JMRKERauthorJan 06.2007 — #Thanks yodasw16,

Like I said, both seem to work, I'm just looking for the "most" correct application.

@mudeltaJan 06.2007 — #Hello,

while both show / hide an element, there is a difference.

With display: none the element takes no space any longer

with visibility:hidden the element still takes space

test the following code and you will see it yourself:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd"&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;title&gt;Document sans nom&lt;/title&gt;
 &lt;style type="text/css"&gt;
 div{
 width:500px;
 height:100px;
 border:solid 2px;
 }
 .color_a{background:#00f;}
 .color_b{background:#ff0;}
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 function toggle(number){
 target=document.getElementById('second');
 switch(number){
 case 1:
 target.style.display=(target.style.display=="none")?"":"none";
 ;break;
 case 2:
 target.style.visibility=(target.style.visibility=="hidden")?"visible":"hidden";
 break;
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div id="first" class="color_a"&gt;&lt;/div&gt;
 &lt;div id="second" class="color_b"&gt;&lt;/div&gt;
 &lt;div id="third" class="color_a"&gt;&lt;/div&gt;
 &lt;input type="button" onclick="toggle(1)" value="toggle display"/&gt;
 &lt;input type="button" onclick="toggle(2)" value="toggle visible"/&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@felgallJan 06.2007 — #Use whichever of the two does what you want. Change the display to none to remove the div from the page completely and reflow the content or change visibility to none if you want to hide it without reflowing the document so as to leave a blank space where it is to appear. This should work in all browsers that understand CSS.

@JMRKERauthorJan 07.2007 — #Thank you "mudelta". Very effective demonstration of the difference.

Verbalization helped as well "fengall"

At least I can now understand why my pages 'jump' around at times.

Preferred command?

5 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Preferred command?

5 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #CSS _↴