How to create and read values from a button slider?

How to create and read values from a button slider? - javascript

I am trying to read a true/false value from a button slider. Here are my codes
<select name="slide-1" id="slide-1">
<option value="true">On</option>
<option value="false">Off</option>
</select>
<input type ="button" value="submit" id="btnSubmit" />
<script>
$('#btnSubmit').on('click', function () {
var $optionElement = $('#slide-1').val();
alert($optionElement);
});
</script>
I was able to read the values. However, I would like to transform the element
into a slider and at the same time still be able to read the values out of it
This is my desired slider button that I would like to achieve

I suggest trying to do this in css with a checkbox html element. Here you can find an easy implementation of how to do this with css. It might suit your needs.
Html:
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
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: #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%;
}

Related

How can I change the toggle state of a button during page load with Javascript?

I'm trying to build a simple web application where the user can personalize his settings. In the settings page I have a few toggle buttons, so I need to chenge the button state during page load for it to match the preferences we have on the database.
The toggle button's CSS uses a :before pseudo selector (code below), so is there a way to change the button state with javascript before the page is loaded? Thanks
.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%;
}
<label class="switch">
<input type="checkbox" id="privacy-button">
<span class="slider round"></span>
</label>

Adding attribute checked at input helps you to display the button as checked
<label class="switch" >
<input type="checkbox" id="privacy-button" checked="">
<span class="slider round"></span>
</label>

JavaScript Obtain value from Given switch and write it to some file online

The Complete Code is shown below.
I would like to get the value of Switch and write it in some .txt file online and everytime when I'm opening this webpage,It should fetch the value from that .txt file online and update the switch accordingly.Is there any way to do it
I am a Newbie to JavaScript and all my Experience is in Python Programming.Therefore I am asking this question in a perspective of python (Python Files,Web Scraping,etc.)
Is JavaScript Capable enough of fetching some data from a file online and updating it Synchronously ?
.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%;
}
<h2>Dark and Day Mode</h2>
<label class="switch">
<input type="checkbox" checked />
<span class="slider round"></span>
</label>

Like this for JS part:
let isChecked = document.querySelector("#switch");
isChecked.addEventListener('click', function() {
console.log(isChecked.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%;
}
<h2>Dark and Day Mode</h2>
<label class="switch">
<input id="switch" type="checkbox" checked />
<span class="slider round"></span>
</label>

change main wrapper background color with CSS button

I want to change background color of main wrapper using the background-color attribute via CSS button
My class is <div class='mainWrapper fullWidth'> the CSS for the class is .mainWrapper
Below is the CSS for the button I found it at https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_switch
<!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 {
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>
</head>
<body>
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
</body>
</html>
I tried the following
<!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 {
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>
</head>
<body>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
<style>
body {
background: grey;
}
</style>
<script>
function colorize(light) {
if (light) {
document.body.style.background = 'grey';
}
else {
document.body.style.background = 'blue';
}
}
</script>
<body>
<div id="switch">
<button id="slider round" onclick="colorize(true)"></button>
<div id="slider">
<button onclick="colorize(false)"></button>
</div>
</div>
</body>

Do you want to change the background color with the toggle switch?
If so you can add an event listener to the checkbox and change the background of your wrapper div/class using javascript or jQuery.
Here is an example of it.
https://jsfiddle.net/ba513j27/
<div id="wrapper">
<h2>Toggle Switch</h2>
<label class="switch">
<input type="checkbox" checked id="tog-bg">
<span class="slider round"></span>
</label>
</div>
<script>
document.getElementById("tog-bg").addEventListener('change', function(){
if(document.getElementById("tog-bg").checked) {
document.getElementById("wrapper").style.backgroundColor = "white";
} else {
document.getElementById("wrapper").style.backgroundColor = "green";
}
});
</script>

Select DOM elements using the class name, then add any color that you want
document.getElementsByClassName("mainWrapper").style.backgroundColor = "Color Name";

Changing checkbox to checked clicking on span does not work

I want to develop a toggle button with a checkbox using css and jquery. I want to click on the span, which represents my toggle button, to change the property checked of the given checkbox.
Unfortunately the span does not change the property. However it goes into the right jQuery function. Using the button, it is going into the function and changing the property. Can you tell me why I cannot use the span to change the property?
$(document).on("click", ".taskcomplete2", function() {
if ($(".taskcompletecheck").prop('checked')) {
$(".taskcompletecheck").prop('checked', false);
} else {
$(".taskcompletecheck").prop('checked', true);
}
});
.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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" class="btn btn-danger taskcomplete2">Button</button>

You need to attach the click event to the span as well
$(document).on("click",".taskcomplete2,.taskcompletecheck", function(){
....
});
$(document).on("click",".taskcomplete2,.taskcompletecheck", function(){
if($(".taskcompletecheck").prop('checked')){
$(".taskcompletecheck").prop('checked', false);
}else{
$(".taskcompletecheck").prop('checked', true);
}
});
.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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" class="btn btn-danger taskcomplete2">Button</button>

JS could be not necessary at all, if you set the for attribute on the labels and the id on the input
<label class="switch" for="taskcomplete">
<input type="checkbox" class="taskcompletecheck" id="taskcomplete">
<span class="slider round taskcomplete2"></span>
</label>
So since the span element is nested into the label, if you click it then the checkbox will be toggled.

You can just apply, for attribute to get button click to work, however Please use e.preventDefault();
<label for="buttonToggle" class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" id="buttonToggle" class="btn btn-danger taskcomplete2">Button</button>
Demo:
$(document).on("click",".taskcomplete2", function(e){
if($(".taskcompletecheck").prop('checked')){
$(".taskcompletecheck").prop('checked', false);
}else{
$(".taskcompletecheck").prop('checked', true);
}
e.preventDefault();
});
.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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="buttonToggle" class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" id="buttonToggle" class="btn btn-danger taskcomplete2">Button</button>

$(document).on("click", ".switch", function(e) {
if ($(".taskcompletecheck").prop('checked')) {
$(".taskcompletecheck").prop('checked', false);
} else {
$(".taskcompletecheck").prop('checked', true);
}
console.log("Status :: "+$(".taskcompletecheck").prop('checked'));
e.preventDefault();
});
.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%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" class="taskcompletecheck">
<span class="slider round taskcomplete2"></span>
</label>
<button type="button" class="btn btn-danger taskcomplete2">Button</button>
Apply event on parent element.

Toggle function fires twice on transitionend

I have a toggle whose checked status I am calling with jQuery. Every time I click the toggle from unchecked to checked, the console logs "do this!" twice. Why does this function fire twice and what is the workaround to get it to fire once?
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function() {
if (document.getElementById('my-checkbox').checked) {
console.log("do this!")
}
});
.switch {
position: absolute;
top: 15%;
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,
.slider .number {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.slider .number {
background: none;
font-size: 14px;
left: 9px;
top: 9px;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before,
input:checked+.slider .number {
-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/2.1.0/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle"></span>
</label>
My final HTML looks like this, for which the event fires three times:
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle">
<span class="number">00</span>
</span>
</label>

There are two transitionend events firing: one from your #my-toggle <span>, one from your ::before pseudo element. You need to differentiate those two events. You’d need the event argument e for that.
The only difference is then found in e.originalEvent.propertyName (for the corresponding CSS property) and e.originalEvent.pseudoElement.
So let’s check for that last property in the if condition.
Also put another && e.target == this in there, since the transitionend event is also firing for children because the event bubbles up. Since you’re only listening to the event on the parent <span>, you can’t simply call e.stopPropagation which would only be useful to prevent the parent(s) from firing the event.
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
if (document.getElementById("my-checkbox").checked && !e.originalEvent.pseudoElement && e.target == this) {
console.log("do this!");
}
});
.switch {
position: absolute;
top: 15%;
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,
.slider .number {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.slider .number {
background: none;
font-size: 14px;
left: 9px;
top: 9px;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before,
input:checked + .slider .number {
-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/2.1.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id = "my-checkbox">
<span class="slider round" id = "my-toggle">
<span class="number">00</span>
</span>
</label>

This comes from the elements that are concerned by the transition.
If you put a console.log(event) (with putting it as a argument of your event handler), you will see that the concerned properties are background-color and trandform.
These 2 properties are concerned by the transition, so your event hendler is called once per property.
Here is the snippet with "filtering" on transform property:
$("#my-toggle").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(event){
if (event.originalEvent.propertyName === "transform" && document.getElementById('my-checkbox').checked){
console.log("do this!");
}
});
.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/2.1.1/jquery.min.js"></script>
<label class="switch">
<input type="checkbox" id="my-checkbox">
<span class="slider round" id="my-toggle"></span>
</label>

Use .slider instead of .switch when looking for the click function, this worked for me and I don't know why.
$('.slider').on('click',function(){
alert("Test");
});

Develop Reference

JavaScript is the programming language of the Web.

How to create and read values from a button slider? - javascript

Related

How can I change the toggle state of a button during page load with Javascript?

JavaScript Obtain value from Given switch and write it to some file online

change main wrapper background color with CSS button

Changing checkbox to checked clicking on span does not work

Toggle function fires twice on transitionend

Categories

Resources