How to make inactive content inside a div?
CssLayoutHtmlCss Problem Overview
How to make content in some div
block inactive using JavaScript?
Let's say there is a button with command "Enable / Disable". And there is one div block with some text. When pushing button "Enable / Disable", is it is "Enable", you can work with content inside, but when "Disable", you can't work with content inside div block.
I imagine in order to make inactive content inside div block, we need to put another layer upon that will prevent from editing content on the content div block.
I'm getting confused how to realize this kind of feature.
Css Solutions
Solution 1 - Css
Without using an overlay, you can use pointer-events: none
on the div
using CSS.
div.disabled
{
pointer-events: none;
/* for "disabled" effect */
opacity: 0.5;
background: #CCC;
}
Solution 2 - Css
Set pointer-events as none for the div[disabled] in CSS,
div[disabled]
{
pointer-events: none;
opacity: 0.7;
}
You can make div disabled by adding disabled attributes.
<div disabled>
<!-- Contents -->
</div>
Solution 3 - Css
div[disabled]
{
pointer-events: none;
opacity: 0.6;
background: rgba(200, 54, 54, 0.5);
background-color: yellow;
filter: alpha(opacity=50);
zoom: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}
Solution 4 - Css
Using jquery you might do something like this:
// To disable
$('#targetDiv').children().attr('disabled', 'disabled');
// To enable
$('#targetDiv').children().attr('enabled', 'enabled');
Here's a jsFiddle example: http://jsfiddle.net/monknomo/gLukqygq/
You could also select the target div's children and add a "disabled" css class to them with different visual properties as a callout.
//disable by adding disabled class
$('#targetDiv').children().addClass("disabled");
//enable by removing the disabled class
$('#targetDiv').children().removeClass("disabled");
Here's a jsFiddle with the as an example: https://jsfiddle.net/monknomo/g8zt9t3m/
Solution 5 - Css
if you want to hide a whole div from the view in another screen size. You can follow bellow code as an example.
div.disabled{
display: none;
}