Invert colors of html when clicking (except imgs)

Question

I've created an on/off button and I would like for the html's content's colors to invert when on and to be normal when off! And also I would like for the images and gifs to stay the same color.. I know it's complicated :x But the problem is since the button would be inside a div in html I can't use + space ~ or > to trigger the effect.. Does anyone know how it would be possible to do it please?

Here's the code for now but it's wrong for the html part..

function invertFunction(x) {
    x.classList.toggle("invertbutton");
}

.invertfunction{
  cursor:pointer;
    position:fixed;
    top:20px;
    left:20px;
    width:60px;
  height:30px;
}

#onbutton{
    width:60px;
    height:30px;
    background-color:#fff;
    border-radius:10px;
    border:1px solid #848484;
-webkit-transition:.3s ease;
-moz-transition:.3s ease;
-o-transition:.3s ease;
transition:.3s ease;
}

#movingbutton{
    width:30px;
    height:30px;
    border-radius:10px;
    border:1px solid #848484;
    background-color:#BDBDBD;
-webkit-transition:.2s ease;
-moz-transition:.2s ease;
-o-transition:.2s ease;
transition:.2s ease;
}

.invertbutton #onbutton{
    background-color:#42B94E;
}

.invertbutton #movingbutton{
transform: translate(30px);
}

.invertbutton .html{
  -webkit-filter: invert(100%);
    filter: invert(100%);
}

<html>

<div class="invertfunction"onclick="invertFunction(this)">
    <div id="onbutton">
    <div id="movingbutton"></div>
      </div>
</div>
</html>

Thanks for the help! :)

*"But the problem is since the button would be inside a div in html I can't use + space ~ or > to trigger the effect"* - sorry, I don't understand. Are you asking how to trigger the change when you hit certain keys on the keyboard? — Michael Coker, May 28 '17 at 14:02
No but I mean I can't affect the entire html when another div is triggered do you see what I mean? With these combinators : https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered/4502693#4502693 @MichaelCoker — Maëlle, May 28 '17 at 14:05
Sounds like you want to use `document.body.classList.toggle('invertbutton')` instead, and then you can reference that parent class to affect any element on the page since it applies to `body` — Michael Coker, May 28 '17 at 14:20
@MichaelCoker Ok thank you! So this will work, the rest of the code is correct? — Maëlle, May 28 '17 at 14:29

James Douglas · Accepted Answer · 2017-05-29T08:52:09.653

You can use this code here:

function invertFunction(x) {
  x.classList.toggle("invertbutton");
  if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
    $("div:not(#movingbutton)").css('filter', 'invert(100%)');
    $("img").css('filter', 'invert(100%)');
  } else {
    $("div:not(#movingbutton)").css('filter', 'invert(0%)');
    $("img").css('filter', 'invert(0%)');
  }
}

And you can remove this css:

.invertbutton .html{
  -webkit-filter: invert(100%);
    filter: invert(100%);
}

function invertFunction(x) {
  x.classList.toggle("invertbutton");
  if ($("div:not(#movingbutton)").css('filter') == 'invert(0%)') {
    $("div:not(#movingbutton)").css('filter', 'invert(100%)');
    $("img").css('filter', 'invert(100%)');
  } else {
    $("div:not(#movingbutton)").css('filter', 'invert(0%)');
    $("img").css('filter', 'invert(0%)');
  }
}

div:not(#movingbutton) {
  filter: invert(0%);
}
.invertfunction {
  cursor: pointer;
  position: fixed;
  top: 20px;
  left: 20px;
  width: 60px;
  height: 30px;
}
#onbutton {
  width: 60px;
  height: 30px;
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #848484;
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}
#movingbutton{
  width: 28px;
  height: 28px;
  border-radius: 20px;
  border: 1px solid #848484;
  background-color: #BDBDBD;
  -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition: .2s ease;
}
.invertbutton #onbutton {
  background-color: #42B94E;
}
.invertbutton #movingbutton {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="invertfunction"onclick="invertFunction(this)">
  <div id="onbutton">
    <div id="movingbutton">
    </div>
  </div>
</div>
<br>
<br>
<br>
<div style="background-color: red;" height="100px" width="100px">Example div1</div>
<div style="background-color: green;" height="100px" width="100px">Example div2</div>
<div style="background-color: blue;" height="100px" width="100px">Example div3</div>
<div> 
  <img width="100px" src="http://www.lyricsmode.com/i/upictures/205882.gif">
</div>

CodePen example

You're awesome!! I don't know why though what you created here in the snippet is exactly what I'm looking for but it's not working on my website :/ Could I maybe give you the address so you can tell me what's wrong or is it too annoying (i'd totally get it) — Maëlle, May 28 '17 at 14:55
@MaëlleJumel That's fine, it wouldn't be annoying. I would like to see what's wrong with it. — James Douglas, May 28 '17 at 15:02
@MaëlleJumel You need to include JQuery to the bottom of the page, just above the close `
` tag. — James Douglas, May 28 '17 at 15:22
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/145310/discussion-between-james-douglas-and-maelle-jumel). — James Douglas, May 28 '17 at 15:28

Invert colors of html when clicking (except imgs)

1 Answers1