Trouble getting a CSS switch to work.

[Grayfox]

I am making a webpage and am having trouble getting the code for the switch I want to work, I assume it is an issue with the jQuery but on the demo site the code works fine.
I have used code examples from this site as well as others that require jQuery and they've worked fine.

While I am a nub at web design, I understand the basics of it

This is the code used in the script tags

$(".switch").on('click', function(){
  $(this).toggleClass("active");
  if ($('.span').text() == "ON")
       $('.span').text("OFF");
    else
       $('.span').text("ON");
});

This is the code used in the style tags

@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
.switch {
  position: absolute;
  height: 60px;
  width: 170px;
  background: #8b8b8b;
  cursor: pointer;
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  text-indent: 45%;
  line-height: 60px;
  -moz-box-shadow: 0px 0.5px 2.5px #6f6f6f;
  -webkit-box-shadow: 0px 0.5px 2.5px #6f6f6f;
  box-shadow: 0px 0.5px 2.5px #6f6f6f;
}
.switch .span {
  font-family: 'Montserrat', sans-serif;
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  font-size: 30px;
  z-index: -1;
  color: #666;
}
.switch:before {
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  position: absolute;
  content: "";
  height: 55px;
  width: 40px;
  top: 2.5px;
  left: 2.5px;
  cursor: pointer;
  background: #eee;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 2.5px 0 5px #6f6f6f;
  -webkit-box-shadow: 2.5px 0 5px #6f6f6f;
  box-shadow: 2.5px 0 5px #6f6f6f;
}
.switch.active {
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
  background: #9bc148;
}
.switch.active .span {
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
  text-indent: 20%;
  color: #eee;
}
.switch.active:before {
  left: 127.5px;
  -moz-box-shadow: -2.5px 0px 5px #6f6f6f;
  -webkit-box-shadow: -2.5px 0px 5px #6f6f6f;
  box-shadow: -2.5px 0px 5px #6f6f6f;
}

This is the code used in the body tags

<div class='switch'>
  <div class='span'>OFF</div>
</div>

Code example from this site
https://codepen.io/XDBoy018/pen/PwNrYr

 

[TenEightyOne]

JQuery seems a bit like overkill here. I'd do this in simple JS. I tested it with multiple buttons and so changed the Position property of the switch parent to Block instead of Absolute, otherwise they overlay one another.

function toggleSwitch2(switchID){
                if (document.getElementById(switchID + "span").innerHTML=="OFF"){
                    document.getElementById(switchID + "span").innerHTML="ON";
                    document.getElementById(switchID).className="switch active";
                } else {
                    document.getElementById(switchID + "span").innerHTML="OFF";
                    document.getElementById(switchID).className="switch";
                }
            }

Give each button an ID, I've used "button1", "button2" and so on. Give each inner span the same ID with the word "span" added. Obviously you can use what you like, I just tried to make this example obvious. You also need to add the onClick event to each switch.

Here's how the script and HTML looks... I've given up trying to get it all to work in the code tags

Note: The function name has a 2 on it because I also tested a class-based one, worked well but would only work with a single button. The example above will work with as many as you like.

Test.html is attached, has three switches that work independently

 

[Grayfox]

Thanks.
Now just need to scale it down.
either by finding the correct CSS lines about size and positioning or using the "scale" attribute

 

[TenEightyOne]

Thanks.
Now just need to scale it down.
either by finding the correct CSS lines about size and positioning or using the "scale" attribute

It all depends on how you want the final site to look, but you should keep fixed elements fixed (not scaled against viewport baseline) and only declare responsive elements in scale (scaled against viewport baseline).

As you'll know you can check the page on different screen/device sizes in the Inspector (in Chrome at least), find a balance that works. Scaled switches/buttons/controls that rely heavily on CSS (beyond the default types in the standard) can be very troublesome in repsonsive design - I'd say they should be fixed. If they do need to change size then consider using a bit of JS to resize them to one of a number of presets (in response to a change in viewport size) to ensure that you keep control over each re-iteration.

The last thing... check your page on lots of old browsers. Anything with -webkit is likely to break (or simply not appear) on older browsers, you'd be surprised how many of those there are when it matters