7

When something happens I am setting body background-color to grey and decrease opacity. However that obviously changes opacity of a button as well.

What I want to achieve is when action occur, change opacity of everything except the button.

var highlight = $('#' + scroll).closest('div').find('button');
$('body').css('opacity', '0.2');
$('body').css('background-color', 'grey');
$(highlight).css('background-color', '#FDFF47');
$(highlight).css('opacity', '1');

How can that be done?

Adeel
  • 2,901
  • 7
  • 24
  • 34
Przemyslaw Wojtas
  • 391
  • 4
  • 8
  • 20

5 Answers5

8

In background-color use rgba() to reduce opacity only to background. opacity property is not needed.

$('body').css('background-color', 'rgba(128, 128, 128, 0.5)');

About rgba(R, G, B, A) - https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_and_rgba()

Muthu Kumaran
  • 17,682
  • 5
  • 47
  • 70
3

When you are trying to set background with opacity use rgba which stands for Red,Blue, Green colors with Opacity(Alpha) where you can pass the last parameter as opacity. use background: rgba(0,0,0,0.2) instead of setting background-color: grey. Check below snippet for reference.

div {
  background-color: rgba(0, 0, 0, 0.2);
  padding:50px;
}

p {
  color: blue;
}
<div>
  <p>My Text</p>
</div>
RaJesh RiJo
  • 4,302
  • 4
  • 25
  • 46
0

Rather than setting the opacity, you can set the background color with an alpha value:

$('body').css('background-color', 'rgba(192,192,192,0.2)');
Nick
  • 16,066
  • 3
  • 16
  • 32
  • none of these answers are doing what I want it to do, rgba value is set on body, but it's not darkened to make the button bright and rest of the page darker – Przemyslaw Wojtas Oct 13 '17 at 11:33
  • @PrzemyslawWojtas I suspect you're getting all these same answers because the question was asked in a way that would yield them. I might rephrase the question and show some html, explaining the effect you want on each element. – Nick Oct 13 '17 at 11:36
  • I don't think it's that hard. Set body background to greyish colour except for buttons. body is of course a whole page, but I want to highlight a specific button to give user a hint "click here" – Przemyslaw Wojtas Oct 13 '17 at 11:40
0

try with this jquery code

$(document).ready(function() {
  $("#btn").hover(function() {
    $("#btn").css('background-color', 'grey');
    $("#btn").css('opacity', '0.5');
  });
});
#btn {
  border: none;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">test</button>
Bhargav Chudasama
  • 6,928
  • 5
  • 21
  • 39
0

As you write in comments to your question, if you're looking for listen to url changes, I suggest you to have a look to this question.

Instead, if you're looking for execute code when that div is on top of HTML page try something like this:

$(document).on('scroll', function(){
    if($('your_div').offset() == 0){
        //do stuff when your_div is on top of the page
    }
})

This code listen to page scroll, and when your div have an offset of 0px from the top of the page it executes the code in if statement


EDIT
If you do this $(body).css('opacity', '0.2') you're setting opacity for all in body (specifically for all <body>'s children). To set opacity only for some elements, you have to do something tricky: you have to wrap those elements with a div with the same class for all and then set opacity for that class.

I.e.: assuming you wrap that element with a div which class is opacity, if you do $('.opacity').css('opacity', '0.2') only elements in those div will have opacity setted to 0.2.

Matteo Meil
  • 1,192
  • 10
  • 20
  • I have this working, in my question I am asking how to set background color of body without taking a button into effect so set background-color: whatever; but not for button – Przemyslaw Wojtas Oct 13 '17 at 11:49