Here is what I have been trying.
What should go into the javascript function myFunc() to get 'Switch-2' to enable [with gray background turning blue] when I click on 'Switch-1' and vice-versa. I'm fairly new to CSS or jQuery. I believe the solution should be using one of these or both. Would be of great help if someone can share the code to achieve this. Thanks in advance.
function myFunc() {
var checkBox1 = document.getElementById("SW1");
var checkBox2 = document.getElementById("SW2");
if (checkBox1.checked == true){
alert("SW2:"+checkBox2.checked);
//How to Enable SW2 with blue background
} else {
alert("SW2:"+checkBox2.checked);
//How to Disable SW2 with gray background
}
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<html>
<body>
<h2>Toggle Switch</h2>
<label>Switch 1: </label>
<label class="switch">
<input type="checkbox" id="SW1" onclick="myFunc()">
<span class="slider"></span>
</label><br><br>
<label>Switch 2: </label>
<label class="switch">
<input type="checkbox" id="SW2">
<span class="slider round"></span>
</label>
</body>
</html>
Is this what you want to do? Try running the snippet.
function switchClicked(currentSwitchState, switchToToggle) {
var switchElement = document.getElementById(switchToToggle);
switchElement.checked = currentSwitchState.checked;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<html>
<body>
<h2>Toggle Switch</h2>
<label>Switch 1: </label>
<label class="switch">
<input id="s1" type="checkbox" onclick="switchClicked(this, 's2');">
<span class="slider"></span>
</label><br><br>
<label>Switch 2: </label>
<label class="switch">
<input id="s2" type="checkbox" onclick="switchClicked(this, 's1');">
<span class="slider round"></span>
</label>
</body>
</html>
Related
I'm designing an element for a plugin called elementor. This project is really just to help me learn the functionality of developing for wordpress.
What I'm making is a "toggle content" slider that can toggle between text or predefined html. I've used the slider according to this guide: https://www.w3schools.com/howto/howto_css_switch.asp
Right Now the size of a switch is very big. I want a small switch. How Can change it? Can anyone help me out? Thanks.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class=" switch">
<input type="checkbox" checked>
<span class=" slider round"></span>
</label>
</body>
</html>
I used calc(); and var();, so you don't have to do a lot of work
Mozilla documentation: calc() explanation and var() explanation and --var: ; explanation .
just change ONE value the height of switch for change all responsively!!!
* {
--switch-height: 34px; /* change the value */
/* other code, pls see it then */
}
if you want a smaller switch, the 8px default padding, will take a lot of space,
so I simplified it for you! just change the --switch-padding: 8px; to something smaller...
automatically CSS calculates all things for you, for making the switch look good for all dimensions :)
the same thing if you want the switch to be bigger, remember to make the padding also bigger (the padding var)
I know This is not a site "we-are-doing-your-work.com" but I really want to help you!
here the complete fixed code:
* {
--switch-height: 34px;
--switch-padding: 8px;
--switch-width: calc((var(--switch-height) * 2) - var(--switch-padding));
--slider-height: calc(var(--switch-height) - var(--switch-padding));
--slider-on: calc(var(--switch-height) - var(--switch-padding));
}
.switch {
position: relative;
display: inline-block;
width: var(--switch-width);
height: var(--switch-height);
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
content: "";
position: absolute;
height: var(--slider-height);
width: var(--slider-height);
left: calc(var(--switch-padding) / 2);
bottom: calc(var(--switch-padding) / 2);
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
transform: translateX(var(--slider-on));
}
.slider.round {
border-radius: var(--slider-height);
}
.slider.round:before {
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</body>
</html>
* {
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.label{
background-color: #fea621;
display: flex;
border-radius: 50px;
height: 26px;
width: 50px;
align-items: center;
justify-content: space-between;
padding: 5px;
position: relative;
}
.checkbox{
opacity: 0;
position: absolute;
}
.checkbox + .label .ball{
content: url(323329.png);
background-color: #001e3d;
}
.checkbox:checked + .label .ball{
content: url(flag-ukraine-circle.svg);
background-color: #001e3d;
transform: translateX(24px);
}
.ball{
background-color: #001e3d;
border-radius: 50%;
height: 22px;
width: 22px;
position: absolute;
top: 2px;
left: 2px;
transition: transform .2s linear;
}
.ball:before:checked{
content: url(flag-ukraine-circle.svg);
left: 50px;
}
.ball:checked:after{
left: 0;
}
<div>
<input type="checkbox" id="checkbox" class="checkbox">
<label for="checkbox" class="label">
<i class="ukraine"></i>
<i class="usa"></i>
<div class="ball"></div>
</label>
</div>
You can change the size by changing the css
.switch {
position: relative;
display: inline-block;
width: 35px;
height: 22px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 10px;
width: 10px;
left: 4px;
bottom: 6px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(16px);
-ms-transform: translateX(16px);
transform: translateX(16px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<h2>Toggle Switch</h2>
<label class=" switch">
<input type="checkbox" checked>
<span class=" slider round"></span>
</label>
</body>
</html>
try to experiment with different widths and heights
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 2 years ago.
I have some toggles with spans next to them (the spans with "True" and "False" in them). I want the spans to be centered in the vertical space that the toggles takes up. How can I best achieve this?
.question__label-group {
margin-bottom: 2rem;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: '';
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #2196f3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<div class="question__label-group">
<label class="switch">
<input type="radio" name="1" id="1" />
<span class="slider"></span>
</label>
<span>False</span>
</div>
<div class="question__label-group">
<label class="switch">
<input type="radio" name="1" id="1" />
<span class="slider"></span>
</label>
<span>True</span>
</div>
The easiest way to do this would be to give the .question__label-group class the following styles: display: flex and align-items: center.
Updated your fiddle for you. You may also want to give your slider or span a margin left/right.
.question__label-group {
margin-bottom: 2rem;
display: flex;
align-items: center;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: '';
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: #2196f3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<div class="question__label-group">
<label class="switch">
<input type="radio" name="1" id="1" />
<span class="slider"></span>
</label>
<span>False</span>
</div>
<div class="question__label-group">
<label class="switch">
<input type="radio" name="1" id="1" />
<span class="slider"></span>
</label>
<span>True</span>
</div>
update css:
.question__label-group {
display: flex;
align-items: center;
margin-bottom: 2rem;
}
I have this code i get from w3schools. I need to create 8 switch toggle button and assign a number to each of them as well setting their id so I can call/refer it later on.
Here's my code
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "${count}";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
</style>
</head>
<body>
<c:set scope="page" value="0" var="count"/>
<c:forEach begin="1" end="4" varStatus="loop">
<c:forEach begin="1" end="2" varStatus="loop">
<label class="switch" id="seat${count}">
<input type="checkbox">
<span class="slider"></span>
<c:set scope="page" value="${count+1}" var="count"/>
</label>
</c:forEach>
<br><br>
</c:forEach>
</body>
</html>
I tried to use a loop to set it's label, although it was not working. I also tried to put the id as you can see from the code below but I'm not sure how to call it yet.
So how to assign unique label and id to each of the buttons and how can I call it later on? This page will be included in another page later on. Thanks in advance!
The example you trying to use doesn't allow for labels. You'd need to modify the approach. I've put together something that should handle all the things you need:
// demo to show handling of changes
var switches = document.querySelectorAll('.switch');
switches.forEach(function(item){
item.addEventListener('change', function(){
var checkbox = this.querySelector('input'),
data = checkbox.dataset;
checkbox.value = checkbox.checked ? data.on : data.off;
});
});
/* ----- start demo code ----- */
body {
font-family: "Roboto";
font-size: 14px;
margin: 0;
padding: 0;
}
.switches {
margin: 20px;
}
.switches h1 {
font-size: 1.5em;
margin-bottom: 20px;
}
/* ----- end demo code ----- */
.switch {
display: inline-block;
height: 34px;
min-width: 60px;
position: relative;
vertical-align: middle;
}
.switch.disabled {
cursor: default;
opacity: 0.5;
}
.switch .slider {
background-color: #d9d9d9;
bottom: 0;
color: #fff;
cursor: pointer;
display: block;
height: 34px;
left: 0;
padding: 0 20px 0 40px;
position: relative;
right: 0;
top: 0;
transition: 0.4s;
}
.switch .slider .on,
.switch .slider .off {
line-height: 34px;
}
.switch .slider .off {
display: block;
}
.switch .slider .on {
display: none;
}
.switch .slider:before {
background-color: #fff;
bottom: 4px;
content: " ";
height: 26px;
left: 4px;
position: absolute;
transition: all 0.4s;
width: 26px;
}
.switch .slider.round {
border-radius: 34px;
}
.switch .slider.round:before {
border-radius: 50%;
}
.switch input {
display: none;
}
.switch input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
.switch input:checked + .slider {
background-color: #2196f3;
padding: 0 40px 0 20px;
}
.switch input:checked + .slider:before {
left: auto;
right: 4px;
transition: all 0.4s;
}
.switch input:checked + .slider .on {
display: block;
}
.switch input:checked + .slider .off {
display: none;
}
<div class="switches">
<h1>Simple Switches</h1>
<label class="switch">
<input type="checkbox" data-on="Yup" data-off="Nope" value="Nope">
<span class="slider round">
<span class="on">On</span>
<span class="off">Off</span>
</span>
</label>
<label class="switch">
<input type="checkbox" data-on="good" data-off="bad" value="bad">
<span class="slider round">
<span class="on">Superpowers On</span>
<span class="off">Superpowers Off</span>
</span>
</label>
<label class="switch">
<input type="checkbox" data-on="abc" data-off="def" value="def">
<span class="slider round"></span>
</label>
</div>
DEMO here as well
You could adapt this by changing your code above to
<c:forEach begin="1" end="4" varStatus="loop">
<c:forEach begin="1" end="2" varStatus="loop">
<label class="switch">
<input type="checkbox" id="seat${count}" name="seat${count}" data-on="onValue" data-off="offValue" value="offValue">
<span class="slider round">
<span class="on">On</span>
<span class="off">Off</span>
</span>
</label>
</c:forEach>
</c:forEach>
I have a switch toggle button for an HTML page
<div>
<label class="switch" style="margin-left:14em;">
<h5>Profile</h5>
<input id="profile-toggle" checked type="checkbox">
<span class="slider round"></span>
</label>
</div>
It shows on the page like this:
I am trying to bring the label to the left side, similar to this:
Does anyone have an idea on how can I do this?
EDIT Toggle CSS
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e61610;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #29b6f6;
}
input:focus + .slider {
box-shadow: 0 0 1px #29b6f6;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
PS
The toggle switch works fine, my problem is to bring the label to the left side, in front of the button.
Add this bunch of css code and you are all good.
.switch h5 {
position: absolute;
left: -14rem;
top: 0;
margin: 0.75rem;
}
Try this
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 28px;
margin-left:14em;
}
/* Hide default HTML checkbox */
.switch input {
display: none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: green;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 1px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: green;
}
input:focus+.slider {
box-shadow: 0 0 1px #29b6f6;
}
input:checked+.slider:before {
-webkit-transform: translateX(2px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.switch h5 {
position: relative;
left: -200px;
top: -50%;
width: 175px;
}
<div>
<label class="switch">
<h5>Do you want to check</h5>
<input id="profile-toggle" checked type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<label class="switch">
<h5>Check Grammar and Spelling on Stackoverflow.com</h5>
<input id="profile-toggle" checked type="checkbox">
<span class="slider round"></span>
</label>
</div>
I have this toggle switch which I want to bring into my site.
https://jsfiddle.net/njxfnfoa/
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</div>
And the CSS is long, so I'll just keep that in the JSFiddle.
However as you can see it looks quite jagged. The PDF design I'm working to looks like this.
How can I better replicate this smooth border?
use border: 1px solid rgba(211,211,211, .8); so you have control over the Border Opacity (0.8 here)
.switch-container{
position:relative;
}
.switch {
position: relative;
display: inline-block;
width: 65px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
display: none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border: 1px solid rgba(211,211,211, .8);
}
.slider:before {
position: absolute;
content: "";
height: 32px;
width: 32px;
left: 0px;
background-color: #73c82b;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: white;
}
input:focus + .slider {
box-shadow: 0 0 1px white;
}
input:checked + .slider:before {
-webkit-transform: translateX(31px);
-ms-transform: translateX(31px);
transform: translateX(31px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<div class="switch-container">
<label class="switch">
<input type="checkbox">
<div class="slider round"></div>
</label>
</div>
You just need to fine tune the css in
.slider:before
a little bit: js fiddle