Hiding or disabling controls

Using the visibility property

Some layouts might just not work in some view ports. In this case, you might want to complete hide controls or disable controls.

When hiding an element using the visibility property, the overall layout still behaves as though the element is there.

The following code demonstrates the display property:

<head>
<style type="text/css">
    div{
        height:100px;
        width:100px;
        border:1px solid green;
    }
    /*the div is present - the content is invisible*/
    #div1 {
        visibility:hidden;
    }
</style>
</head>
<body>
   <h2> visibility:hidden; - BUT THERE IS A DIV BELOW </h2>
    <div id="div1">
        <p>SOME TEXT TEXT</p>
    </div>
</body>

Using the display property

If you prefer to have the element hidden and the layout behave as though it is not there, the display property.

With the display property, the element is not visible and the layout is not affected by it.

The following code demonstrates the visibility property:

<head>
<style type="text/css">
    div{
        height:100px;
        width:100px;
        border:1px solid green;
    }
    /*the div doesn't effects the layout and is invisible too */
    #div2 {
        display:none;
    }
</style>
</head>
<body>
    <h2> display:none; - THERE IS NO DIV BELOW </h2>
    <div id="div2">
        SOME TEXT TEXT ...
    </div>
</body>

Using the disabled property

If you do not want to hide the element but only make it disabled such that the user can see it but cannot perform any action on it, you need to add the attribute directly to the HTML element.

The following code demonstrates the disabled property:

<body>
    <h2> DISABLED BUTTON USING disabled="disabled"</h2>
    <button id="myButton" disabled="disabled">My Button</button>
</body>

Using jQuery to apply the disabled property

When you have many elements that you would like to disable, it is much easier to create a CSS class, apply it to the elements, then by using jQuery, apply the disabled attribute to them all.

The following code demonstrates the disabled property by using jQuery:

<head>
<style type="text/css">
    div{
        height:100px;
        width:100px;
        border:1px solid green;
    }
    /*the div doesn't effects the layout and is invisible too */
    #div2 {
        display:none;
    }
</style>
</head>
<body>
    <h2> DISABLED BUTTON USING jQuery</h2>
    <button id="myButton" class="disableIt">My Button</button>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $("document").ready(function (e) {
            $(".disableIt").attr("disabled", "disabled");
        });
    </script>
</body>

Ads Right