I am working on a react application.
I have this requirement to show a switch similar to the one used in an iPhone setting.
I am able to use two images based on the on/off state and display it.
Is it better to create a component using input type=checkbox ?
You don't need an image for this:
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.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%;
}
<!-- Rounded switch -->
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
I took it from here: w3schools
[edit] A one that looks more similar to the iphone switch
.form-switch {
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.form-switch i {
position: relative;
display: inline-block;
margin-right: .5rem;
width: 46px;
height: 26px;
background-color: #e6e6e6;
border-radius: 23px;
vertical-align: text-bottom;
transition: all 0.3s linear;
}
.form-switch i::before {
content: "";
position: absolute;
left: 0;
width: 42px;
height: 22px;
background-color: #fff;
border-radius: 11px;
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
transition: all 0.25s linear;
}
.form-switch i::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 11px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
transform: translate3d(2px, 2px, 0);
transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
width: 28px;
transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
.form-switch input { display: none; }
.form-switch input:checked + i { background-color: #4BD763; }
.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }
<label class="form-switch">
<input type="checkbox">
<i></i>
Select Me
</label>
source: cssscript
Yes AFAIK, that's how most of the ui library does it. They do it by using label html tag and hiding checkbox and using css selectors to know when to display on/off state. Checkboxes are a very powerfull concepts in HTML. You can check this article from css-tricks which where the checkboxes can be used.
Related
Hi I am just trying to save a toggle switch value onclick to save to a Boolean field in Django
home.html
<style>
.home-container{
display:grid;
grid-template-columns: 1fr 4fr;
}
.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%;
}
</style>
<div>
<label class="switch">
** <input type="checkbox" checked>**
<span class="slider round"></span>
</label>
</div>
models.py
is_active = models.BooleanField(default=False)
urls.py
path('engine/', views.engine, name="engine"),
I tried several suggestions on the web but could not make it work as I am new to development.
I know I need to use javascript. Please help write my views.py and javascript in home.html.
How can I insert images of a sun and moon (or any two images) in the slider so when it is clicked it will change the image based on when dark/light mode is enabled? I'm not sure how to go about this. I want to keep the slider as I like the transition but I want images inside of there showing a moon when lightmode is enabled to allow a user to click it for dark mode and the same for when it is in dark mode.
HTML:
<main id="main">
<label class="switch">
<input type="checkbox" onclick="darkLight()" id="checkBox" >
<span class="slider"></span>
</label>
</main>
CSS:
body {
margin: 0;
padding: 0;
}
main {
height: 100vh;
width: 100vw;
transition: background 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
}
main p {
align-self: center;
font-family: sans-serif;
transition: color 0.3s ease;
}
/*TOGGLE COLORS*/
.dark {
background: #545454;
color: #efefef;
}
p {
background: none !important;
}
/*SWITCH*/
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
align-self: center;
}
.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:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider {
border-radius: 30px;
}
.slider:before {
border-radius: 50%;
}
JS:
$('#main').toggleClass(localStorage.toggled);
function darkLight() {
/*DARK CLASS*/
if (localStorage.toggled != 'dark') {
$('#main, p').toggleClass('dark', true);
localStorage.toggled = "dark";
} else {
$('#main, p').toggleClass('dark', false);
localStorage.toggled = "";
}
}
/*Add 'checked' property to input if background == dark*/
if ($('main').hasClass('dark')) {
$( '#checkBox' ).prop( "checked", true )
} else {
$( '#checkBox' ).prop( "checked", false )
}
It's possible to put a background image inside the slider button, with CSS. You need an image URL for the selectors .slider:before and input:checked + .slider:before. Here's an example with some imgur URLs, but I would use your own just to guard against possible link removal in the future.
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
align-self: center;
}
.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 {
background-image: url("https://i.imgur.com/6NVOxEL.png");
background-size: contain;
background-repeat: no-repeat;
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:checked + .slider:before {
background-image: url("https://i.imgur.com/L8cR8EK.png");
background-size: contain;
background-repeat: no-repeat;
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider {
border-radius: 30px;
}
.slider:before {
border-radius: 50%;
}
<label class="switch">
<input type="checkbox" id="checkBox">
<span class="slider">
</span>
</label>
I have the following CSS Toggle Switch which I got from somewhere on the web.
It works but is not draggable. When you drag the handle on either side, the knob enlarges but doesn't move in the specified direction. The only way to change the value is to click on the other space. But I need the Drag operation, if sufficiently advanced, to also change the value. After a certain amount of drag the the toggle needs to flip. Is this possible?
/* SWITCH */
.form-switch {
display: inline-block;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.form-switch i {
position: relative;
display: inline-block;
margin-right: .5rem;
width: 46px;
height: 26px;
background-color: #e6e6e6;
border-radius: 23px;
vertical-align: text-bottom;
transition: all 0.3s linear;
}
.form-switch i::before {
content: "";
position: absolute;
left: 0;
width: 42px;
height: 22px;
background-color: #fff;
border-radius: 11px;
transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
transition: all 0.25s linear;
}
.form-switch i::after {
content: "";
position: absolute;
left: 0;
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 11px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
transform: translate3d(2px, 2px, 0);
transition: all 0.2s ease-in-out;
}
.form-switch:active i::after {
width: 28px;
transform: translate3d(2px, 2px, 0);
}
.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }
.form-switch input { display: none; }
.form-switch input:checked + i { background-color: #4BD763; }
.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }
.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<label class="form-switch">
<input type="checkbox">
<i></i>
Select Me
</label>
You already use JQuery so just set the CSS behavior with *.draggable*
$(".victim").draggable({
//css animation here
});
Also set the victim class to the *input*
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I want to align a text in a <label> or <span> element to this custom switch button:
.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%;
}
<span>Custom switch</span>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
I cannot get it working setting the margin or float on the switch class element.
Use flex
body {
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: .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%;
}
<span>Custom switch</span>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
.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%;
}
.right-div {
display: inline-block;
}
.left-div {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.parent-div{
display:table;
}
<div class="parent-div">
<div class="left-div">
<span>Custom switch</span>
</div>
<div class="right-div">
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
<div>
As an alternative to flex, you can also use css tables:
.switch-container {
display: table;
}
.switch-label {
display: table-cell;
vertical-align: middle;
}
.switch {
position: relative;
display: table-cell;
vertical-align: center;
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%;
}
<div class="switch-container">
<span class="switch-label">Custom switch</span>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</div>
I want to add some functionality on toggle button change. Currently it has no functionality in toggle change. I want a method that will be called on toggle change and do some work if it is off and if it is on. I want to show and hide some link under toggle change. I have attached the sample code (CSS and HTML). Please some one help me to write the syntax.
.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: "";
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%;
}
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
You can use plain javascript by putting an onchange function on the input checkbox and toggling the links display property. The function below looks at the checkbox whenever it is click and if it is checked, will display the link as block, and if it is unchecked, it will display the link as none (hide it).
function toggleCheck() {
if(document.getElementById("myCheckbox").checked === true){
document.getElementById("aLink").style.display = "block";
} else {
document.getElementById("aLink").style.display = "none";
}
}
.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: "";
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%;
}
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" id="myCheckbox" onchange="toggleCheck()" checked>
<span class="slider round"></span>
</label>
<a id="aLink" href="" style="display:block;">Link</a>
$('#toggle').on('click', function(){
if ( $(this).is(':checked') ) {
$('#link').show();
}
else {
$('#link').hide();
}
});
.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: "";
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%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Toggle Switch</h2>
<label class="switch">
<input id="toggle" type="checkbox" checked>
<span class="slider round"></span>
</label>
<br/>
Link