Trouble getting a CSS switch to work.

Discussion in 'Computers & Technology' started by Grayfox, Feb 28, 2020.

  1. Grayfox

    Grayfox

    Messages:
    9,789
    Location:
    Australia
    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
    Code:
    $(".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
    Code:
    @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
    Code:
    <div class='switch'>
      <div class='span'>OFF</div>
    </div>
    
    Code example from this site
    https://codepen.io/XDBoy018/pen/PwNrYr
     
  2. TenEightyOne

    TenEightyOne

    Messages:
    19,297
    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.

    Code:
    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 :D

    code.JPG

    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
     

    Attached Files:

    • test.zip
      File size:
      1,012 bytes
      Views:
      2
    Last edited: Feb 29, 2020
    Grayfox likes this.
  3. Grayfox

    Grayfox

    Messages:
    9,789
    Location:
    Australia
    Thanks.
    Now just need to scale it down.
    either by finding the correct CSS lines about size and positioning or using the "scale" attribute
     
  4. TenEightyOne

    TenEightyOne

    Messages:
    19,297
    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 :D