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>
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
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>
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'm having trouble getting a toggle switch from the w3c tutorial to line up with some text beside it.
this is the tutorial https://www.w3schools.com/howto/howto_css_switch.asp
and this is my code:
<div class="sliderWrapper">
<div><?php echo __('Postal Address');?> </div>
<label class="switch">
<input type="checkbox" name="data[SplashPage][firstname]">
<span class="slider"></span>
</label>
</div>
<div class="sliderWrapper">
<div><?php echo __('Postal Address');?> </div>
<label class="switch">
<input type="checkbox" name="data[SplashPage][lastname]">
<span class="slider"></span>
</label>
</div>
.sliderWrapper{display: inline-block;margin:24px 24px 24px 24px;}
.sliderWrapper div{display: inline-block;line-height:60px;}
.switch {
position: relative;
display: inline-block;
padding:0px;
width: 54px;
height: 28px;
}
/* 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: #d7d7d7;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 1px;
bottom: 1px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {background-color: #1fb5ad;}
input:focus + .slider {box-shadow: 0 0 1px #1fb5ad;}
input:checked + .slider:before {-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);transform: translateX(26px);}
Can anyone help me out with making the text be vertically aligned with the switch - been banging my head on the table of hours now :-(
jsfiddle: https://jsfiddle.net/vfjgtaoh/
Add the line:
vertical-align: middle;
to your switch class, this will vertically align the contents
Fiddle: https://jsfiddle.net/tzv75zvk/
Add Vertical-align:middle; property to label tag and remove line-height for the div
.sliderWrapper div{
display: inline-block;
}
.switch {
position: relative;
display: inline-block;
padding:0px;
vertical-align:middle;
width: 54px;
height: 28px;
}
Link for reference
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