How to change body background color with toggle?

Question

I am trying to change a couple background colors in the <body> of my website but I want to start out with changing just the body background-color. I am using a checkbox/switch to manipulate the background color when toggled but it doesn't seem to work when I click on it.
Although when I do remove the javascript script, the switch works.

Here is what I have, check it out for yourself:

    $(function() {
      $('#toggle-event').click(function() {
        $('body').toggleClass('nightmode');
    })
    });

.nightmode {
    background-color: red;
}
.slow{
 transition: left 0.7s;
    -webkit-transition: left 0.7s;
}

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}



input.togglecss + label {
  padding: 2px;
  width: 85px;
  height: 25px;
  background-color: #dddddd;
  border-radius: 60px;
}
input.togglecss + label:before,
input.togglecss + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.togglecss + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: background 0.4s;
}
input.togglecss + label:after {
  width: 25px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.togglecss:checked + label:before {
  background-color: #8ce196;
}
input.togglecss:checked + label:after {
  margin-left: 65px;
}

        <div class="switch">
          <input id="cmn-toggle toggle-event" class="cmn-toggle togglecss" type="checkbox" data-toggle="toggle" data-style="slow">
          <label for="cmn-toggle"></label>
        </div>

Any help will be really appreciated, thank you very much!

Just a heads up, you shouldn't assign multiple `id` values - I'm not sure if it would cause issues, but you shouldn't do it: http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids — 8eecf0d2, Mar 10 '16 at 03:52
The id in your html doesn't match the id in your Javascript. — nnnnnn, Mar 10 '16 at 03:53
also if you have check box it is better to `use change` event `than click` — guradio, Mar 10 '16 at 03:53
@brod Wow, even the most simple things can get your whole beautiful css to crash down. Thank you so much, this solved my issue. Learn new things everyday! — Graphicoding, Mar 10 '16 at 03:55
@guradio - why? In some browsers the change event doesn't occur till the checkbox loses focus, but in all browsers the click event occurs when when the checkbox is "clicked" via mouse or keyboard. So isn't the click event better? — nnnnnn, Mar 10 '16 at 03:56
@nnnnnn maybe when this happens `onchange in IE only fires when the checkbox loses focus. So if you tab to it, hit space a few times, tab out, you'll only get one onchange event, but several onclick events.` I only found it out in SO(there are a few more i also read in SO) but if you have better reason you can post it so i may change my mind on this as well thank you — guradio, Mar 10 '16 at 03:58
@guradio - that behaviour is exactly my point. If you hit space several times then you have checked and unchecked the box several times, which is equivalent to several mouse clicks. And other browsers would send several change events. So by using the change event you end up with different behaviour in different browsers. If you use click you get consistent behaviour. — nnnnnn, Mar 10 '16 at 04:04
@nnnnnn `only get one onchange event, but several onclick events` so it is better to use change because you get only one change compare to several click — guradio, Mar 10 '16 at 04:07
I actually used "change" as my original but I changed it because I was testing to see if that was the issue but it didn't seem to be. I forgot to change the code sorry guys. Thanks for your help, very good information. — Graphicoding, Mar 10 '16 at 04:13

score 0 · Answer 1 · answered Mar 10 '16 at 03:59

0

Try this following example

$(".my").click(function () {
   $(this).toggleClass("green");
});

.my { width: 50px; height: 50px; background-color: #336699; }
.my:hover, .place.green { background-color: #00cc00; }

<div class="my">
</div>

answered Mar 10 '16 at 03:59

Codeone

1,173
2
15
40

its should be a an example. body background color with toggle? – Codeone Mar 10 '16 at 04:03

L777 · Answer 2 · 2016-03-10T04:54:17.133

I just made a more simple function (without jQuery) that toggles the background colors at the 'onchange' event on the switcher. The classes/ids names were also updated (and the unecessary ones removed).

function changeit() {

var shortget = document.getElementsByTagName("body")[0];
var aaa = shortget.style.backgroundColor;
    
if (aaa == "black") {
shortget.style.backgroundColor = "lavender";  
} else {
shortget.style.backgroundColor = "black"; 
}
    
}

body {
  background-color:lavender;
  transition: all 1s;
  -webkit-transition: all 1s;
}

.switcher {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

.switcher + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}

input.switcher + label {
  padding: 2px;
  width: 85px;
  height: 25px;
  background-color: transparent;
  border-radius: 60px;
}

input.switcher + label:before,
input.switcher + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}

input.switcher + label:before {
  right: 1px;
  background-color: black;
  border-radius: 60px;
  transition: background 0.4s;
}

input.switcher + label:after {
  width: 25px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}

input.switcher:checked + label:before {
  background-color: lavender;
}

input.switcher:checked + label:after {
  margin-left: 65px;
}

<div class="switch">
<input id="switcher" class="switcher" type="checkbox" onchange="changeit()">
<label for="switcher"></label>
</div>

I have to say, this is a very great and reliable example. Thanks. — Graphicoding, Mar 10 '16 at 04:49

score 0 · Answer 3 · answered Mar 10 '16 at 04:20

<===========================HTML CODE===================================>

<div id="div1">CSS Pseudo Classes (not cross browser) :hover :active</div>
<div id="div2">jQuery Click to CSS</div>
<div id="div3">jQuery Click to CSS</div>
<div id="div4">jQuery Click to Toggle</div>
<div id="div5">jQuery Mousedown/MouseUp</div>
<div id="div6">jQuery Toggle</div>

<===========================CSS CODE===================================>

div {
    background-color: green;
    border: 3px groove;
    cursor: pointer;
    margin: 1em;
    padding: 1em;
    text-align: center;
}
.back-green { background-color: green; }
.back-red { background-color: red; }
#div1:hover {
    background-color: yellow;
}
#div1:active {
    background-color: red;
}

<===========================Jquery CODE===================================>

$("#div2").on("click", function() {
    $(this).css("background-color", "red");
});

$("#div3").on("click", function() {
    $(this).css({ backgroundColor: "red" });
});

$("#div4").on("click", function() {
    $(this).toggleClass('back-red');
});

$("#div5").on("mousedown", function() {
    $(this).toggleClass('back-red');
})
.on("mouseup", function(e) {
    $(this).toggleClass('back-red');
});

$("#div6").toggle(function() {
    $(this).css("background-color", "red");
}, 
function() {
    $(this).css("background-color", "");
});

Here's working fiddle for it : Fiddle :)

Now here i'm changing color multiple div's but you can use it for changing background color of your website....

Thanks & Cheers

thanks @Graphicoding and if you found it useful please accept it as an answer :) — Amulya Kashyap, Mar 10 '16 at 04:59

score 0 · Accepted Answer · answered Mar 10 '16 at 04:31

0

I think the main problem in your code is here:

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

nothing will trigger the javascript.

And another problem is as brod said, that there are multiple id values. I modified those, and it works.

Example

answered Mar 10 '16 at 04:31

Leo Zhao

544
7
18

Yes, thanks for pointing that out, the code was taken from another website but a margin-left: -9999px; I find it ridiculous as well. The main issue for me was the "multiple Id's". I kept one id and everything worked. – Graphicoding Mar 10 '16 at 04:53

score -1 · Answer 5 · answered Mar 10 '16 at 04:03

html

<select name="my-select" class="js-my-select">
  <option value="nothing" selected>Select Color</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>

<div class="js-my-image red"></div>
<div class="js-my-image orange"></div>
<div class="js-my-image yellow"></div>
<div class="js-my-image blue"></div>
<div class="js-my-image green"></div>

css

div {
  display: none;
  height: 50px;
  width: 50px;
}
.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

js

$(function() {
  var $select = $('.js-my-select'),
      $images =  $('.js-my-image');

  $select.on('change', function() {
    var value = '.' + $(this).val();
    $images.show().not(value).hide();
  });
});

How to change body background color with toggle?

5 Answers5