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?
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?
Share Improve this question edited Oct 13, 2017 at 12:21 Adeel 2,9597 gold badges27 silver badges36 bronze badges asked Oct 13, 2017 at 11:25 Przemyslaw WojtasPrzemyslaw Wojtas 3914 gold badges9 silver badges20 bronze badges 2- Do you mean a particular action or a general action in your HTML page? – Matteo Meil Commented Oct 13, 2017 at 11:28
- it's basically scrolling to a div, when query =?scroll=value is passed in url, value being an id of the div it's scrolling too – Przemyslaw Wojtas Commented Oct 13, 2017 at 11:29
5 Answers
Reset to default 9In 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()
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>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)');
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>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.