How do I switch to switch to css?

Asked

Viewed 368 times

2

I have two CSS files for the same HTML and would like to use a switch button to switch styles. The idea is to assemble a keying "standard layout" "new layout".

I tried it, but I didn’t succeed.

<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
        <span class="onoffswitch-inner"  id="original"></span>
        <span class="onoffswitch-switch"  id="novo"></span>
    </label>
</div>

and also

$('#novo').click(function (){
  $('link[href="theme_4_1.css"]').attr('href','theme_4_1.css');
});
$('#original').click(function (){
   $('link[href="theme_4_0.css"]').attr('href','theme_4_0.css');
});
css switch
  • 1

    you came to see if the href being amended?

  • Failed q? Does not stop at the event or does not load css?

  • 1

    You are assigning the same value that is already present in href, I mean, it would never change the value. Shouldn’t it be reversed? Where is the theme 4_1 receive 4_0 and vice versa?

  • That’s right Anderson! It worked.

  • I believe the problem may have been because of the events inside the elements on the label, both may be triggered or not propagate, or maybe it’s because the selectors inside the $(...) are wrong, see the answer: http://answall.com/a/189186/3635

3 answers

3

I believe this is because href is converted to the absolute address, so you can make the selector so href$="theme_4_0.css", outside that I believe that you have reversed the selectors, I believe that the correct one is so:

$('#novo').click(function (){
  $('link[href$="theme_4_0.css"]').attr('href', 'theme_4_1.css');
});
$('#original').click(function (){
   $('link[href$="theme_4_1.css"]').attr('href', 'theme_4_0.css');
});

Or you may have applied the event to SPAN but both are triggered by being inside the switch, so switch to this:

$('#myonoffswitch').change(function () {
     if (this.checked) { //Se ON aplica o novo tema
         $('link[href$="theme_4_0.css"]').attr('href', 'theme_4_1.css');
     } else { //Se OFF aplica o tema antigo
         $('link[href$="theme_4_1.css"]').attr('href', 'theme_4_0.css');
     }
});

Using the disabled with link

You can also create 2 link elements directly in HTML (I believe you are using this script https://proto.io/freebies/onoff/):

$(function() {
    var tema1 = $("#theme-4.0");
    var tema2 = $("#theme-4.1");
    
    $('#TROCAR-TEMA').change(function () {
        if (this.checked) {
            console.log("Tema novo");
            tema1.prop("disabled", true);
            tema2.prop("disabled", false);
        } else {
            console.log("Tema antigo");
            tema1.prop("disabled", false);
            tema2.prop("disabled", true);
        }
    });
});
.onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 56px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link id="theme-4.0" rel="stylesheet" href="tema1.css">
<link id="theme-4.1" rel="stylesheet" href="tema2.css" disabled>

<div class="container">
  <div class="onoffswitch">
      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="TROCAR-TEMA" checked>
      <label class="onoffswitch-label" for="TROCAR-TEMA">
          <span class="onoffswitch-inner"></span>
          <span class="onoffswitch-switch"></span>
      </label>
  </div>
</div>

-1

In my projects I use the following code and works well:

Html:

<link id="theme" href="dark.css" rel="stylesheet">
<button id="whiteTheme" data-theme="white.css">White Theme</button>


Script:

$("button[data-theme]").click(function() {
    $("link#theme").attr("href", $(this).data("theme"));
});

I hope it helps.

-1

Solved the problem by reversing the order of href.

$('#novo').click(function (){
    $('link[href="theme_4_1.css"]').attr('href','theme_4_0.css');
});
$('#original').click(function (){
    $('link[href="theme_4_0.css"]').attr('href','theme_4_1.css');
});

Browser other questions tagged css switch

You are not signed in. Login or sign up in order to post.