Scribd
Upload
11 views3 pages

Hiding or Disabling HTML Controls - Infocodify Tutorials

Uploaded by

luisfdelacruzrojas2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views3 pages

Hiding or Disabling HTML Controls - Infocodify Tutorials

Uploaded by

luisfdelacruzrojas2
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

4/10/23, 9:45 AM Hiding or disabling HTML controls - Infocodify Tutorials

Ads Right
Dom Stucture
Hiding or disabling controls
Program Flow

Access and Secure Data Previous Next

CSS3 in Applications
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:

https://www.infocodify.com/web/hiding-and-disabling 1/3
4/10/23, 9:45 AM Hiding or disabling HTML controls - Infocodify Tutorials

<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:

https://www.infocodify.com/web/hiding-and-disabling 2/3
4/10/23, 9:45 AM Hiding or disabling HTML controls - Infocodify Tutorials

<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 type="text/javascript">
$("document").ready(function (e) {
$(".disableIt").attr("disabled", "disabled");
});
</script>
</body>

Previous Next

SITE LINKS SOLUTIONS TRAINING SOCIAL MEDIA

Home Cloud Solutions Micrsooft Azure Follow us on social media.

About Web Development Microsoft Developers

Contact Design Solutions Microsoft 365

IT Solutions Microsoft Office

© 2023 Copyright: Infocodify.com

Infocodify is a company registered in Quincy, Ma 02169.


Our Team is specialized in Web Applications Development, Azure DevOps and Azure Cloud Solutions.

https://www.infocodify.com/web/hiding-and-disabling 3/3

You might also like