'Blur whole body except one div with js
I have div when i click this div, after i call js function and want to blur whole page except one div.
edit
added full code
this is my full code (i use this template with backend Django) but i think it is not problem with Django and it is my issue with front-end ->
{% extends "base.html" %}
{% block content %}
{% include "./navbar.html" %}
<div class="relative pt-6 w-7/12 left-80 ">
<div class="post">
<div class="p-6 mb-12 pb-16 w-full h-auto break-all bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 border border-gray-400">
<div class="mb-4">
<form>
{% if fav %}
<button type="submit" name="fav" class="absolute right-2 top-5 text-5xl ">★</button>
{% else %}
<button type="submit" name="fav" class="absolute right-2 top-5 text-5xl ">☆</button>
{% endif %}
</form>
<h1>{{ detail.user }}</h1>
</div>
<div class="mb-2 flex ">
{% for a in detail.category.all %}
<p class="mr-2 text-sm text-blue-500">#{{ a.name }}</p>
{% endfor %}
</div>
<form class="float-right block" id="ld" action="{% url 'Profile:question-detail' pk=detail.id %}">
<div class="vote circle">
{% if like_ex %}
<button type="submit" name="like" class="block mb-2 increment up border-4 border-blue-800"></button>
{% else %}
<button type="submit" name="like" class="block mb-2 increment up "></button>
{% endif %}
{% if dislike_ex %}
<button type="submit" name="dislike"
class="block mb-2 increment down border-4 border-blue-800"></button>
{% else %}
<button type="submit" name="dislike" class="block mb-2 increment down "></button>
{% endif %}
<div class="count" onclick="t()">{{ detail.point }}</div>
</div>
<button type="button" onclick="show()" class="relative bottom-4 h-8 w-28 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-full border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">აქტივობა</button>
</form>
<h5 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">{{ detail.title }}</h5>
<p class="mb-4 font-normal text-gray-700 dark:text-gray-400">{{ detail.text }}</p>
<div class="activity ">
<p class="hidden" onclick="hide()" id="test">test</p>
</div>
</div>
{% if can_update %}
{% if owner %}
<div class="relative bottom-8">
<a href="{% url 'Profile:update-question' object.id %}">
<button class="relative inline-flex p-0.5 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800">
<span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
განახლება
</span>
</button>
</a>
</div>
{% endif %}
{% else %}
<div class="relative bottom-8">
<button class="relative inline-flex p-0.5 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800">
<span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">
განახლების ლიმიტი ამოწურული გაქვს
</span>
</button>
</div>
{% endif %}
</div>
<div class="w-full bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
<form class="bg-white rounded-lg px-4 pt-2" method="post" id="comment" novalidate>
{% csrf_token %}
<div class="flex flex-wrap -mx-3 mb-6">
{% for field in form %}
{% if field.errors %}
<div class="ml-3 my-2 bg-red-200 border border-red-200 text-red-700 px-2 py-2 rounded relative">
<ul class="">
{% for error in field.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% endfor %}
<div class="w-full md:w-full px-3 mb-2 mt-2">
{% for field in form %}
{{field}}
{% endfor %}
</div>
<div class="w-full md:w-full flex items-start md:w-full px-3">
<div class="-mr-1">
<a href="{ url Profile:question_detail detail.id }"><input type='submit' name="comment"
class="bg-white text-gray-700 font-medium py-1 px-4 border border-gray-400 rounded-lg tracking-wide mr-1 hover:bg-gray-100 cursor-pointer"
value='დაკომენტარება'></a>
</div>
</div>
</form>
</div>
</div>
<div class="comments">
{% for a in detail.question.all %}
<div class="w-full bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700 mt-8 mb-4 h-auto break-all p-4 border border-gray-400">
<div>
<p class="text-indigo-700 text-xl"> {{a.user}}</p>
</div>
<p class="fond-medium">{{a.text}}</p>
</div>
{% endfor %}
</div>
<script>
function show() {
document.getElementById('test').style.display = "block";
document.querySelectorAll('body >*:not(.test)')
.forEach(node => node.style.filter = "blur(2px)")
<!-- console.log(document.querySelector('body >*:not(.test)'))-->
}
function hide() {
document.getElementById('test').style.display = "none";
}
</script>
{% endblock %}
what should I do? thank you all for helping
Solution 1:[1]
There are multiple Issues with your example.
First of all: you are using document.getElementById('test') while writing a query that contains .test.
You either have to use an Id or a Classname, if this mix is intended, please provide a minimal code example to replicate the issue.
Secondly: using document.querySelector you only receive one Node.
You might want to change it to
document.querySelectorAll('body >*:not(.test)').forEach(e => e.style.filter = "blur(2px)");
to change all Nodes that were selected in said query.
Third: If your test div is inside a Node that receives the blur, obviously it is blurred too. There is no circumvention other than only blurring only the siblings of said test element.
Solution 2:[2]
Your approach has two issues:
- You used
querySelector- this only returns the first element that matches your selector. Change this toquerySelectorAll, and you'll receive a nodeList containing all of the elements. You can then loop over these using.forEach, and apply the filter. - If you blur a parent element, all the children will also be blurred. Make sure the div you wish to exclude is a direct child of your body element.
The following should work:
document.querySelectorAll('body >*:not(.test)')
.forEach(node => node.style.filter = "blur(2px)")
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | GottZ |
| Solution 2 |