Blur all but one element in the body
Try This
You can achieve this using css only. NO NEED TO JQUERY
Please see the below code
body > *:not(#loading) {
filter: blur(3px);
}
<div>Some DIV.</div>
<div id="loading">Loading DIV
<div style='padding:15px;'>Some other DIV inside loading div.</div>
</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>
Unfortunately you cannot blur an HTML node without blurring its children.
One solution is to put your contents and loading image in two div
s inside a parent div
like the following.
<div id="parent_div" style="position:relative;height:300px;width:300px;">
<div id="background" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red;filter: blur(3px);z-index:-1;"></div>
<div id="loading">Spinner...</div>
</div>
To blur/unblur just do $('#background').css('filter', 'blur(3px))
.
The problem is that your selector works on all body
elements and then picks the ones that do not have ID loading
. Since there is only one body
element and it indeed does not have this ID, it is selected. Of course, this is not what you want. You want to select all children of the body
element and then filter those that do not have the loading
ID.
The selector needs to be body > *:not(#loading)
.
To clarify: this selector selects all elements (*
)...
...that are children of the body (body > *
)
...and do not have ID loading (*:not(#loading)
).
This uses the child selector (spec) and negation pseudo-class :not()
(spec).
body > *:not(#loading) {
background: #ffd83c;
filter: blur(3px);
}
div, p {
margin: 10px;
padding: 5px;
}
<div>Some DIV.</div>
<div id="loading">Loading DIV</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>