Read, With the Name of Your Lord Who Created

Javascript And CSS Animations: The Difference Between Display And Visibility

Posted by triaslama on March 8, 2008

Display and visibility are two properties of style attribute which determine whether an element should appear or disappear. Although both share the same functionality but, display and visibility has important distinctions. In this post I will unveil one of the difference between display and visibility.

Here is the scenario:

Display and Visibility

The above picture produced by HTML and Javascript code, here HTML code (dv.htm):

<html>
<head>
<title>The Difference Between Display and Visibility</title>
<script lang=”javascript” type=”text/javascript” src=”dv2.js” src=”dv2.js”>
</script>
</head>
<body>
Select Mode: <p>
<input type=”radio” id=”rad1″ name=”rdChoice” checked=”true” value=”display”>Display</input>
<br>
<input type=”radio” id=”rad2″ name=”rdChoice” value=”visibility”>Visibility</input>
<p>
<b>To see the difference between display and visibility:</b><br> select desired mode>>move mouse cursor over the text below>>hold down ‘Ctrl’ key>>click the element
<p>
<div id=”content” style=”border:2px solid black; width:400px;font-family:arial;font-size:17px”>
<b>
<span id=”firstSpan”>The Difference </span><span id=”secondSpan”>Between </span><span id=”thirdDiv”>Display and </span><span id=”fourthSpan”>Visibility.</span>
</b>
</div>
</body>
</html>

and this is Javascript code:


window.onload = selectSpan;


function selectSpan()
{
var spans = document.getElementsByTagName("span");
for (var i=0;i
spans[i].onmouseover = function()
{
this.style.backgroundColor = "lavender";
};
spans[i].onmouseout = function()
{
this.style.backgroundColor = "white";
};
spans[i].onclick = function(e)
{
// event in IE acessible through window.event property
e = e||window.event;
var rad1 = document.getElementById("rad1");
var rad2 = document.getElementById("rad2");


if (e.ctrlKey) {
if (rad1.checked) {
//window.alert(rad1.value);
this.style.display = "none";
}
else if (rad2.checked) {
//window.alert(rad2.value);
this.style.visibility = "hidden";
}
else {
window.alert("something else selected.");
}
}
};
}
}

Display mode has several possible values such as none, inline, and block. Visibility has two possible values that is visible and hidden. Setting visibility property of an element to hidden will make that element disappear but still leaving that element in document. Setting the display property of an element to none will make that element looks like just removed from the document / pulled out from the document.

To prove this concept, run the code in browser select a mode (display or visibility), move your mouse over an element inside the block then hold down ‘Ctrl’ key and click element that you want to make it disappear / invisible from document.

One Response to “Javascript And CSS Animations: The Difference Between Display And Visibility”

  1. santhi said

    thanks for nice post

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: