Observations between Display:none and Visibility:hidden style property

vishalneeraj-24503
Posted by in JavaScript category on for Intermediate level | Points: 250 | Views : 4274 red flag

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.


Page copy protected against web site content infringement by Copyscape

About the Author

vishalneeraj-24503
Full Name: vishal kumar
Member Level: Platinum
Member Status: Member,MVP
Member Since: 11/5/2013 5:58:17 AM
Country: India

http://www.dotnetfunda.com

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)