0
303
ViewsBlur all but one element in the body
I'm trying to blur everything on the screen except the loading animation. This is what I have tried.
$("#addall").click(function() {
$('#loading').show();
$('body:not(#loading)').css("filter", "blur(3px)");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simple-loading" style="display: none" id="loading">
<div class="active dimmer">
<div class="text loader">Loading...</div>
</div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat id nisi eget egestas. <a id="addall" href="javascript:void(0)">Load.</a> Nullam luctus ac ipsum vel blandit. Cras eu felis ac lorem porta egestas. Sed interdum cursus ligula, sit amet euismod velit volutpat at. Fusce luctus scelerisque mollis. Praesent ligula neque, vehicula elementum justo sed, egestas accumsan eros. Suspendisse at est eget nunc efficitur vestibulum. Suspendisse potenti. Pellentesque quis fermentum ligula.</div>Also I have tried
$("body").each(function(event) {
if (event.target.id != "loading") {
$(this).css("filter","blur(3px)");
}
});
and it never works... Is there any good solution?
3 answers
Answer question0
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>0
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>
0
Unfortunately you cannot blur an HTML node without blurring its children.
One solution is to put your contents and loading image in two divs 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)).