spacer
Yehuda Shiran December 17, 2000
Setting Default Visibility
Tips: December 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Google Going Native With Chrome
Mozilla Fixes Firefox Flaws as 3.5 Release Nears
Microsoft and Novell Still Bosom Buddies

The browser-independent W3C Standard's way to set and get an element visibility is via the style object's visibility property. The visibility property may have three possible values:

  • An empty string ("")
  • "hidden"
  • "visible"

An element is visible when its style object's visibility property is either empty ("") or "visible". It is invisible when the property is "hidden".

When you initially place an element, its default visibility is an empty string (""). One would expect that setting the visibility property in the STYLE attribute, would switch the default value from "" to "visible":

<FORM>
<INPUT ID="button1" STYLE="position:relative; left:0; visibility:'visible';" 
  TYPE="button" VALUE="Show Visibility of Other Button" onclick="handleClick()">
<INPUT ID="button2" STYLE="position:relative; left:150; visibility:'visible';" 
  TYPE="button" VALUE="Show My Visibility" onclick="handleClick()">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
function handleClick() {
  alert('visibility = "' + document.getElementById('button2').style.visibility + '"');
}
// -->
</SCRIPT>

Click the following buttons to verify that indeed the default visibility value is "visible" and not "". You'll find that this is the case in Internet Explorer only. Netscape 6, on the other hand, returns an empty string (""), so you cannot change the default visibility value in Netscape 6:

This is the reason why a safer way to check whether an element is visible or not, is by testing if it is not "hidden":

if (visibility != "hidden")...

You can also set visibility to "visible" in a JavaScript script. Needless to say, you have to do it before the first query of visibility.


People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
XML and PHP Simplified · Creating a ASP.NET Contact Form · Data Filtering with PHP
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Intel to Host Live Nehalem Q&A · 12 Tips to Troubleshoot Network File-Sharing · 10 Tips for Selling on Kijiji