CODEWITHSUNDEEP
jquerycsseffects
user248462
user248462

Reputation: 95

How to darken background except of one element?

How to darken entire body except of one element which is div .search-bar. In my case it's only darken on click and do nothing after!

But my goal is to be focused on click and if it's clicked to any other area darke

This is how output should look like -> image

<div class="search-bar">
    <input type="text" class="search-btn" placeholder="Поиск по ключевым словам">
</div>

And ->

$(function () {

    darkenColor();

});

var darkenColor = function ($color) {

    var $color = $('.search-bar');

    $color.click(function () {


        $(function () {
            var docHeight = $(document).height();
            $('body').append("<div id='overlay'></div>");
            $('#overlay')
                .height(docHeight)
                .css({
                    'opacity': 0.4,
                    'position': 'absolute',
                    'top': 0,
                    'left': 0,
                    'background-color': 'black',
                    'width': '100%',
                    'z-index': 5000
                });
            });
            $(this).css({
                'background' : '#fff',
                'position' : 'relative',
                'z-index' : 5700,
            });


    });


}

Upvotes: 8

Views: 6124

Answers (3)

Flion
Flion

Reputation: 10902

non jQuery answer:

apply this CSS to your element

box-shadow: 0 0 0 max(100vh, 100vw) rgba(0, 0, 0, .3);

Upvotes: 21

Pablo Alexis Dom&#237;nguez Grau
Pablo Alexis Dom&#237;nguez Grau

Reputation: 719

It's been a while, but another way of accomplishing it is with the use of the jquery-dim-background.

All you do is load this script after your jQuery:

<script type="text/javascript" src="https://andywer.github.io/jquery-dim-background/jquery.dim-background.min.js"></script>

And then, let's say you want to only focus on a specific element, and you want the rest to be dimmed/darkened. You do this:

$('#theElementYouWantFocused').dimBackground();

Whatever happens next is up to you. Then, whenever you want to bring things back to normal, you do:

$.undim();

And that's it!

Here's a snippet of it working. Scroll down and run it so you can see how it works!

Dimming your background - snippet

html {
  font: 10pt Arial, sans-serif;
}

body {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 20px;
  /* Background texture from http://subtlepatterns.com */
  background: url('cream_pixels/cream_pixels.png') repeat;
}

h1 {
  margin: 30px auto 10px;
  text-align: center;
}

.info {
  margin: 15px 3.9%;
  padding: 0;
  background: #888;
  border: 1px solid #AAA;
  color: white;
}

.info>p {
  padding: 15px 20px 0;
  margin: 0;
  font-size: 110%;
}

.info>.source {
  margin-top: 20px;
}

.boxes {
  position: relative;
  margin: 20px auto 30px;
}

.box {
  display: inline-block;
  width: 25%;
  margin: 3% 3.9%;
  background: rgb(255, 255, 200);
  border: 1px solid #888;
  cursor: default;
  text-align: center;
  vertical-align: middle;
}

#actionBox:hover {
  box-shadow: 0 0 8pt #111;
  -moz-transition: box-shadow 200ms;
  -webkit-transition: box-shadow 200ms;
  transition: box-shadow 200ms;
}
<!DOCTYPE html>
<html>

<head>
  <title>Basic element dimming demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://andywer.github.io/jquery-dim-background/jquery.dim-background.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $('#actionBox')
        .mouseenter(function() {
          $(this).dimBackground();
        })
        .mouseleave(function() {
          $(this).undim(); // Note: We could also use `$.undim();`
        });
    });
  </script>
</head>

<body>
  <h1>Basic Demo</h1>
  <div class="info">
    <p>
      <b>Move your mouse cursor over Box #5 and see how anything else on
                this page becomes dimmed.</b>
    </p>

  </div>
  <div class="boxes">
    <div class="box">
      <h2>Box #1</h2>
    </div>
    <div class="box">
      <h2>Box #2</h2>
    </div>
    <div class="box">
      <h2>Box #3</h2>
    </div>
    <div class="box">
      <h2>Box #4</h2>
    </div>

    <div class="box" id="actionBox">
      <h2>Box #5</h2>
      <p>
        Hover me!
      </p>
    </div>

    <div class="box">
      <h2>Box #6</h2>
    </div>

    <div class="box">
      <h2>Box #7</h2>
    </div>
    <div class="box">
      <h2>Box #8</h2>
    </div>
    <div class="box">
      <h2>Box #9</h2>
    </div>
  </div>
</body>

</html>

UPDATE

  • Here is a link to the official basic demo: jQuery Dim Background Demo

  • Here is a link to the GitHub documentation of this package: GitHub - jQuery Dim Background

  • If you read the docs, you can also find a that you can modify the darkness (how dim you want the background to be), which may be useful to some of you. For example, here is another snippet:

Variable Dimming of your background - another snippet

// Note -> 0: no dimming, 1: completely black

function dimNothing() {
  $('#dim-nothing').dimBackground({darkness : 0});
}

function dimABit() {
  $('#dim-a-bit').dimBackground({darkness : 0.1});
}

function dimMedium() {
  $('#dim-medium').dimBackground({darkness : 0.5});
}

function dimATon() {
  $('#dim-a-ton').dimBackground({darkness : 0.9});
}

function dimPitchBlack() {
  $('#dim-pitch-black').dimBackground({darkness : 1});
}

$(document).ready(() => {
  $('#dim-nothing').mouseenter(() => dimNothing()).mouseleave(() => $.undim());
  $('#dim-a-bit').mouseenter(() => dimABit()).mouseleave(() => $.undim());
  $('#dim-medium').mouseenter(() => dimMedium()).mouseleave(() => $.undim());
  $('#dim-a-ton').mouseenter(() => dimATon()).mouseleave(() => $.undim());
  $('#dim-pitch-black').mouseenter(() => dimPitchBlack()).mouseleave(() => $.undim());
});
html {
  font: 10pt Arial, sans-serif;
}

body {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 20px;
  /* Background texture from http://subtlepatterns.com */
  background: url('cream_pixels/cream_pixels.png') repeat;
}

h1 {
  margin: 30px auto 10px;
  text-align: center;
}

.info {
  margin: 15px 3.9%;
  padding: 0;
  background: #888;
  border: 1px solid #AAA;
  color: white;
}

.info>p {
  padding: 15px 20px 0;
  margin: 0;
  font-size: 110%;
}

.info>.source {
  margin-top: 20px;
}

.boxes {
  position: relative;
  margin: 20px auto 30px;
}

.box {
  display: inline-block;
  width: 25%;
  margin: 3% 3.9%;
  background: rgb(255, 255, 200);
  border: 1px solid #888;
  cursor: default;
  text-align: center;
  vertical-align: middle;
  color: black;
}

.hightlight:hover {
  box-shadow: 0 0 8pt #FFF;
  -moz-transition: box-shadow 200ms;
  -webkit-transition: box-shadow 200ms;
  transition: box-shadow 200ms;
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://andywer.github.io/jquery-dim-background/jquery.dim-background.min.js"></script>
  </head>
  <body>
    <div class="info">
      <h1>Example Demo with variable dimming</h1>
      <p>
        <b>Hover over the boxes to see different levels of dimming!</b>
      </p>
      <div class="boxes">
        <div class="box hightlight" id="dim-nothing">
          <h2>Box #1</h2>
          <p>
            I will actually not dim anything.
          </p>
        </div>
        <div class="box hightlight" id="dim-a-bit">
          <h2>Box #2</h2>
          <p>
            I will dim the screen just a bit!
          </p>
        </div>
        <div class="box hightlight" id="dim-medium">
          <h2>Box #3</h2>
          <p>
            I will dim the screen!
          </p>
        </div>
        <div class="box hightlight" id="dim-a-ton">
          <h2>Box #4</h2>
          <p>
            I will dim the screen a ton!
          </p>
        </div>
        <div class="box hightlight" id="dim-pitch-black">
          <h2>Box #5</h2>
          <p>
            I will dim the screen <b>PITCH BLACK!</b>
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 2

sol
sol

Reputation: 22939

You can add a class to the body when the input has focus using .focus().

And remove that class when it loses focus with .focusout().

simple example...

$('#js-search').focus(function() {
  $('body').addClass('is-dimmed');
})

$('#js-search').focusout(function() {
  $('body').removeClass('is-dimmed');
})
body {
  background: url(https://unsplash.it/1000)
}

.search {
  background: white;
  height: 100px;
  display: flex;
}

.search input {
  width: 100%;
  font-size: 3em;
  z-index: 1;
}

.is-dimmed:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search">
  <input type="search" id="js-search">
</div>

Upvotes: 1

Related Questions