I have a toggle button that works with CSS but I need to add some logic when it's on and when it's off. The problem is jQuery cannot read the :after and :before on CSS because they're not actually part of the DOM.
--TOGGLE--
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span id="switch-inner" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
--CSS--
.onoffswitch {
position: relative; width: 78px;
-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 #C2C2C2; 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: 28px; padding: 0; line-height: 28px;
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: #5C7FE3; 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: 5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 46px;
border: 2px solid #C2C2C2; 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;
}
I tried the onClick event but everytime I click it (logically) it fires the code (multiple times if clicked multiple times), what would be perfect is that one would be true and fire the code and in the second click it would do something else.
I don't know if this could be super simple and my brain is tired and not thinking correctly, but any help would be helpful!!
Adding a click event handler is the right approach. Simply look at the checked property of the checkbox to know the state of the button (on/off).
document.getElementById("myonoffswitch").addEventListener("click", function(){
// Test the state of the checkbox and act accordingly
if(this.checked){
console.log("ON");
} else {
console.log("OFF");
}
});
.onoffswitch {
position: relative; width: 78px;
-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 #C2C2C2; 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: 28px; padding: 0; line-height: 28px;
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: #5C7FE3; 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: 5px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 46px;
border: 2px solid #C2C2C2; 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;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span id="switch-inner" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Related
I've created a form in which one of the questions consists of a checkbox and a textarea. I removed the standard view of checkboxes and made my own on their place. I now want to integrate the trigger of the checkbox click makes the textbox active.
I'm using jQuery and I don't know pure JS well. Unfortunately I don't have opportunity to change the HTML in my case.
var $other = $('input[type=text][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after('<label class="form-check-label" for="' + otherOption + '">');
$other.off('change');
$other.on('input');
$other.on('blur');
label {
font-size: 2rem;
color: #303030;
letter-spacing: 0.04rem;
line-height: 2.5rem;
}
label {
margin: 0;
padding-top: 0;
padding-bottom: 0.6rem;
line-height: 180%;
}
input[type="checkbox"].form-check-input {
position: absolute;
left: -9999px
}
input[type="checkbox"].form-check-input+label {
position: relative;
cursor: pointer;
}
input[type="checkbox"].form-check-input+label:before {
content: '';
background: #fff;
border: 1px solid #808080;
border-radius: 0.3rem;
height: 1.4rem;
width: 1.4rem;
position: absolute;
top: 0.5rem;
left: 0;
}
input[type="checkbox"].form-check-input+label:after {
content: '';
border-style: solid;
border-width: 0 0 2px 2px;
border-color: transparent transparent #673F9A #673F9A;
width: 1rem;
height: 0.5rem;
position: absolute;
top: 0.8rem;
left: 0.2rem;
opacity: 0;
transform: scale(2) rotate(-45deg);
}
input[type="checkbox"].form-check-input:checked+label:after {
opacity: 1;
transform: scale(1) rotate(-45deg);
color: #673F9A
}
.form-control {
display: block;
width: 100%;
line-height: 1.5rem;
height: 2.5rem;
font-size: 1.4rem;
color: #606060;
text-transform: none;
border: 2px solid #ededed;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 0.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type="text"].form-control:focus {
border: 2px solid #673F9A;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 1.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.form-check-other {
position: relative;
}
.form-check-other .form-check-label {
position: absolute!important;
left: 0;
}
.form-check-label,
.form-check-other {
display: inline-block;
padding-left: 2.5rem;
font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="construction and real estate" value="construction and real estate">
<label class="form-check-label" for="construction and real estate">construction and real estate</label>
</div>
<div class="form-check form-check-other">
<input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__">
<input class="form-control" type="text" name="other_option_response" value="" placeholder="your text">
</div>
To do what you require you can hook a change event handler to the checkbox which sets the state of the disabled property of its sibling textbox.
Also note that it's invalid HTML to have spaces within id attributes, so I replaced them with underscores in the following example.
// this should *REALLY* be in the HTML, not hacked in using JS.
var $other = $('input[type="text"][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after(`<label class="form-check-label" for="${otherOption}">`);
// toggle disabled state
$('.form-check-input').on('change', e => {
$(e.target).siblings(':text').prop('disabled', !e.target.checked).focus();
});
label {
font-size: 2rem;
color: #303030;
letter-spacing: 0.04rem;
line-height: 2.5rem;
}
label {
margin: 0;
padding-top: 0;
padding-bottom: 0.6rem;
line-height: 180%;
}
input[type="checkbox"].form-check-input {
position: absolute;
left: -9999px
}
input[type="checkbox"].form-check-input+label {
position: relative;
cursor: pointer;
}
input[type="checkbox"].form-check-input+label:before {
content: '';
background: #fff;
border: 1px solid #808080;
border-radius: 0.3rem;
height: 1.4rem;
width: 1.4rem;
position: absolute;
top: 0.5rem;
left: 0;
}
input[type="checkbox"].form-check-input+label:after {
content: '';
border-style: solid;
border-width: 0 0 2px 2px;
border-color: transparent transparent #673F9A #673F9A;
width: 1rem;
height: 0.5rem;
position: absolute;
top: 0.8rem;
left: 0.2rem;
opacity: 0;
transform: scale(2) rotate(-45deg);
}
input[type="checkbox"].form-check-input:checked+label:after {
opacity: 1;
transform: scale(1) rotate(-45deg);
color: #673F9A
}
.form-control {
display: block;
width: 100%;
line-height: 1.5rem;
height: 2.5rem;
font-size: 1.4rem;
color: #606060;
text-transform: none;
border: 2px solid #ededed;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 0.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type="text"].form-control:focus {
border: 2px solid #673F9A;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 1.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.form-check-other {
position: relative;
}
.form-check-other .form-check-label {
position: absolute!important;
left: 0;
}
.form-check-label,
.form-check-other {
display: inline-block;
padding-left: 2.5rem;
font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="construction_and_real_estate" value="construction and real estate" />
<label class="form-check-label" for="construction_and_real_estate">construction and real estate</label>
</div>
<div class="form-check form-check-other">
<input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__" />
<input class="form-control" type="text" name="other_option_response" value="" placeholder="your text" disabled />
</div>
You need to get the click on element and then use nextAll to find next input.
And then, you use focus and blur to fire on your input.
I also used class to check if click element was already clicked or not
var $other = $('input[type=text][placeholder="your text"]');
var otherOption = $other.attr('name');
$('.form-check-other > .form-check-input').after('<label class="form-check-label" for="' + otherOption + '">');
$('.form-check-input').change(function() {
if (!$(this).hasClass('checked')) {
$(this).addClass('checked').nextAll('input[name=other_option_response]:first').focus();
} else {
$(this).removeClass('checked').nextAll('input[name=other_option_response]:first').blur();
}
});
label {
font-size: 2rem;
color: #303030;
letter-spacing: 0.04rem;
line-height: 2.5rem;
}
label {
margin: 0;
padding-top: 0;
padding-bottom: 0.6rem;
line-height: 180%;
}
input[type="checkbox"].form-check-input {
position: absolute;
left: -9999px
}
input[type="checkbox"].form-check-input+label {
position: relative;
cursor: pointer;
}
input[type="checkbox"].form-check-input+label:before {
content: '';
background: #fff;
border: 1px solid #808080;
border-radius: 0.3rem;
height: 1.4rem;
width: 1.4rem;
position: absolute;
top: 0.5rem;
left: 0;
}
input[type="checkbox"].form-check-input+label:after {
content: '';
border-style: solid;
border-width: 0 0 2px 2px;
border-color: transparent transparent #673F9A #673F9A;
width: 1rem;
height: 0.5rem;
position: absolute;
top: 0.8rem;
left: 0.2rem;
opacity: 0;
transform: scale(2) rotate(-45deg);
}
input[type="checkbox"].form-check-input:checked+label:after {
opacity: 1;
transform: scale(1) rotate(-45deg);
color: #673F9A
}
.form-control {
display: block;
width: 100%;
line-height: 1.5rem;
height: 2.5rem;
font-size: 1.4rem;
color: #606060;
text-transform: none;
border: 2px solid #ededed;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 0.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
input[type="text"].form-control:focus {
border: 2px solid #673F9A;
border-radius: 0.5rem;
background-color: #fff;
padding: 0 1.6rem;
margin-bottom: 2.4rem;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.form-check-other {
position: relative;
}
.form-check-other .form-check-label{
position: absolute!important;
left: 0;
}
.form-check-label, .form-check-other {
display: inline-block;
padding-left: 2.5rem;
font-size: 1.4rem !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="construction and real estate" value="construction and real estate">
<label class="form-check-label" for="construction and real estate">construction and real estate</label>
</div>
<div class="form-check form-check-other">
<input class="form-check-input" type="checkbox" id="other_option_response" value="__other_option__">
<input class="form-control" type="text" name="other_option_response" value="" placeholder="your text">
</div>
I am using a 'switcher' which currently has been styled and looks great.
What I would like is that when the switcher is swiped to the right then a DIV is printed on the page.
I can't find the error on the page...
Here's the CSS
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.remove('hidden');
} else {
document.querySelector('.triggeredDiv').classList.add('hidden');
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative; width: 200px;
-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: 51px; padding: 0; line-height: 51px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "MONTHLY LIST";
padding-left: 10px;
background-color: #dfe4ea; color: #999999;
}
.onoffswitch-inner:after {
content: "BY COUNTRY";
padding-right: 10px;
background-color: #dfe4ea; color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 50px; margin: 0.5px;
background: #A1A1A1;
position: absolute; top: 0; bottom: 0;
right: 145px;
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;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv.hidden {
display: none;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Hello World
</div>
The bit of the CSS that I believe 'hides' the CSS is here:
.triggeredDiv {
display: block;
}
.triggeredDiv.hidden {
display: none;
}
Can anyone see what it is that is wrong or missing?
This post was a previous precursor to this request for help.
By the way, the actual switcher generator is here: https://proto.io/freebies/onoff/
OK, I 'fixed' it by adding the JavaScript to the bottom of the page...I guess that is what was wrong - right?
I have an HTML, CSS switcher which is working well.
However - I'd like the effect to be opposite so that there is NO text at all, but when the switcher is swiped then text (via a DIV) is trigger - so basically the opposite way around to how it currently is.
Any ideas how to do this? I have tried playing around with the 'hide' class but I can't get it to work...
Here's the code:
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.remove('hidden');
} else {
document.querySelector('.triggeredDiv').classList.add('hidden');
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-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: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
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;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv.hidden {
display: none;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
You need to reverse the logic and call the function initially.
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.add('hidden');
} else {
document.querySelector('.triggeredDiv').classList.remove('hidden');
}
}
toggleDiv() // initial call. You may need to wait DOMContentLoaded
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
document.querySelector('.triggeredDiv').classList.add('hidden');
} else {
document.querySelector('.triggeredDiv').classList.remove('hidden');
}
}
toggleDiv()
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-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: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
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;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv.hidden {
display: none;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
I changed the class name from hidden to shown and adjusted the JavaScript accordingly.
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
Demo
function toggleDiv() {
var triggeredDiv = document.querySelector('.triggeredDiv');
if (document.getElementById('myonoffswitch').checked) {
triggeredDiv.classList.remove('shown');
} else {
triggeredDiv.classList.add('shown');
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-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: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
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;
background-color: #999999;
}
.triggeredDiv {
display: none;
}
.triggeredDiv.shown {
display: block;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
Using JQuery, hide text to begin with then show when on country.
$('.triggeredDiv').hide();
function toggleDiv() {
if (document.getElementById('myonoffswitch').checked) {
console.log("hidden")
$('.triggeredDiv').hide();
} else {
console.log("shown")
$('.triggeredDiv').show();
}
}
document.getElementById('myonoffswitch').addEventListener("change", toggleDiv);
.onoffswitch {
position: relative;
width: 200px;
-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: 51px;
padding: 0;
line-height: 51px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "BY COUNTRY";
padding-left: 10px;
background-color: #dfe4ea;
color: #999999;
}
.onoffswitch-inner:after {
content: "SHOW TEXT";
padding-right: 10px;
background-color: #dfe4ea;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 50px;
margin: 0.5px;
background: #A1A1A1;
position: absolute;
top: 0;
bottom: 0;
right: 145px;
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;
background-color: #999999;
}
.triggeredDiv {
display: block;
}
.triggeredDiv .hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="triggeredDiv">
Show Text
</div>
The context :
Im using a on/off switch button, where i would like the help-text to be on the same line as the switch.
It look's like this right now:
I would like it to look like this:
I've googled that i can use this is my div-style:
display:inline-block;
My code :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
footer {
background-color: #5B8CA8;
position: absolute;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
div.upp {
background-color: #5B8CA8;
position: absolute;
left: 0;
top: 0;
height: 39px;
width: 100%;
overflow:hidden;
}
.onoffswitch {
position: relative;
width: 55px;
-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: 23px;
padding: 0;
line-height: 23px;
font-size: 11px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "PÅ";
padding-left: 7px;
background-color: #5B8CA8;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "AV";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 15px;
margin: 4px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 28px;
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;
}
<p>
Help Text
</p>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
My question :
Where should i put display:inline-block; in my div-style?
Both p and div should have inline-block style.
Of course, in real project I'd not put style attribute - use css classes instead.
<p style="display: inline-block">
Help Text
</p>
<div class="onoffswitch" style="display: inline-block">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Use both display : inline-block; & vertical-align : middle; on both your p element and your .onoffswitch class. That should produce the desired effect!
A demo :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
/* bottom = footer height */
padding: 25px;
}
p {
display : inline-block;
vertical-align : middle;
}
footer {
background-color: #5B8CA8;
position: absolute;
left: 0;
bottom: 0;
height: 110px;
width: 100%;
overflow:hidden;
}
div.upp {
background-color: #5B8CA8;
position: absolute;
left: 0;
top: 0;
height: 39px;
width: 100%;
overflow:hidden;
}
.onoffswitch {
position: relative;
width: 55px;
display : inline-block;
vertical-align : middle;
-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: 23px;
padding: 0;
line-height: 23px;
font-size: 11px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "PÅ";
padding-left: 7px;
background-color: #5B8CA8;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "AV";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 15px;
margin: 4px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 28px;
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;
}
<p>
Help Text
</p>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitchT1" unchecked onclick="javascript:toggle1();">
<label class="onoffswitch-label" for="myonoffswitchT1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Try this Fiddle.
Note :
It's a VERY BAD idea to set display : inline-block; & vertical-align : middle; for all p elements.
It's a MUCH, MUCH better idea to add a class to your p element, like this :
<p class="help">
Help Text
</p>
Now, you can set the styles for that element like this :
p.help {
display : inline-block;
vertical-align : middle;
}
This prevents these styles from being applies to all p elements!
See also this Fiddle.
I have tried fiddling with some HTML/JS/CSS
But got stuck on how to change the flipswich dynamically to a desired state.
CSS from here https://proto.io/freebies/onoff/
function on() {
document.getElementById("innerswitchid").className = document.getElementById("innerswitchid").className + "onoffswitch-inner:before";
}
function off() {
document.getElementById("innerswitchid").className = document.getElementById("innerswitchid").className + "onoffswitch-inner:after";
}
.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;
}
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span id="innerswitchid" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<button onclick="on()">ON</button>
<button onclick="off()">OFF</button>
However that just crashes the flipswich. How can I change the flipswich dynamically to a desired state using js to change the css of the component?
Updating your code to the following:
HTML
<button id="js-btn--on">
ON
</button>
<button id="js-btn--off">
OFF
</button>
JS
document.getElementById("js-btn--on").onclick = on;
document.getElementById("js-btn--off").onclick = off;
function on() {
document.getElementById('myonoffswitch').checked = true;
}
function off() {
document.getElementById('myonoffswitch').checked = false;
}
You can toggle the checkbox and let the CSS do what it intends to accomplish rather than mixing JS and CSS.