Blur all but one element in the body

Question

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?

Answer 1

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>

Answer 2

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>