Today we will learn about Observations between Display:none and Visibility:hidden style property.
Introduction
As we know that,we can hide or show controls in 2 ways using Javascript.
Using Display and Visibility style CSS property,we can achieve hiding and showing functionality.
For Display style property,we use
none -> for Hiding Controls
block or ' ' -> for Showing Controls
For Visibility style property,we use
hidden -> for Hiding Controls
visible -> for Showing Controls
But there is little difference between Display:none and Visibility:hidden.
As display:none hides controls completely and does not take space on the page.
But visibility:hidden hides the controls,but still takes up space on the page.
Objective
Observations between Display:none and Visibility:hidden style property.
Using the code
We can understand them with the help of an example:-
My [B]aspx[/B] page will look like below:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function hide_controls_with_display_property()
{
document.getElementById('link1').style.display = 'none';
document.getElementById('link2').style.display = 'none';
document.getElementById('link3').style.display = 'none';
}
function show_controls_with_display_property()
{
document.getElementById('link1').style.display = 'block';
document.getElementById('link2').style.display = 'block';
document.getElementById('link3').style.display = 'block';
//or can also be shown controls
//document.getElementById('link1').style.display = '';
//document.getElementById('link2').style.display = '';
//document.getElementById('link3').style.display = '';
}
function hide_controls_with_visibility_property()
{
document.getElementById('link1').style.visibility = 'hidden';
document.getElementById('link2').style.visibility = 'hidden';
document.getElementById('link3').style.visibility = 'hidden';
}
function show_controls_with_visibility_property()
{
document.getElementById('link1').style.visibility = 'visible';
document.getElementById('link2').style.visibility = 'visible';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Vishal <a href="http://dotnetfunda.com" id="link1">Kumar</a> Neeraj<br />
Vishal <a href="http://dotnetfunda.com" id="link2">Kumar</a> Neeraj<br />
Vishal <a href="http://dotnetfunda.com" id="link3">Kumar</a> Neeraj<br />
<asp:Button ID="btn_hide_display" runat="server" Text="Hide with Display" OnClientClick="hide_controls_with_display_property(); return false;" />
<%--<asp:Button ID="btn_show_display" runat="server" Text="Show with Display" OnClientClick="show_controls_with_display_property(); return false;" />--%>
<asp:Button ID="btn_hide_visibility" runat="server" Text="Hide with Visibility" OnClientClick="hide_controls_with_visibility_property(); return false;" />
<%--<asp:Button ID="btn_show_visibility" runat="server" Text="Show with Visibility" OnClientClick="show_controls_with_visibility_property(); return false;" />--%>
</div>
</form>
</body>
</html>
In above aspx page,i have written 4 Javascript Functions.
Now,run the page,then our page will look like below screenshot:-
Now,we will look into main observations:
As we can see that there are 2 Buttons i.e. Hide with Display and Hide with Visibility Buttons.
Now,click on 1st Button viz. Hide with Display,then '
Kumar Link Button
'
will be invisible,see below screenshot:
Now,click on 2nd Button viz. Hide with Visibility,then again '
Kumar Link Button
'
will be invisible,see below screenshot:
As we can see in the 2nd screenshot,there is no space between Vishal and Neeraj
but in the 3rd screenshot,there are spaces between Vishal and Neeraj
.
So,as we can observe that Display:None style property will never take up any space between any Text or Controls
But Visibility:Hidden style property will always take space between Text.
Conclusion
So,today we have seen the difference between Display:None and Visibility:Hidden style property.